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
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB

Re: QNX UI look and feel in WebWorks Project

Ok cool. In a few days I'll post the source on GitHub so people can get it, tinker with it and submit patches / additions if they want to.

 

The basic mantra is: take existing form HTML elements and transform them into QNX elements through progressive enhancement. All that while NOT actually touching the original element because that could break all sorts of things. This makes it super easy to use for people because all they'll have to do is load the JS and CSS. to make it work.

 

A second important thing is to avoid having to use images as much as possible. CSS3 can do almost anything to get the right graphic style. The only image in the current set is a cross to wipe a text field. Everything else is pure WebKit CSS3. There might be a few more things coming up where an image is needed but most of the time it's not even when you think it is.

Staff UI Prototyper (read: full-time hacker)


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

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

And we have checkboxes!

 

Screen shot 2011-05-30 at 3.01.29 PM.png

 

Again, no images were used. These are pure CSS.

Staff UI Prototyper (read: full-time hacker)


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

Please use plain text.
Trusted Contributor
chicoxml
Posts: 227
Registered: ‎09-03-2010
My Device: Not Specified

Re: QNX UI look and feel in WebWorks Project

This will not work in the device's 5.0

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

This is ONLY for PlayBook. Not sure what you mean by 5.0? BB OS for phones?

 

It wasn't meant to work on there.

 

Here's a teaser for the select elements I'm working on right now.

Screen shot 2011-05-30 at 10.04.06 PM.png

 

 

Again, no images were harmed during the creation. Still rocking pure CSS.

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: 531
Registered: ‎10-17-2010
My Device: BlackBerry Z10, DAC

Re: QNX UI look and feel in WebWorks Project

Kudos for getting this going. QNX style components for WebWorks will make things look nice and pretty without having to reinvent any wheels for basic apps.

 

This is useful. :Batman:

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

Styles for select dropdowns are ready. Still need to write the JS but I'm confident I'm getting this one to work perfectly as well.

 



 

Here's a screen:

 

Screen shot 2011-05-31 at 3.46.01 PM.png

 

 

Staff UI Prototyper (read: full-time hacker)


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

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

Source available on GitHub: https://github.com/TheMarco/WebWorksQNXWidgets

 

Note that pretty much everything is subject to changes, big and small.

You can use the stuff that's there now if you want but my advice would be to hold off until things mature a bit.

Staff UI Prototyper (read: full-time hacker)


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

Please use plain text.
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: QNX UI look and feel in WebWorks Project

These look fantastic!!

 

I was talking with the team today, and we are planning on doing some UI updates to the Ripple tooling and giving it more of a PlayBook look and feel.  We'll definately have to consider using your CSS styling in our UI redo, and if we do use it, we'll contribute back any other UI updates back to your repo.

 

Still early yet... but its be something we'll be watching.

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

[ Edited ]

That sounds awesome Tim!

 

I'm starting to get kind of excited about this project. When I started it was just a boredom experiment really. I didn't think I was going to be able to get it to look pixel-perfect but apparently I was wrong there :smileyvery-happy:

 

Once I have most of the important widgets done there will probably be some refactoring going on in this CSS. Keep an eye on the GitHub repo I guess!

 

Also, I've also asked this to Adam Stanley: Would this project be eligible for the Developer Challenge? It's not an app but I'd think it's super useful and innovative. Can you check into this maybe?

Staff UI Prototyper (read: full-time hacker)


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

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

It would be great if this could be built with sass. That way we could 'theme' the components very quickly.
--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Please use plain text.