Archives For Cascades Development

This year first time ever I’ll attend Qt World Summit in Berlin and so I also in my spare time wrote a conference app.

Conference2Go Qt World Summit can be downloaded here


There was only a very short timeframe, a new API and also a complete rewrite from scratch, so if you know some of my other Conference2Go apps, this first version misses some things: Calendar- , Notebook-, Foursquare – Integration, Search for Sessions / Speaker, birds-eye-view of all sessions, Shortcuts for keyboard devices and full Classic Trackpad support. I’ll add this later.

Conference2Go Qt World Summit gives you:

  • Sessions –> Details with Speaker –> Room
  • Trainings –> Details with Speaker –> Room
  • Speaker –> Details –> all Sessions of this Speaker –> Details
  • Tracks –> Sessions –> Details …
  • Favorite /set / remove from all Sites with Session data)
  • Venue
    • Floorplan / Rooms
    • Twitter Search #QtWS15
    • Location on BlackBerry Map / Navigate to…
    • Qt World Summit Homepage
  • ekkes-corner (BBM, Blogs, Mail to, Profiles)

Sessions and Trainings are segmented by Conference Day and grouped by Time.

Scheduled Items (Break, Lunch, Party, …) have a light background

Keynotes and Lightning Talks have own Icon, Session Tracks are colored.

Sessions marked as Favorite have an orange flag.

Tap on a Room / Floor and open in MediaPlayer to zoom in / out

All Screens support Portrait and Landscape

Video and more info will follow – here are some screenshots:

01_app_tabs 02_sessionlist_1 03_sessionlist_2 04_sessiondetail_1 05_sessiondetail2 06_sessiondetail_landscape 07_sessiondetail_room 08_trainings 10_spekaerlist_1 11_speakerdetail_1 12_speakerdetail_2

13_tracks 14_favorite 15_venue 16_floorplan 17_floorplan_2 18_location 19_homepage 20_ekkes_corner 21_ekkes_corner_2

See you in Berlin and have fun with the app. If there’s something wrong or missing please send feedback from ekkes-corner Tab inside the app.

(edited 2015-09-26 – see below new tests added)

This is the first part of a series about performance in mobile business apps. Developing apps for the enterprise always is a great challenge: you have to deal with servers from backend, Online / Offline – mode, complex workflows and your app should help the employees to get their work easy done. Performance is one of the keys to success. I’ll talk here about some scenarios you may run into if developing business apps.

Getting data from a server via REST or SOAP you have to rely on data sent to you and sometimes it’s not as expected. Per ex. in one of my Enterprise projects from time to time I had to sync master data where 150k records must be fetched from server and stored locally into SQLite. From API documentation there was one field as unique index declared.

Persisting bulk data into SQLite should be done in a batch transaction. (More about this in another part of this series)

Did so and suddenly SQLite reports an error: INSERT failed because of “Index not unique”. From batch transaction SQLite doesn’t tell you which records are duplicates. To verify this I inserted record by record and found 20 duplicates and could report to IT. Inserting record by record was very slow: 80 minutes instead of some seconds. So what to do ?

To verify data it would be the best to check if the indexes are unique before inserting them into the SQLite. In this case index was a String field and my first idea was to use a QStringList:

void ApplicationUI::checkIndexQStringList()
    JsonDataAccess jda;
    QVariantList cacheList;
    QStringList myIndexes;
    int duplicates;
    cacheList = jda.load(dataAssetsPath("fakeName.json")).toList();
    duplicates = 0;
    for (int i = 0; i < cacheList.size(); ++i) {
        QVariantMap fakeMap =;
        QString myIndex = fakeMap.value("Username").toString();
        if (myIndexes.contains(myIndex)) {
        } else {
            myIndexes << myIndex;

Unfortunately this took 13 minutes – so was no solution.

Then instead of a QStringList I tried to use a QVariantMap:

void ApplicationUI::checkIndexQVariantMap()
    JsonDataAccess jda;
    QVariantList cacheList;
    QVariantMap myIndexes;
    int duplicates;
    cacheList = jda.load(dataAssetsPath("fakeName.json")).toList();
    duplicates = 0;
    for (int i = 0; i < cacheList.size(); ++i) {
        QVariantMap fakeMap =;
        QString myIndex = fakeMap.value("Username").toString();
        if (myIndexes.contains(myIndex)) {
        } else {
            myIndexes.insert(myIndex, "");

Now it took only some seconds 🙂

You can check this from a project at Github:

There I’m using fake data of 50k records and the difference is huge:

  • 2 minutes (using a QStringList)
  • 1.2 seconds (using a QVariantMap)


If there’s something slow in your app – it’s always worth to search for the reason. I never would have thought that a QStringList is so much slower in this usecase as a QVariantMap.

… updated 2015-09-26 ….

thanks to feedback from twitter @ICODeRUS and @qtproject I added two more tests to make it even faster 🙂

Using a QMap<QString> instead of a QVariantMap reduces time by 10% and using QHash<QString> speeds it up to 400 mS (3 times faster as QVariantMap). see the details from GitHub project, here are the results:


… more blog posts will follow: SQLDataAccess vs Qt/SQL, Threads or what else ?, Objects and Pointer in QML, Caching into JSO or SQLite ?, SQLite tuning, optimize Queries, Startup time of your app, …

This is part #3 of my blog series ‘Supporting BlackBerry Classic’ as native BlackBerry10 developer.

Please read about screen sizes and first steps here and about Shortcuts here.

BlackBerry Classic isn’t only a great BlackBerry 10 Device with a physical keyboard and touch screen above –

there’s also the TrackPad back which gives you control on focus and speeds up working:


On a ‘normal’ Touchscreen Device (with or without a physical Keyboard) most times you’re not thinking about foucs: you touch on a UI Control or ActionItem and then something happens or you scroll through the content (using your fingers on touchable screen or on touchable keyboard on BlackBerry Passport)

Using a TrackPad is different. Think using a very small TouchPad outside of your TouchScreen or using a Mouse with clickable TrackWeel.

The TrackPad makes it very easy to move around on your screen and to ‘click’ on something. Of course you want to know which UI Control gets the Focus before clicking on it. In most cases Cascades does this for you and highlights the control getting the focus.

Here’s a TabbedPane where the actualTab is selected as usual:


While using the TrackPad the focus was shown to let you know which Tab gets the focus. Clicking on the Tab with focus selects this Tab.

Using a TrackPad you – as a developer – must always think about focus vs selected. For users of your app it should be easy to distinguish.

For this TabbedPane Cascades uses different background colors from the uipalette of your Theme to highlight the control with focus.

There are some UI Controls not getting focus by default: per ex. Labels, Containers, ImageView.

Here’s an ImageView using focusPolicy to let Cascades know that this control needs to get the focus:

ImageView {
    id: startButton
    navigation {
        focusPolicy: NavigationFocusPolicy.Focusable
    // ...
    gestureHandlers: [
        TapHandler {
            onTapped: {
                // doSomething

Using the TrackPad and ‘clicking’ on the Image will be the same as tapping on it: the onTapped() was executed – so it’s the same as tapping with a finger on it.

Tip: don’t use onTouch() instead of TapHandler – clicking the TrackPad will do nothing !

Using the NavigationPolicy.Focusable Cascades will highlight the ImageView with focus:


There are two lines at top and bottom and the background is slightly different. If this is ok for you, you’re done.

There will be situations where you want to change something more. Here’s another ImageView used as a placeholder for an empty list as long as there’s no data to be displayed. The Image has a Taphandler and ‘clicked’ there will be some informations for the user why there’s no data.

Here are the ImageViews on bright or dark theme and NO focus:


Before going on with focus from TrackPad take a look at the ActionBar: the Signature ActionItem in the middle is disabled, because we don’t have data.

NEVER disable a Signature ActionItem ! Signature Actionitems are colored and it’s not easy to know if it’s enabled or disabled – a better way is to remove the ActionItem and to add as soon as there’s some data:


Adding or removing is easy done:

    attachedObjects: [
        ActionItem {
            id: summaryOpenAction
            title: qsTr("Summary")
            imageSource: "asset:///images/ic_calendar_month.png"
            ActionBar.placement: ActionBarPlacement.Signature
            onTriggered: {
ScrollView {
    id: scrollView
    visible: false
    onVisibleChanged: {
        } else {
    // ...

and now the ImageView with focus from TrackPad navigation:


Cascades allows you to customize the colors or to change the brightness or saturation.

Same ImageViews customized:


The Label on top of the ImageView becomes red if focused and the brightness was changed so the user knows immediately which control has focus.


Container {
    ImageView {
        id: image_01
        navigation.focusPolicy: NavigationFocusPolicy.Focusable
        effects: [
            BrightnessEffect {
                enabled: image_01.navigation.wantsHighlight
                brightness: rootPane.isDark()? 50.0 : -10.0
    Label {
        id: label_01
        text: ""
        textStyle.color: image_01.navigation.wantsHighlight? Color.Red :Color.Black
    gestureHandlers: [
        TapHandler {
            onTapped: {
    // ...

The ImageView gets NavigationFocusPolicy.Focusable and a BrightnessEffect with different values for dark or bright theme.

Text color of the Label changes from black to red as soon as the ImageView wants to be highlighted.

Tip: Don’t forget: if coloring Labels try to use Colors from your uipalette.

Below you can see some Labels using uipalette.primaryBase and uipalette.primary:


Label {
     text: qsTr("in")
     textStyle.fontSize: FontSize.Large
     textStyle.color: ui.palette.primaryBase
 Label {
     id: daysLeftLabel
     text: ""
     textStyle.fontSize: FontSize.XXLarge
     textStyle.color: ui.palette.primary
 Label {
     text: qsTr("days")
     textStyle.fontSize: FontSize.Large
     textStyle.color: ui.palette.primaryBase

Documentation TrackPad, BrightnessEffect

stay tuned – more info HowTo support BlackBerry Classic will follow.

This is part #2 of my blog series ‘Supporting BlackBerry Classic’ as native BlackBerry10 developer.

Please read about screen sizes and first steps here.


Shortcuts are a powerful concept to help users to navigate through your app using the keyboard. BlackBerry Q10 and Q5 were the first devices with full QWERTY / QWERTZ keyboard for BlackBerry 10 followed by BlackBerry Passport. Read about differences between Q10 and Passport here.

Device Shortcuts

Doing a long-press on a key using OS 10.2 / 10.3.0 you could add a speed-dial – shortcut.

OS 10.3.1 and BlackBerry Classic are offering much more options what to do from long-pressing a key:


YES gives you some options:



From Settings | Shortcuts …


… it’s easy to get an overview of all assigned keys:


It’s a good idea to explain to your users HowTo define a shortcut to open your app with a single longpress.

Shortcuts inside your APP

The easiest way to use Shortcuts inside your App is to add them to your Actions:

actions: [
        ActionItem {
            title: qsTr("Edit Pos") + Retranslate.onLanguageChanged
            imageSource: "asset:///images/ic_view_list.png"
            ActionBar.placement: ActionBarPlacement.Signature
            onTriggered: {
                // do your stuff
            shortcuts: [
                SystemShortcut {
                    type: SystemShortcuts.Edit
        ActionItem {
            title: qsTr("Map of this site") + Retranslate.onLanguageChanged
            imageSource: "asset:///images/ic_map.png"
            ActionBar.placement: ActionBarPlacement.InOverflow
            onTriggered: {
                // do your stuff
            shortcuts: [
                Shortcut {
                    key: qsTr("m")

There are two different types of shortcuts:

  • SystemShortcut
  • Shortcut

SystemShortcuts will be translated by Cascades – to avoid collisions it’s recommended to translate your custom Shortcuts using qsTr(“xxx”)

Opening the Menu, Users will see the small letter of the shortcut – so it’s easy to learn and understand them:


You can add Shortcuts also to Tabs, Images, Pages, …

Here’s a (simplified) Layout from one of my apps where Shortcuts are defined at Page level and working great on OS 10.2.x (Q5, Q10) and also OS 10.3.0 (Passport):


Running the same app on OS 10.3.1 and BlackBerry Classic the Shortcuts stopped working.

BlackBerry Classic and Trackpad are changing the way UI Controls can be focussed or selected. (Will blog about this in Part #3)

So I tried to place the Shortcuts at the Container and it still didn’t work. Then I tried to place them at the ListView because the ListView is the UI Control the TrackPad is using to scroll and to focus. Voilá: This was working on BlackBerry Classic:


But it only works on 10.3.1 and Classic – not on 10.3.0 and Passport – so I added a switch like this:

// ...
attachedObjects: [
    ComponentDefinition {
        id: myShortcutComponent
        SystemShortcut {
            type: SystemShortcuts.Search
            onTriggered: {
                // do your stuff
// ...
if (app.isPassport()){
    myPage.shortcuts = [myShortcutComponent.createObject()]
    } else {
     myListView.shortcuts = [myShortcutComponent.createObject()]

Now my app is working fine on 10.3.0 / 10.3.1 and Passport or Classic.

There were no problems using KeyListeners. Shortcuts are bound to a specific UI Control, where KeyListeners can be everywhere and if a Key wasn’t catched it goes up to the parent until root object is reached. I’m using KeyListener for attached external Keyboards and handling ESC for Back, Arrows etc.

Sample at Github

To see Shortcuts in action I created a sample at Github.


Curious: Now from this small sample app OS 10.3.1 and Classic also work fine using Shortcuts at Page level. Haven’t figured out what makes it different in my more complex app. At Cascades Forum I noticed that other’s also have some problems with Shortcuts on 10.3.1 / Classic. So if you’re running into this try to move the Shortcuts to the UI Control getting the focus from Trackpad.

Have Fun with the Classic and stay tuned for Part #3 about Focus and TrackPad.

BlackBerry Classic was just launched on 2014-12-17 and – like BlackBerry Passport – introduces some new ways to navigate through the apps. It’s new for BlackBerry10 Apps, but for users coming from Bold 9900 or so it’s the classic way to navigate.

BlackBerry Passport introduced a touchable Keyboard and a large square screen (1440×1440) with high density. BlackBerry Passport also was the first device with OS 10.3.0. I wrote a blog series ‘HowTo support BlackBerry Passport‘ – you should read this first, because some new ways to develop native BlackBerry 10 apps (like Design Units – du) are explained in detail.

BlackBerry Classic introduced the TrackPad and some hardware keys users voted for. BlackBerry Classic is the first device running OS 10.3.1. All existing devices  running OS 10.2 will also get an update to 10.3.1 in first quarter of 2015.

This blog series will give you some tips and tricks HowTo support the Classic from your native BlackBerry 10 apps. In most cases there’s nothing you have to do to make your apps run on Classic, but to support all new features best and to provide the native UX there will be some work. It’s also a good idea for all your apps to support OS 10.3.1 – then your apps will look and work great in 2015 on all devices

Screen Size

If your app already supports the Q10, your app will display content correct, because both devices are square and have 720 x 720 Pixel.

But there are differences: the Classic screen is larger with 3.5″ where the Q10 has 3.1″ – the density of Classic is lower: 294 ppi (Q10 328 ppi)


If you’re using OS 10.2 or design your screens the old way using pixel, your app will display the same content on Classic as on Q10 – so your app won’t profit from the extra space. That’s why – starting with OS 10.3.0 and Passport – you should use Design units (ui).


Using design units you’ll get an extra row in lists or see more text. To understand du’s please read also my blog from ‘Support Passport‘ series.

The good thing for all your Icons: if you already support the Z30 with 8ppd – Cascades will use them on BlackBerry Classic.

Navigation concept

The Passport was the first BlackBerry 10 device offering a second touchable area outside the touch screen itself: the Keyboard. Read all about the Passport from my blog series here.

BlackBerry Classic does the same but different: Between the touchscreen and physical keyboard you’ll find the BlackBerry Toolbelt with the TrackPad in the middle:


If you ever used a legacy BlackBerry like Bold 9900 you already know the toolbelt – now BlackBerry makes this available for BlackBerry 10.

There’s no other way I know to navigate fast through your apps and typing as using a BlackBerry physical keyboard together with the toolbelt. The best is to test it out – you really must feel this under your thumbs. There are also some articles and videos available at blackberry blogs. My blog series explains what this means to you as a developer of native BlackBerry 10 apps.

OS 10.3.1 – external Keyboards

The Classic is also the first device using OS 10.3.1 which will be available for all devices soon in 2015.

One of the most important – and long missed – features for business apps is supporting international keyboard layouts if connecting external keyboards via Bluetooth or USB.


Using a Classic in normal situations you don’t need an external keyboard, but for mobile-only scenarios where you connect the device to a large screen via HDMI / Miracast and an external keyboard via Bluetooth / USB it makes sense. OS 10.3.1 will also run on touch-only devices like Z30 where from time to time it’s a great idea to enter long text from a physical keyboard.

OS 10.3.1 and Bluetooth issues

Over all I had less issues while testing OS 10.3.1 early releases – and these issues were some ‘special’ issues not targeting most of you.

If you explore all the Bluetooth stuff you’ll notice many new functions and API for 10.3.1. It’s great to see that BlackBerry is working on this and most enhancements will cover Bluetooth LE.

I detected the issues from an app supporting the ‘old’ Bluetooth to connect Scanner and mobile Printer via serial protocol (SPP). In my usecase customer has only this app in work perimeter using Bluetooth – so to reduce battery consumption while launching the app I switched Bluetooth on, then wait for the event BT_EVT_RADIO_INIT before connecting my devices. Closing the app, Bluetooth was switched off automatically by the app.

Worked fine under 10.2 and 10.3.0 on Passport, but failed on 10.3.1. From my tests I found out that there are some new Events for 10.3.1, but two of the existing events were not sent:


Thanks to @jcmrim pointing me to the right direction to find the reason and a workaround. There’s a new filtering option on 10.3.1 – see here. From docs the default is NOT filtering, so all events should come through. Setting this default manually again will bring back the missing events 🙂

int filterSuccess =  bt_ldev_set_filters(BT_EVT_ALL_EVENT, true);
if(filterSuccess == -1){
    qWarning() << "Filtering wrong " << filterSuccess;

The other issue happens if more then one Bluetooth device is connected via SPP to the BlackBerry – in my use-case a Scanner together with a Printer. Disconnecting one of the devices – per ex. while changing the battery – also disconnects the other one. Worked well on 10.2 and 10.3.0 on Passport but not on 10.3.1 and Classic. This issue is reported to BlackBerry and I got info it’s already fixed and will be available soon.

In my app I made it easy to re-connect using NFC, so it’s only one extra tap to work on. (will blog about this Bluetooth App soon)

OS 10.3.1 and ‘TabbedPane-inside-Sheet’ issue

One of my apps (SerCar10 for ServiceCars) is a complex app supporting different users with different roles like office, sales, driver, dispatcher, …

My first idea was to develop some small apps and “connect” those feature-apps using InvokationFramework and CARDs. The integration I needed was too deep, so I had to put it all into one big app where UI will look different for different roles: a service car driver can only select parts from a list and add to the work order, where from office this list can be managed (add, edit, delete).

Finally I separated modules using their own TabbedPane to make it easy to navigate. This means some users with some roles must get access to more then one module and so I created a hierarchical TabbedPane, which is no default Cascades UI Control. But there are Sheets to separate a sub-workflow and Sheets can have a Pane as root element: doesn’t matter if it’s a NavigationPane or a TabbedPane. So I’m using Sheets to separate the modules.

Here’s a short sample so you can understand better:

The usual root TabbedPane will push another TabbePane on top, which means: a Sheet was opened with another TabbedPane on board. In this case the ‘Data’ Tab from root TabbedPane opens another TabbedPane on top from where office employee can edit some data.


This (Sub) TabbedPane works same way as the root TabbedPane. Here you get acces to lists of Units, Groups, Parts, Contacts with CRUD functionality. Because it’s a Sheet you can peek back but not close the Sheet by swiping.

02_data_ tabbed_pane

Normaly there would be buttons like OK and Cancel to exit a Sheet. For my (sub) TabbedPanes I’m using a special (Back) Tab at the bottom to go back explicitely.


Going back the Sheet and all content was destroyed to free up memory.

So far so good. Works on 10.2 and 10.3.0 but crashed the app on 10.3.1

Took some time to figure out what happened and to find a workaround. The TabbedPane was created together with the Sheet and this won’t work anymore. Using an empty Page instead and creating the (Sub) TabbedPane with a delay of 30 ms makes it run on 10.3.1 🙂

Sheet {
    id: dataEntrySheet
    onClosed: {
        // ....
    attachedObjects: [
        DataEntryTabbedPane {
            id: tabbedPane
        QTimer {
            id: startupDelayedTimer
            interval: 30
            singleShot: true
            onTimeout: {
    Page {
        // DUMMY

    onCreationCompleted: {

The good thing: there’s no flicker or so while creating the TabbedPane.

again: not a common use-case but perhaps you run into similar situations and using a QTimer to create Controls async can help.

UX on Classic

I tested my apps on BlackBerry Classic and found some layouts looking ugly while navigating using the TrackPad. This was expected because now there’s a special highlight color for List Rows or UI Controls with focus from TrackPad and if you’re already using colored text or images the highlighting must be adjusted.

Also found some workflows with different behaviour between Passport and Classic – esp. if using Shortcuts and KeyListener.

I’ll report about my experiences and solutions in detail to help you to provide smooth workflows.

The great thing: Cascades offers all you need from new OS 10.3.1 API to provide great UX on all devices 🙂

Please stay tuned for the next parts coming soon.

Over all it’s really fun to navigate through BlackBerry10 apps from TrackPad. This enables me to design fast and smooth workflows in business apps which will make users more productive.

You followed my article series HowTo Support BlackBerry Passport as a native Cascades Developer ?

You learned all about the new things:

  • Signature Action
  • Compact ActionBar
  • Branding Color
  • Switching Themes
  • Gestures on touch enabled Keyboard
  • More space on Passport’s big screen

I finally created three short Videos to demo how this is looking and working in a real-life application.

ekkes tea Timer

A little Utility APP – only one Screen, some animations and settings.

ekkes EXPRESS charts

ekkes EXPRESS charts allow to easy create a business chart diagram on-the-fly and to save this as an Image.

Primary use-case of this app is to be integrated like a PlugIn into BlackBerry EXPRESS – a cool app to create nice looking presentations directly from your phone.

Conference2Go IoT Conference

This Video demonstrates what it means to have such a big screen from Passport together with touch enabled keyboard.

Support BlackBerry Passport and OS 10.3

As you can see OS 10.3 gives your apps a new fresh UI and allows easier navigation through complex apps.

I really recommend not simply to update your app – you have to rethink UI and Navigation !

Have Fun with 10.3.

Any questions ? Please public at Cascades Forums or via Twitter.


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’:


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.


  • 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.

Welcome to part eight 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

Design Units

As a long time Cascades Developer you always have used Pixels to define sizes, margins or paddings – so the challenge is to rethink and use ‘du’.

A ‘Design Unit’ always has the same physical size on all devices, which means for higher density you need more pixel to fill the same space. Devices are grouped into ‘buckets’ by density:

  • 295 ppi (Z3, Z30): 8 buckets
  • 330 ppi (Q5, Q10): 9 buckets
  • 358 ppi (Z10): 10 buckets
  • 453 ppi (Passport): 12 buckets

8 buckets means you need 8 Pixel for each Design Unit (du) on a Z30, but 12 Pixel on a Passport. Now it’s easy to understand, why a Padding value of 48 Pixels looks different on the devices: 48 Pixel on Z30 are 6 du (48 / 8), but only 4 du (48 / 12) on a Passport.

Let’s take a look at the screen sizes in Design Units:

  • Z3/Z30: 90×160 du
  • Q5/Q10: 80×80 du
  • Z10: 76.8×128 du
  • Passport: 120×120 du

Most of us started development for Z10, so as a first step try to get the ‘du’ dividing the Pixel by 10: an Icon for ActionBars now is 8×8 du instead of 81×81 Pixel before on a Z10, but 64×64 Pixel on a Z30, 72×72 Pixel on a Q5/Q10 and 96×96 Pixel on a Passport. If you don’t want to design all sizes, provide the one with the highest density: 96×96 Pixel or to be prepared for more future devices with even higher density use 16 buckets ( 128×128 Pixel)

Images in ActionBar, Tabs, menus

In part 6 we already discussed how Cascades is looking for Images from density-dependent folders like 10ppd, 12ppd, … These folders are important if you need images for ActionBar, Tabs, Menus … where Images are only defined by their name.

Looking for an Image like ‘edit.png’ Cascades tries to find the Image from the folder bound to density:

  • Z3/Z30: 8ppd
  • Q5/Q10: 9ppd
  • Z10: 10ppd
  • Passport: 12ppd
  • <future>: 16ppd

For Images not found, Cascades is looking if there’s an Image with higher density and scales it down. If there’s only an Image found with lower density or from root, this one is used without upscaling !

Content – Images (ImageView)

What about your Images defined by ImageView ?

If you only provide the ImageSource, Cascades will try to find the right one – which means looking into your ppd folder and use the Image found without scaling. If not found, Cascades takes a look at ppd folders with higher density: if the Image was found, Cascades will scale it down. If not found Cascades takes a look at ppd folders with lower density: if found the Image will be scaled up ! This is different from ActionBar / Tab / Menu – Images where Cascades only scales down !

Attention: If the Image was found in the root folder, Cascades will use it without any scaling ! This can cause Images to become larger or smaller as expected. It’s always a golden rule: place all your Images into ppd folders ! Only Images used with fixed Pixel Size can remain in the root.

If you have to leave your Images in assets root, there’s a workaround. To guarantee same size on all devices set minWidth, maxWidth and minHeight,maxHeight for ImageView – of course using ‘du’. The example above (240×240 Pixel on passport) can be defined as an ImageView with 20 du width / height. Now Cascades knows: this Image should be 240×240 Pixel on Passport and 160×160 Pixel on Z30. Same story again: find the Image from 12ppd folder only Cascades will scale down to 160×160 Pixel on Z30 – finding the Image only as 160×160 inside 8ppd, Cascades will scale up to 240×240 Pixel on Passport ! Don’t forget to set the ScalingMethod !

Sounds confusing ? Only the first time !

Sample Project at Github

To understand it better: here’s a Cascades Project at Github to play with 🙂

In my sample I’m using three Images:

  • Image ‘A’ placed into 8ppd, 9ppd, 10ppd and 12ppd as 20×20 du
  • Image ‘B’ the same but only placed into 8ppd
  • Image ‘C’ the same but only available from 12ppd

To see what happens if ‘B’ or ‘C’ are NOT inside ppd folders – only at root – I placed a renamed copy at assets/root and displayed it ‘as-is’ vs scaled using min/max width/height

Here’s the result from BlackBerry Passport (12ppd):


From ‘B’ in the middle you see 160×160 px are smaller then 20 du (240×240) if used unscaled from root.

… and here’s how it looks from Z30 (8ppd):


From ‘C’ in the middle you can see the too large image with 240×240 unscaled on Z30.

The ActionBar on Z30 is OK because ‘C’ was downscaled automatically – on Passport ‘B’ is too small because Cascades doesn’t upscale for ActionBar Images.

You still need some Images Device-specific for Absolute Layouts or fine-tunied backgrounds or special Covers ? Place them inside static assets folders like 1440×1440 for the BlackBerry Passport.

Have fun with BlackBerry Passport and 10.3

Welcome to part seven 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

Active Frames

You know if you’re switching from one App to another without closing the current App, the App will be minimized.

If you’re doing nothing Cascades will take a snapshot of your current screen and show this one minimized.

Of course it looks much better if you design a special screen and this is easy done by using a SceneCover. SceneCovers have special sizes and there are some recommended layouts like Header or Grid. Please take a look at Cascades documentation where you also will find the exact sizes.

BlackBerry Passport is the first device supporting two different Active Frames: a large one and a small one:

  • Large-sized Active Frame: 440×486 px
  • Small-sized Active Frame: 440×195 px


To support both sizes you have to use a MultiCover, where inside your MultiCover you can use:

  • Two SceneCovers
  • One SceneCover plus one ApplicationViewCover

Two SceneCovers allow you to design the large and small sized ActiveFrame by yourself or you’re only designing one size and let Cascades create the Cover using the (minimized) top-left part of your current Page.

Two SceneCovers:

import bb.cascades 1.3

MultiCover {
    id: multiCover

    SceneCover {
        id: bigCover
        MultiCover.level: CoverDetailLevel.High
        content: Container {
            // your layout
        function update() {
            // do your update stuff
    } // sceneCover HIGH
    SceneCover {
        id: smallCover
        MultiCover.level: CoverDetailLevel.Medium
        content: Container {
            // your layout
        function update() {
            // do your update stuff
    } // sceneCover MEDIUM

    function update() {

} //  multiCover

One SceneCover plus one ApplicationViewCover:

import bb.cascades 1.3

MultiCover {
    id: multiCover

    SceneCover {
        id: bigCover
        MultiCover.level: CoverDetailLevel.High
        content: Container {
            // your layout
        function update() {
            // do your update stuff
    } // sceneCover HIGH

    ApplicationViewCover {
        id: appViewCover
        MultiCover.level: CoverDetailLevel.Medium

    function update() {

} //  multiCover

CoverDetailLevel High or Medium decides which one will be used. The update() function is used to update the content dynamically – but this is the same as already known from 10.2

Perhaps you ask why does Passport support two different sized Active Frames ?

Screenshot CoverDetailLevel.High


As soon as there are more then 6 minimized Apps, the last ones will be smaller und use the layout fromCover with Screenshot CoverDetailLevel.Medium:


In this case the CoverDetailLevel.Medium was provided by ApplicationViewCover – something is cut at the right site and this minimized view will change if another Page is on top. So it will be better to design a second SceneCover in this case.

Next part of this series will tell you more about ‘du’ – Design units and designing layouts for 10.3 and BlackBerry Passport.

Have fun.

Welcome to part six 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

Application Icons

In 10.2 you only needed one application Icon of 114×114 px – now with 10.3 and supporting more devices with high density and larger screens, you need some more:

  • Z10: 110×110 px
  • Z3 / Z30: 96×96 px
  • Q5 / Q10: 90×90 px
  • Passport: 144×144 px

Your application will still work using your old 114×114 px application icon, but it’s recommended to provide 4 Icons.

To add the Icons copy them into your project folder as you did with the app Icon before. Please open your bar-descriptor.xml, go to ‘Application’ tab and add the Icons.


Cascades will select the right one. Find more on Application Icons from Cascades docs here.

In-App Icons

In 10.2 we used 81×81 px Icons for Tabs and ActionItems in ActionBar and 61×61 px Icons in components.

You can still run your App with these Icons, but because of higher density some Pages won’t look good on BlackBerry Passport. (Images too small)

I already described that you can use a workaround and scale the Icons by yourself: check if device is Passport and set minWidth, maxWidth, minHeight, maxHeight to a higher value and let Cascades upscale the image:

ImageView {
    property int imageSize: app.isPassport()?92:61
    imageSource: "asset:///images/server_color.png"
    minWidth: imageSize
    maxWidth: imageSize
    minHeight: imageSize
    maxHeight: imageSize
    scalingMethod: ScalingMethod.AspectFit
    verticalAlignment: VerticalAlignment.Top
    horizontalAlignment: HorizontalAlignment.Center

This works as a starting point but isn’t optimal. To be prepared for the future and to provide a great looking UI you have to design Icons in different sizes.

Cascades groups Devices by density (ppi – pixel per inch) and instead of Pixel we’re now using ‘du’ Design Units, where one ‘du’ always has the same size on a screen: 10 pixels on a Z10 are the same as 8 pixels on a Z30, 9 pixels on a Q10 or 12 pixels on BlackBerry Passport. The grouping is done by ‘ppd’ (Pixel per Design Unit), so we have these groups:

  • 10 ppd: Z10 (768×1280 px, 356 ppi)
  • 8 ppd: Z3 / Z30 (720×1280 px, 295 ppi)
  • 9 ppd: Q5/Q10 (720×720 px, 330 ppi)
  • 12 ppd: Passport (1440×1440 px, 453 ppi)

Here are the recommended sizes for 10.3:

  • ActionItems, Menus, Tabs: 8×8 du
  • Components: 7×7 du
  • Small Buttons: 6×6 du

Let’s take a look at the ActionItems. What does 8×8 mean in reality – what sizes must your Icons have ?

  • 10 ppd (Z10): 80×80 px
  • 8 ppd (Z3 / Z30): 64×64 px
  • 9 ppd (Q5 / Q10): 72×72 px
  • 12 ppd (Passport): 96×96 px

BlackBerry 10 App development started with Z10 and 81×81 pixels. Now the Z10 belongs to the 10 ppd buckets where 8×8 du is the same as 80×80 px because 1 du == 10 px.

Please take a look at the excellent documentation from Cascades to learn more.

Supporting different resolution / density is a pain

… but you’re not alone 😉

If all this density and screen size – stuff is new to you, it’s a good idea to read about it from other platforms, too.


Developing for Android ? Then you have to deal with dp (Density Pixel) and much more different sized devices out there.

Here’s the Android documentation HowTo support multiple screen sizes


Android also groups devices per density: ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi. All is measured in ‘dp’ (density pixel) which is similar to ‘du’ design units.


iOS developers  also started easy supporting only one screen size and density. Then it goes on larger devices and also higher density (Retina displays).

There’s one difference: iOS developers started using ‘points’ and not ‘pixel’. At the beginning with first iPhone one point == one pixel on a 320×480 px screen.

For the higher resolution devices like iPhone 6 there’s a scale-factor of 2 which means 375 × 667 points were rendered as 750 x 1334 px to fit on a 326 ppi screen. With iPhone 6+ it’s even more complicated: now the scale-factor is 3: iPhone 6+ has 375 × 667 points, rendered as 1242 × 2208 px where the device in reality has 1080 × 1920 px, so there’s a downsampling / 1.15. Here’s a site from Paint Code explaining this in detail.

Perhaps now you understand why there are x1, x2, x3 Icon sets available for iOS developers. Great looking Icons in x1, x2 and now x3 are available from Glyphish – some are also looking great on BlackBerry 10.

BlackBerry 10.3

There’s a reason why I wrote about Android and iOS: you can see it’s a common challenge to support devices of different physical sizes and different density. Now with BlackBerry 10.3 and the BlackBerry Passport we also must prepare our apps and this means:

  • more work
  • perhaps more costs to design Icons, Images, Backgrounds
  • restructuring of layouts
  • and much more.

Because of this the first three parts of this series was HowTo go on with 10.2 as a first step to get some more time to port your apps to 10.3 carefully without pressure. Comparing Cascades with other platforms the Cascades team did a great job. I will write some more blogs next weeks to provide tips and tricks HowTo port your apps.

The real hard work is porting complex apps from 10.2 to 10.3 – creating a new 10.3 app from scratch is much more easier.

Let’s go on with the ActionItem / Menu / Tab – Icons. All Icons will be stored in special folders:

  • assets/8ppd
  • assets/9ppd
  • assets/10ppd
  • assets/12ppd
  • assets/16ppd

Inside these folders it’s the same as with static assets: use exactly same subfolders and names as before. Of course it may take some time to get all your Icons designed for all sizes. Don’t worry – you can do your work step-by-step. Cascades uses a fallback strategy to find an Icon not provided in optimal size. Perhaps you’re wondering about the 16ppd folder ? There’s no device currently with such a high density but in Cascades documentations sometimes 16ppd was mentioned. So it may be a good idea to also provide Icons for 16ppd – it’s less work do design them now then in a year or so. (16 ppd means 128×128 px)

1st step: move all from root to assets/10ppd

All your Icons were designed for Z10 originally – so you should move them to the 10ppd folder. It’s important to move them out of the assets root folder – this will make it easier for Cascades to pick the right one. As soon as you start using ppd folders all Icons inside a ppd folder should not be in assets root !

In my app only some special background images are now inside assets/images and also inside device-specific folders like 1440×1440 or 720×720.

2nd step: create assets/12ppd folder

We want to start supporting BlackBerry Passport because it’s the first new Device – so we need Icons for 12 ppd.

3rd step: copy Icons from Cascades Icon Set

If you’re using Icons provided by Cascades as Icon Set for BlackBerry 10, please download the new one for 10.3 from here.


You’ll notice that all Icons are now 96×96 px instead of 81×81 from 10.2. 96×96 fits perfect for BlackBerry Passport, so copy the ones you’re using into assets/12ppd/images.

Now you have a good starting point and can add more ppd-specific Icons when they’re ready.

How does Cascades select Icons

With all these folders it’s a good idea to look behind the scenes and to know how Cascades will pick the right Icon. There are some rules you should know:

  • Cascades downscales Icons from higher density
  • Cascades can use, but doesn’t upscale Icons from lower density

Having all Icons in assets/10ppd and some Icons also in assets/12ppd: what happens running the App on BlackBerry Passport ?

At first Cascades looks into the assets/12ppd/images folder and picks the Icon if found.

As next Cascades checks if there are Icons with a higher density – so if you placed the Icon with 128×128 px into assets/16ppd/images Cascades will take this one and downscale to 96×96 px automatically.

If nothing found with higher density, Cascades will go down one step and finds the Icon inside assets/10ppd/images. This is lower density so the Icon will be used unchanged as 81×81.

Knowing that Cascades downscales it makes sense to start with one Icon in highest density and to test if it looks good on all devices. If all is Ok you don’t have to design all the other ones. For new Apps running under 10.3 this will be the way-to-go. To port Apps from 10.2 take the steps from above.

Icons from C++ missing ?

All I described above works perfect from QML with images referencing assets/images.

If you set Icons from C++ you have to change your code !

Probably there are some use-cases where you assigned Icons similar to this:

QString imageSource = QDir::currentPath() + "/app/native/assets/images/titlebar/";
imageSource += "wifi.png";

This works well with static assets folders used before. Static assets are merged at startup, so th assets are available from root.

Now having more then one folder with same images this won’t work anymore.

There’s a new method ‘resolveAssetPath(Url)‘ at Application class for 10.3:

QString imageSource = "images/titlebar/";
imageSource += "wifi.png";

While developing and running your app on Device from your Momentics IDE take a look at the Console where Cascades logs some info about images and pathes.

No best path found for images/titlebar/wifi.png , will use fallback path
AssetPathResolver::resolveAssetPath: Did not find any asset for basePath= /apps/xxx/native/assets/ ,
filePath= 10ppd/images/titlebar/wifi.png

In this case Cascades is looking inside default 12ppd for the image and didn’t found one. So uses fallback path and found Icon from 10ppd path.

Next parts will be on ActiveFrames and layouting using ‘du’ (Design Units)

stay tuned …