Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
interfaSys
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,

Re: QNX UI look and feel in WebWorks Project

No, you'll still get credited :smileyhappy:, but by using an official open source license, you make it easier to include in other projects because that license will probably be on the list of licenses approved by the legal department.
--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: QNX UI look and feel in WebWorks Project


TheMarco wrote:

I'm really not an expert in all these different licenses. Maybe someone can explain to me in layman's terms what the difference is?

 

Is asking to get credited 'too restrictive' ?!


I think you're meeting up with Eduardo soon... He is a fantastic resource to ask about all things open source :smileyhappy:

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB

Re: QNX UI look and feel in WebWorks Project

Yep, meeting him in a little over an hour. I'll bring this up! :smileyvery-happy:

 

Cheers,

 

Marco

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

Please use plain text.
Contributor
dougneiner
Posts: 13
Registered: ‎04-21-2011
My Device: Playbook

Re: QNX UI look and feel in WebWorks Project

@interfaSys -- I actually had used an image in the screenshot you showed. But when you asked, I felt embarrassed as a front end developer, and set off to solve it for Webkit. I am 90% sure Webkit does not support elliptical gradients, so I had to get a little creative. But by combining the radial gradient with webkit-transform, I was able to simulate the shadows pretty accurately:

 

Here is part of the code. You can view a static demo of the CSS (Using Chrome, Safari or your Webkit) here: http://jsfiddle.net/dougneiner/Cftsh/show  (If you want to play with it: http://jsfiddle.net/dougneiner/Cftsh/  )

 

 

.scroller:before {
	content: "";
	display: block;
	position: absolute;
	height: 300px;
	left: 8%;
	right: 8%;
	top: 1px;
	background-image: -webkit-gradient( radial, 50% 50%, 300, 50% 10%, 50, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,0.5)) );
	background-size: 600px 600px;
	background-position: 0 -300px;
	background-repeat: no-repeat;
	-webkit-transform:  translateY(-145px) scale(1.0, 0.03);
}

 



Doug Neiner - Official jQuery Team Member, Senior Designer at appendTo
http://dougneiner.com | @dougneiner
Please use plain text.
Developer
interfaSys
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,

Re: QNX UI look and feel in WebWorks Project

Nice one Doug! :smileyhappy:
I think it's an interesting effect for when you just want to show that there is more content without having to add shadows everywhere.

If the element is moving, you may want to use translate3D to get it HW accelerated (not sure there will be that much of an impact though).
--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Please use plain text.
Contributor
dougneiner
Posts: 13
Registered: ‎04-21-2011
My Device: Playbook

Re: QNX UI look and feel in WebWorks Project

Thanks! The actual implementation just uses WebWork's built in overflow: auto for single finger scrolling. Its all handled by the system. I simply listen for where it is in the scroll, and show or hide the shadows accordingly. They don't actually move at all. I'll try to get this up soon so you can see what I mean.

 

@Marco -- Sorry for hijacking your thread. I'll start a new one for my project when I release it, but would love to include your UI controls (with credit!) if you decide to release them under a open source license. I hope your chat with Eduardo goes well.

 



Doug Neiner - Official jQuery Team Member, Senior Designer at appendTo
http://dougneiner.com | @dougneiner
Please use plain text.
Developer
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB

Re: QNX UI look and feel in WebWorks Project

dougneiner very cool! I like how you solved the shadow gradient problem. I'd like to use it in my select widget because that one has to be scrollable as well in case there's a large amount of list items.

 

Would you mind sharing your code with me? We can probably make good use of eachother's stuff.

 

 

 

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

Please use plain text.
Contributor
dougneiner
Posts: 13
Registered: ‎04-21-2011
My Device: Playbook

Re: QNX UI look and feel in WebWorks Project

Hey Marco!

 

I wouldn't mind at all. I will try to clean it up and post it to Github over the weekend. 

 

Cheers,

Doug



Doug Neiner - Official jQuery Team Member, Senior Designer at appendTo
http://dougneiner.com | @dougneiner
Please use plain text.
Developer
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB

Re: QNX UI look and feel in WebWorks Project

[ Edited ]

Selects are mostly working!

 

http://www.i-marco.nl/stuff/pbui/

 

TODO still / known issues

 

- They don't auto-close yet when you click somewhere outside the select when it's opened DONE!

- They don't have the scroll thingy yet when there's a ton of options

 - No 'dropdown on top rather than bottom' functionality yet

 

What DOES work:

 

- The selects work (doh)

- They get created from a plain HTML select element

- They update the state of the (hidden) original HTML select element

- They contain zero images

- They look virtually pixel perfect

 

The JS for this element is still a trainwreck. Very much a work in progress but I figured I'd show it to you all.

 

Updated on github as well!

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

Please use plain text.
Developer
greenback
Posts: 528
Registered: ‎10-17-2010
My Device: BlackBerry Z10, DAC

Re: QNX UI look and feel in WebWorks Project

I will start learning Actionscript 3 over the weekend so I can dive into working with AIR SDK.
Did you pick a distribution license for this code?

Please use plain text.