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
BlackBerry Development Advisor (Retired)
epelegrillopart
Posts: 99
Registered: ‎10-03-2009
My Device: Not Specified

Re: QNX UI look and feel in WebWorks Project

ASL2 is well known and well liked in the industry.  I'd use that  

 

And it looks great! 

Please use plain text.
Developer
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Re: QNX UI look and feel in WebWorks Project

[ Edited ]

The 'Pièce de résistance': The spinner control. Wasn't sure if I could get that to work in just CSS.

 

Screen shot 2011-06-12 at 3.35.01 PM.png

 

Now if only we can make this thing actually do something... Stay tuned :smileywink:


Staff UI Prototyper (read: full-time hacker)


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

Please use plain text.
Developer
ProfHawking
Posts: 46
Registered: ‎02-16-2011
My Device: 8300>9000>9700>9900>Z10
My Carrier: Vodafone

Re: QNX UI look and feel in WebWorks Project

guys, this toolkit is looking awesome, keep up the good work!
@interfasys, i think the idea is that this is themed the same as the qnx ui. if you want to theme your own controls to look different i'd say jquery ui and its themeroller would be the best way to go. is that what you mean?
Please use plain text.
Developer
interfaSys
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

Re: QNX UI look and feel in WebWorks Project

I agree that the goal of this project is certainly to focus on one look, but using SASS/SCSS syntax lets you achieve two goals:

1) You can build and manage styles much faster that by using simple CSS, since you can use mixins, etc.

2) You can use the default Light and Dark themes (2nd theme can be built very fast) or build your own by simply changing a couple of variables. And when I say build your own, it could just changing the main colour, but also extending the theme by adding new  icons, etc.

 

Also, there are many different frameworks that one can use to build web apps. They each have their own way of building form components and some work better than others.

What all these frameworks have in common is that they rely on CSS to display the elements, so when a theme is built with scripts, it's easier to port to a different framework.

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Please use plain text.
Developer
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Re: QNX UI look and feel in WebWorks Project

We've talked about the possibility of using SASS or something similar. I'm still on the fence about it. There's some benefits indeed in speeding up the black theme but not a whole lot to be honest. All I'd really use from it is variables probably and the amount of styles involved in changing the color theme isn't really as big as you'd think.

 

A downside is that it makes things more complicated. Everyone understands CSS, not everyone knows the SASS syntax, one needs to install Ruby, etc.

 

My vision on this thing is for it to be as lightweight as possible and: simple, simple, simple.

 

Finally, allowing theming more than often results in atrocious looking results so I don't even know how desirable it really is. Theming the widgets is possible whether we use SASS or not so maybe it's a good thing that one needs to know what he/she's doing and it requiring a little more effort to do custom theming.

 

Anyway, the jury is still out.

 

 

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

Re: QNX UI look and feel in WebWorks Project

Teaser for today:

 

Screen shot 2011-06-14 at 1.23.43 AM.png

 

I'm amazed how easy this one can be implemented. Gotta love the rock solid WebKit engine on the PlayBook.

 

input[type="range"]::-webkit-slider-thumb { ... } ??? The PlayBook has it.

 

Way to go WebKit team :smileyvery-happy:

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,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

Re: QNX UI look and feel in WebWorks Project

Thanks for your explaining your pov on sass. Regarding the fact that it's more complicated than CSS, well, the end result is still CSS that people can hack, so there shouldn't be a problem there, but yes, there has to be some good ROI for taking the time to actually write the sass file.

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Please use plain text.
Contributor
leocrawf
Posts: 47
Registered: ‎06-06-2011
My Device: bolt2
My Carrier: digicel jamaica

Re: QNX UI look and feel in WebWorks Project

Great work. Can this work in blackberry smart phone devices. It really looks great.

Please use plain text.
Developer
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Re: QNX UI look and feel in WebWorks Project

In theory it should work, provided that these phones run WebKit and support all advanced CSS features we're using.

Staff UI Prototyper (read: full-time hacker)


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

Please use plain text.
Developer
yllus
Posts: 57
Registered: ‎06-15-2011
My Device: PlayBook
My Carrier: Rogers

Re: QNX UI look and feel in WebWorks Project

Really nice work! After playing with jQuery Mobile and finding it regrettably slow on the PlayBook, for the rest of this week I'm going to take a look at ChocolateChip-UI and how I might integrate the QNX UI look into that platform. As a development framework it already appears to be leaps and bounds better in terms of performance.

 

Ideally, if that goes smoothly, I'll put a small project containing ChocolateChip-UI with QNX UI features applied to it on GitHub for others to use. Be nice to give the PlayBook dev community a framework to converge upon for web apps.

Please use plain text.