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
Highlighted
Trusted Contributor
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900
My Carrier: Vodafone

Best Practice : OS5, 6 & 7 cross-os app.

I'm building an app that is currently designed in a 640x480 resolution. I don't want to have multiple versions of the app for 320x240 & 480x320.

How can this be achieved keeping in mind consistency across :
- Splash screens
- Icons & Logos
- Form fields & Buttons
- Font sizes.

The app has been developed in xhtml divs with 100% scalability.

Thanks
Developer
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900
My Carrier: Rogers

Re: Best Practice : OS5, 6 & 7 cross-os app.

[ Edited ]

What I do:

 

Splash Screen - make an icon that is smaller than the smallest screen size and has a transparent background, then add the background color in the config.xml, should look good on all screens although the icon is a little smaller.

 

The rest - use CSS media queries to serve CSS based on that. Each of those would have their own optimized set of graphics (which unfortunately increases the app size). The font size +form fields and button styles can be tweaked in each media query. (edit: I should note that I haven't targeted OS5 in this way so your mileage may vary with it. It does work for OS 6 & 7)

 

Have a look at this thread for a similar way that loads the CSS based on the phone model http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/CSS-media-queries/td-p/613858

 

R

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Developer
Posts: 222
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: Best Practice : OS5, 6 & 7 cross-os app.

I think best feature is CSS media queries + use liquid HTML layout.

 

 

I have app for 640x480, but app have a liquid HTML layout.

 

Only in 5 OS i using background-color for elements, but in 6+ OS I use css3 gradients.

 

 

You can look for "navigator user agent" for determining Blackberry model and OS version and provide CSS improvments to each version via Javascript.

 

Developer
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900
My Carrier: Rogers

Re: Best Practice : OS5, 6 & 7 cross-os app.

Instead of relying on the user agent you can grab the model and OS from the system API

https://bdsc.webapps.blackberry.com/html5/apis/blackberry.system.html

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Trusted Contributor
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900
My Carrier: Vodafone

Re: Best Practice : OS5, 6 & 7 cross-os app.

Thanks for the responses. I guess swapping out the css through the <head> in the html files makes sense.

What would be the best syntax to handle this in your experience? Regular css-media-query swap or a swap code specific to blackberry for better performance.

Thanks

Also, @rory, didn't quite get what you were saying about handling the splash screen.

Developer
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900
My Carrier: Rogers

Re: Best Practice : OS5, 6 & 7 cross-os app.

for the loading screen:

 

Using background.png, make it a graphic to fit in the smallest screen size you are targeting, lets say 320. Make the grapic 300X300, and make its background transparent when you save it.

 

Then in your config.xml set the background colour to something that fits your apps colour scheme. 

<rim:loadingScreen backgroundColor="#CCCCCC"
             foregroundImage="background.png"
             onFirstLaunch="true"
</rim:loadingScreen>

 

What will happen is on devices that have 640X480 screen your background.png will sit in the middle of the screen surrounded by thte background colour you entered. the bigger the screen the more colour you will see.

 

As for which way of loading CSS is more efficient, I will have to leave that to someone else to answer as I haven't actually done the device check way so I can't be sure.

 

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Developer
Posts: 222
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: Best Practice : OS5, 6 & 7 cross-os app.

People what you think about try to request feature from RIM for add support for pictures for multiple devices in config.xml like

<bbos5>
<rim:loadingScreen backgroundColor="#CCCCCC"
foregroundImage="bbos5background.png"
onFirstLaunch="true"
</rim:loadingScreen>
</bbos5>

<bbos6>
// Bbos6picture...
</bbos6>



And etc?
Trusted Contributor
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900
My Carrier: Vodafone

Re: Best Practice : OS5, 6 & 7 cross-os app.

Thanks Rory, I guess your suggestion would be very effective if the splash is a logo. I believe a larger image would be more appropriate when you need the splash to be end-to-end. Am I right?

Yeah I'm keen to hear comments on the most appropirate way to swap styles on a blackberry based on width.