One app three devices: Helping webworks developers build applications for multiple form factors

Cross platform support for BlackBerry WebWorks application developers

By Alicia Erlich on 18 May 2013 08:18 am EDT

If you are a developer attending BlackBerry Jam one question you may have is how to launch your application across multiple platforms without building multiple bar or bundle files. During one of the Webworks sessions I attended here at Jam, they discussed different techniques that can be implemented to target multiple platforms running BB10 with only one application. There was a Cascades version of this session running concurrently at Jam as well, however, my background is in Webworks so I chose to attend this one.

Entitled Three Devices, One App! Bryan Tafel and Mariano Carrizo of BlackBerry Latin America presented a brief overview of the various methods geared towards coding an application compatible with the different BlackBerry devices and their different resolutions. As keyboard devices are 720 x 720 pixels, the Z10 is 768 x 1280, and future devices will be 720 x 1280 they provided code samples, best practices, and demos (including testing on Ripple) on how applications can look and run great on all of these form factors with only one application.

By implementing these simple tweaks and variations, developers can maintain their applications (and updates) which gives them the flexibility needed to adjust or stretch content fit to any screen. This not only allows the screen resolution and orientation to be controlled with just a simple line of code but a single image can automatically be adjusted in some circumstances to the correct scale without losing quality or becoming pixilated.  

Keep in mind this only applies to developers using third party frameworks such as PhoneGap, jQuery, and Sencha. For those currently using bbUI.js, it already incorporates the necessary code to adapt to the different sizes. Some of the techniques discussed involved switching from absolute to stack/flexible layouts, as well as sample codes for CSS media queries, viewport meta tags, and utilizing responsive images. All of these methods offer a common code and/or modify the stylesheet rules.

Depending on the framework used to create your application in HTML these minor adjustments help optimize your application (including battery life and reduce screen burn-in), reduce maintenance on your device, and offer an improved user experience. It is all part of BlackBerry's commitment to only having one application for all devices.

Additional information on the full BlackBerry 10 guidelines and best practices can be found at the link below. 

More information on BlackBerry 10 UI guidelines

Reader comments

One app three devices: Helping webworks developers build applications for multiple form factors


Thank you for writing that. Now we can all stand back and laugh as that quicksilver idiot goes crazy with his supremacist crap. "I'm more intelligent. If you have nothing to say, leave" crap. What a dumbass.

You call him a dumbass for getting irritated that people feel proud to get their little 'First' cookie/gold star/pat on the head, but all he's trying to say is that commentary should be relevant to the post...not some contest to see who can get in line quickest with nothing to contribute.

,she hasn't even posted and people are commenting on how she would react.She usally comments without any significance and when she doesn't get the first ,she pouts and dumps on the person who does post with FIRST,because of her obsession,the NHL has declared that there will no longer be a FIRST period,other professional leagues are also rumored to be studing the concept.

Hey dip$hit at least get it right that I am male!! Now go eff off and get your geek on the rest of this long weekend! I'm at the cottage with my fiance and she thinks you are the pathetic

I'm glad he thinks so.A fiancé is a groom to be. You are full of bullshit,you are a woman and you have been exposed by your own stupidy.this internet stuff has many people trying to be someone they aspire to be ,suck it up,you have been exposed,by your own stupidity ,if you actually are getting married,which I doubt, you are, get ready
for many FIRSTS which you obiuosly can't handle.a person who is getting married knows what a fiancé is and a fiancée is ,your pathetic!!and stupid and gross and not humane and stupid, did I say that,oh well!!

There you go trying to be a bully again. All you are doing is assuming and you know what that means, making an a$$ out of you. Anyways my pathetic little internet a$$hole, you have been reported. Just because you can't handle not being able to say first, now you come on with personal insults about what sex I am. I do have some of the CB team on my bbm and not on the bbm channels, but on my personal bbm, they know better and now they are watching your posts. So don't be surprised if you get a personal response from them. Have a good long weekend honkonbobo

It 's all about you.You can dish it out but you can't take it.Poor little baby.You have been bulling so many people ,after they post First,that you have come to the conclusion that your behavior is normal or acceptable.It isn't ! I really don't get off calling you all sorts of things ,but you seem to be on some sort mission ,so take a deep breath and never forget that there are people that will fight fire with fire ,and what goes around comes around.Stop acting like a spoiled little Brat and grow up.

Did they post a link to the session's files or something? Because the UI guidelines don't contain WebWorls examples.

And on Sencha, you can design profiles for each devices and only load the classes and UI you need for the device the app is being run on.

Just so everyone understands, they picked those resolutions for the aspect ratios, not the resolutions themselves. For example, 1280*720 is the same as 1920*1080, and 720*720 is any 1:1 aspect ratio. It might become 1280*1280 or something on future devices.

Ahem, but if I recall the original descriptions of that session but it might have been another as there were two sessions that actually used the FORBIDDEN word: TABLET. So, did the session actually fudge on those original descriptions that might have accidentally hinted that there was a future for the Playbook.

JAM10 - Lab: Android 201: Three Devices, One App! Developing for Tablet, All Touch and Physical Keyboard form factors Want to deploy your Android™ app to multiple BlackBerry® devices? This session will dive deep into using standard Android resource allocations to deploy your Android app... View More 2 Hours Session Matthew Whiteman James Dreher

Scheduling Options Wednesday, May 15, 1:00 PM - 3:00 PM – Grand 11


I think the other session may be been 27 with a similar inclusion of TABLET in the description.

I was thinking the exact same thing. I was convinced to get the PlayBook significantly because of the prospects of it running BB10 and with all the news from BlackBerry live i was hoping to see some news on the PlayBook but nothing!

Posted via CB10

When I saw the title, I madly assumed that one the device resolutions would be 1024x600, can only hope it's more to do with ratios. Getting to the stage that I'd prefer BlackBerry to give bad news about playbook rather than the deafening silence.

Posted via CB10

The deafening silence was the bad news lol and it was loud and clear. I lost a lot of respect for Blackberry and am seriously reconsidering the Q 10.

It's good to see BlackBerry taking an approach so there's no fragmentation in the bb10 os. Very smart.

Posted via CB10

What are you talking about? It's already fragmented
OS 10.0,10.1
3 screen resolutions

and it's only been 4 months.

LOL thanks remember when it was promised to only be two different resolutions? They can drop the RIM all they want but it's still the same old RIM.