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 Carrier: Sprint

QNX UI look and feel in WebWorks Project

Ok not all that much to see yet but I started a little project. Maybe there's people who want to help out with it. It doesn't have high priority for me at the moment but whenever I'm bored I'll probably tinker with it. Who knows one day we'll have a whole suite of native QNX look and feel code for WebWorks.

 

Why? Because I can, I guess :smileywink:

 

For now we have... buttons. They're made of pure CSS, no pixels were harmed during the creation of these and I'm going to try and keep it that way for future components. I think I'll try to tackle selects next because I hate the popup thing you get right now when using a select.

 

Anyway, have a look. The buttons look pretty darn real.

 

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

 

Note that you have to check this out on your PlayBook, not in a browser. In a normal browser the font won't look right and the tap states won't work.

 

If there's anyone here who thinks it's cool to try and see how far we can take this and who's a CSS ninja please send me a message and we'll try to see how we can work together. If not I'll just keep tinkering with it whenever I feel like it.

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 Carrier: Sprint

Re: QNX UI look and feel in WebWorks Project

Second component is mostly working: text inputs!

 

They include the 'cross' that pops up when they're focused. You can use it to wipe out the textfield.

 

This is all highly experimental and I'll be reworking the JS involved into something more robust and modular but I'm starting to think I'm on to something here.

 

Let me know if you agree or whether I'm wasting my time here :smileywink:

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 Carrier: Sprint

Re: QNX UI look and feel in WebWorks Project

[ Edited ]

Ok this thing has now officially ran out of hand. We have on/off togglers. Including the exact same animation that the native component has. It's not 100% pixel perfect yet because the blue doesn't fade to gray and vice versa but I think it's so close to the real thing that the average user won't even notice the difference.

 

I guess I've now reached some sort of point of no return and I'm gonna have to do all the widgets, or most of them anyway. The rolling pickers are going to be a challenge I think. But... I think I can do it. Hah!

 

Haven't seen any reactions yet here but I sure do hope you all like it.

 

Once this thing reaches a more mature state I will make everything available open source for free so we can all have awesome native-looking UI's in WebWorks. Right now the JS is kind of a hack. I plan to make it more robust but at the moment I'm first focusing on making it work.

 

I'm quite pleased with how far I got in just a few hours! :smileyvery-happy:

 

Here's a screenshot of the current state of affairs:

 

ui.jpg

 

Staff UI Prototyper (read: full-time hacker)


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

Please use plain text.
Developer
praveen_rajan
Posts: 163
Registered: ‎05-06-2011
My Carrier: Not Specified

Re: QNX UI look and feel in WebWorks Project

Hi,

 

This looks pretty amazing stuff. :Clap::Clap::Clap:

 

Thanks

Praveen

Please use plain text.
Developer
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Carrier: Sprint

Re: QNX UI look and feel in WebWorks Project

No new widget today but I have reworked it all so it will simply transform plain old form components into QNX ones.

The markup is now just:

 

<form class="qnxform">
<div>
<input class="qnx" type="text" size="30" />
</div>
<div>
<input class="qnx" type="button" value="I am a button" />
</div>
<div>
<input type="submit" class="qnx" value="I am a submit" />
</div>
<div>
<button class="qnx">I am a plain button</button>
</div>
<div>
<input type="checkbox" value="on" class="qnx toggle" checked />
</div>
</form>

 

And the JS + CSS will transform them into real looking QNX components.

 

I now have a fairly decent foundation to build many other widgets. Tomorrow I'll try to tackle the select element and the checkbox. 

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

Re: QNX UI look and feel in WebWorks Project

[ Edited ]

hello,

I am willing to help in the project.

 

Thanks

 

I was watching this

http://corlan.org/2011/02/17/working-with-playbook-qnx-ui-components/

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,702
Registered: ‎10-16-2008
My Carrier: Rogers

Re: QNX UI look and feel in WebWorks Project

These look FANTASTIC!! Great work :smileyhappy:

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Contributor
anzorb
Posts: 30
Registered: ‎02-04-2011
My Carrier: Rogers

Re: QNX UI look and feel in WebWorks Project

I'am willing to help. I'm working on elastic scrolling lists that mimic the OS UI. Would be nice to put it all together into a WebWorks framework.

Please use plain text.
Developer
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Carrier: Sprint

Re: QNX UI look and feel in WebWorks Project

Thanks Tim! :smileyhappy: Hope I'll get a bunch more done soon!

 

For anyone who would like to help: Please let me know what parts you'd like to help with.

In terms of CSS I don't really need help, I can get everything to look pixel perfect. For the JS part there's things that could use help:

 

- better, proper widget-style JS architecture

- some widgets will be pretty complex such as the spinning selectors

 

In general I'd like to keep this very simple. Ideally people would just need to set classes on some form elements, insert the code and have the elements look and feel like QNX ones. This doesn't do EVERYTHING but it does a lot of things. What I wouldn't want is for this to turn into a really heavy framework. For heavy component it's better to maybe create separate side-projects that use this core project. Anyway ideas are welcome on this.

 

I still haven't really made a 'bigger plan' with everything so consider it all in a sketch-phase at this point.

 

Let me know if you have thoughts/ideas and things you'd like to help with.

 

 

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

Re: QNX UI look and feel in WebWorks Project

I would like to help in Javascript, recently I am beginning in the development of objecto with Javascript

Please use plain text.