Supporting BlackBerry Passport – the whole story

September 25, 2014 — Leave a comment

Welcome to the last part of my article series on ‘Supporting BlackBerry Passport and 10.3 SDK / API’

First three parts of this article series help you to support the BlackBerry Passport from SDK / API 10.2 – the other ones are using SDK 10.3

Please read these articles before going on:

  1. Supporting BlackBerry Passport – step one 10.2
  2. Supporting BlackBerry Passport – Keyboard Shortcuts
  3. Supporting BlackBerry Passport – Fonts, Layouts, Logic
  4. Supporting BlackBerry Passport – Git, Colors and ActionBar
  5. Supporting BlackBerry Passport – Themes, SignatureAction, Touch on Keyboard
  6. Supporting BlackBerry Passport – Icons for different Resolution and Density
  7. Supporting BlackBerry Passport – Active Frames
  8. Support BlackBerry Passport – Think in ‘du’ (Design Units)

This article will be the last one telling you HowTo transition your apps from 10.2 to 10.3 and support the new BlackBerry Passport.

From now on developing for 10.3 will be the normal case for me: all new apps will start with 10.3 – existing apps will get bug fixes (or updated data for my Conference Apps) for 10.2, too.

Just in-time for BlackBerry Passport Launch

This week – just in-time for the launch of BlackBerry Passport today – I finished my work and most of my apps are now 10.3 and all are supporting the size and density of BlackBerry Passport.

You want to test some of them ? Open BlackBerry World, search for ‘ekke’:

ekkes-passport-apps

All Apps marked with 10.3 require as minimum OS 10.3.0 and are using some of the new cool features.

ekkes EXPRESS charts are working best with BlackBerry EXPESS.

10.2 → 10.3 Checklist: The Whole Story

Here’s a short summary what I did to make my apps 10.3 – ready. Something like a recipe. To understand it all please read the other 8 parts of this blog series !

Manage your source code repository

10.3. development becomes my ‘master’ branch in Github projects. 10.2 will remain in a branch and from time to time will get changes manually or via Git CherryPick

Relocate your Assets

Move all Images you’re using for

  • ActionItems
  • Tabs
  • Menus
  • Content like ListItems

from assets/images to assets/10ppd/images. Check if you’re using some of the standard BlackBerry 10 Icons, download them from Cascades UI Guide Pages and copy the ones you’re using into assets/12ppd/images. (The new ones are 96×96)

Put a task on your ToDo list to design all Images from 10ppd/images for 12ppd/images or even for all sizes (8ppd, 9ppd, 12 ppd, 16ppd)

Place Device-Specific Images (Backgrounds, Covers) into static assets folders like assets/1440×1440

Let Images you always want to use as-is in exactly that pixel-size at assets/images.

Remember:

  • Cascades scales Images from ppd folders for ActionBar, Tab, Menu DOWN from higher density, where Images from lower density folders are used without scaling
  • Cascades scales Images used in content area UP or DOWN if not found in the matching ppd folder
  • Cascaes uses Images from assets root always as-is without scaling

Easy Check if device is Passport

Add method bool isPassport(){…} to ApplicationUI.cpp

Then it’s easy to test if something must be done specific for the Passport

Try to avoid this and to create adaptable Layouts

Tune you QML files for 10.3

Go through all of your qml files and change the import of bb.cascades to 1.3

Search for 720, 768, 1280 inside your *.qml files – you’ll probably find layouts with minWidth, maxWidth etc you now have to change to support the 1440×1440

Search for OrientationHandler: add some code to ignore Orientation Changes Portrait<->Landscape if device isPassport()

Assets from C++

You’re using Images from assets folder also from C++ – per ex. creating a Toast Dialog with an Icon ?

Before 10.3 Images were merged from static assets only – so at runtime you were sure to get the right one.

Now with 10.3 the ppd folders are ALL available for the app – this means you don’t know if your Image is coming from 10ppd or 12ppd or …

There’s a new method from Application Class to request the Assets URL for a specific filename.

Bar-Descriptor.xml: Branding, Icons

Inside your bar-descriptor.xml you ca set a branding color.

From your code you have access to the generated color palette. So go through your layouts to see where you have to change Colors from Color.XXX to ui.palette.primary or so. per ex. if setting your own ‘Selection’ Color in Lists.

You can also use this color for Text or to colorize Icons (filterColor)

Application Icons for 10.2 are sized 114×114 – now for 10.3 it’s recommended to provide different sized Application Icons.

Scrolling from Passport Keyboard

Check if all your ScrollViews and ListViews are scrolling from Passport Keyboard swiping. If not request the focus to your ScrollView or ListView.

Hint: pehaps after pushing a Page on top and coming back to your ListView you have to request the focus again.

10.3 ActionBar

Use the new features from 10.3 ActionBar: Signature Icons or Compact Mode.

Hint: If using Compact Mode add some bottom padding to your ListView or ScrollView or add an empty Container with some minHeight – otherwise the last row perhaps isn’t completely visible because of SignatureAction or TabMenu from left or OverflowMenu from right overlapping.

Pixel to Design Units

Change all your Paddings, Margings, Width / Height from Pixel to Design Units – then your layouts will look similar on different devices.

Theme / Styling

You’re supporting the Dark and Bright Theme ? Then let your users decide what to use from your app settings.

Hint: I’m not allowing to set the Bright one on organic display technology (OLED)

Last Check

Don’t forget a last check using Passport in Landscape Mode if all works as expected !

Have Fun with 10.3 and BlackBerry Passport.

I will add some screenshots to demo what I changed between 10.2 and 10.3 for my apps I mentioned above.

As soon as these blogs will be available I will tweet about and add a link here.

No Comments

Be the first to start the conversation!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s