Channels ▼


Porting BlackBerry Z10 Apps to the Q10

If you need to change your layout based on the layouts of other components, you'll want to use a LayoutUpdateHandler to get that information. Check out BlackBerry's LayoutUpdateHandler reference page for an example.

Physical Keyboard

More Insights

White Papers

More >>


More >>


More >>

With the keyboard always being present on the Q10, you can expect users to be pressing keys at any time and expecting a reaction. BlackBerry power users will likely expect that the T and B keys, respectively, bring the viewport to the top and bottom of a scrollable area. Those two shortcuts are part of a list of shortcuts called System shortcuts. Use the Shortcut component directly to handle other keypresses. For example, to respond to the Alt + B combination with an error message, use code such as this:

// main.qml
import bb.cascades 1.0
import com.example.MyApplication 1.0

Page {
    attachedObjects: MyViewModel {
        id: myViewModel

    shortcuts: Shortcut {
        key: "Alt+B"
        onTriggered: myViewModel.doSomethingThatCausesAnError()

    Container {
        ImageView {
            imageSource: myViewModel.hasError ? 
                "asset:///images/error.png" : "asset:///images/fine.png"
            layoutProperties: StackLayoutProperties {
                // make imageView to fill all available height
                spaceQuota: 1.0
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            scalingMethod: ScalingMethod.AspectFit
            gestureHandlers: TapHandler {
                onTapped: myViewModel.doSomethingThatCausesAnError();

Now whenever the Alt and B keys are pressed in that page, the error will be generated. Because of subtleties too detailed to explain here, it's important to read the documentation thoroughly before using shortcuts and to understand how shortcut events are propagated.

OLED Screen

The Q10 has an OLED screen, whereas the Z10 has an LCD screen. While the OLED screen has better contrast and clarity, it consumes more power when displaying light colors. Moreover, the brighter pixels burn down faster, thereby causing burn-in.

What can be done prevent this? Cascades has Bright and Dark themes you can control by setting the cascadesTheme node in your app's bar-descriptor.xml file:


If omitted, the platform will automatically select the Cascades dark theme when running on an OLED device, and the light theme for LCD screens. The drawback of letting the system choose is that it can cause undesirable effects if your designers haven't taken it into consideration when producing screens that define static color schemes: Buttons might all of a sudden change color. The static asset selector helps correct this by enabling you to provide assets for each theme, as shown in Figure 3.

Providing assets for each theme
Figure 3: Providing assets for each theme. (Source:

I also mentioned previously that the pixel density is different. On the Q10, it's 330 PPI versus. the Z10's 356 PPI, which will make things look slightly bigger because it's less dense. Designers, especially, need to be aware of this.

Finally, if you need to make decisions about UI based on the screen type dynamically, you can always query the DisplayInfo class for information on the kind of display technology the app is currently running on.


It's clear that porting apps from the Z10 to the Q10 requires some careful attention to detail due to the reduced screen size and the presence of a physical keyboard. However, I've found that by following the guidelines suggested here, problems that do arise can be made a lot easier to handle.

Daniel Rivera is a senior developer at Macadamian Technologies and has been working on apps for BlackBerry 10 and using Cascades for more than a year now.

Related Reading

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.