05-28-2011 05:05 PM
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
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.
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.
05-29-2011 12:07 AM
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
05-29-2011 03:49 AM - edited 05-29-2011 03:49 AM
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!
Here's a screenshot of the current state of affairs:
05-30-2011 04:46 AM
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.
05-30-2011 09:21 AM - edited 05-30-2011 09:46 AM
I am willing to help in the project.
I was watching this
05-30-2011 01:46 PM
Thanks Tim! 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.