Bringing Cascades BlackBerry Z10 apps to the BlackBerry Q10

Native SDK Development

Some of us like the big screen and some love the physical keyboard. The BlackBerry 10 platform embraces both form factors. As developers, we have a few more things to consider when targeting different form factors. The aim should be to create the best app for each type of device.

The BlackBerry 10 Native Beta SDK contains both the BlackBerry Z10 and the BlackBerry Q10 simulators and you can download them here.

In this article, we’ll describe what application developers must consider when bringing their BlackBerry Z10 applications to the BlackBerry Q10. The following topics will be discussed:

  1. Differences in form factor and their impact
  2. Strategy to leverage the Cascades framework and tooling to develop for both form factors effectively
  3. How to deploy to BlackBerry World and what to consider

These topics are discussed in much more detail in the online documents and can be found here.

Differences in form factor and their impact

With just a bit of planning and foresight, developers can leverage the tooling, the framework and the platform to easily support both form factors.

What are some of the options to consider? Before moving forward, we need to first understand the differences.

Hardware Differences:

BlackBerry Z10

  • Display screen size: 1280 x 768 pixels
  • Aspect ratio: 15:9 portrait view
  • Pixels per inch: 356

BlackBerry Q10:

  • Display screen size: 720 x 720 pixels
  • 1:1 aspect ratio
  • 330 PPI

There are certain things that the Cascades framework will provide when developing for both form factors.

Items handled by Cascades:

  • Core component scaling (including the action items, action bar and menus)
  • Asset scaling (see section 2.4 for more details)
  • Dock and Stack Layouts
  • Theme switching (bright and light)
  • Alphabetic scroll bar
  • Non-sticky title
  • Navigation shortcuts
  • Keyboard over shortcut API

As mentioned before, the framework will take the app a long way towards the BlackBerry Q10 form factor, but it won’t handle everything. In particular, developers should consider the following items.

Items handled by the apps:

  • Addition/removal of static title bars
  • Simplification of title bars or smaller assets
  • Custom component scaling
  • Background bitmaps
  • Absolute layouts (If you use them, you have work to do here)
  • Selection of theme
  • App specific shortcuts
  • Re-layout of view (in some cases you need to re-design the layout for the best User Experience on a smaller screen)

More information on screen size implications can be found here.

Screen Theme (Bright vs. Dark and what it means)

By default the BlackBerry Z10 Cascades applications uses the bright theme. The BlackBerry Q10 device on the other hand, prefers the dark theme due to the OLED screen. The framework will automatically select the theme for each device. However, if you have static assets, you’ll need to provide the dark theme alternatives using the static asset selector (see section 2.3) or ensure that your assets convert well to the dark theme. You should also reference the Designing for OLED displays document in the UX guidelines.

EXTRA BlackBerry Q10 only: Keyboard Shortcuts and Key Listeners

Physical keyboard BlackBerry users are used to a certain standard of having convenient shortcuts provided.

There are certain system shortcuts that come pre-built in the framework and developers can attach these to their applications.

Developers are also free to create their own shortcuts that make sense for their particular application.

All about Keyboard Shortcuts and a sample can be found here.

Listeners can also be used to listen to any key pressed on the keyboard. More information on this can be found here.

Strategy to leverage the Cascades framework and tooling to develop for both form factors effectively

Since the full touch device is the first launched device, most developers will be bringing their full touch applications to the physical keyboard devices.

Say you have your full touch BlackBerry 10 application developed in Cascades and choose to ignore the physical keyboard device in your development. What would that mean?

The Cascades framework was designed with both form factors in mind, so most likely your application will more or less run. The Cascades framework will layout the controls for you, the graphics will scale accordingly.

However, such an app will not provide the best user experience on the QWERTY form factor.

Since we strive for the best overall user experience, as developers we need to follow some best practices.

What are some of the key points to consider when developing?

  1. Embrace relative layouts so that the framework can help you with arranging your components relative to the boundary of the screen and regardless of the device screen size.
  2. Avoid on-screen clutter by using margins and space quotas. By using space quotas effectively you can designate the proportion of space that each component uses relative to another. This creates a layout that adapts to a different screen resolution.
  3. Leverage the Momentics IDE asset selector feature to dynamically select different assets for different screen resolutions. This includes both QML files and images. This approach will allow you to create a single binary that dynamically adapts to different screen sizes by choosing the correct asset. You can select assets based on different screen size as well as a different theme!
  4. For more info on this approach see: Assets/Tooling/Project setup
  5. Create images that scale uniformly. The technique of nine-slicing lets you create such images. This method will ensure that should you re-use the same image on different screen resolutions, these images will scale properly and without distortions.
  6. In some cases, should you choose to create a separate binary for the BlackBerry Q10 device you can do so. In this case, you can specify the necessary layouts, images and assets only for that device. Should you choose to do so, you’d be maintaining two separate builds and must deploy them separately (see Section #3).

Here is a graphical summary of the points discussed:

Bonus: Please be sure to check that your loading screen scales properly. If it does not, you’ll need to provide a scalable or different image.

Deploying to BlackBerry World

Deploying to BlackBerry World for the BlackBerry Q10 is quite easy. Here are the steps you’ll need to follow:

  1. Log into vendor portal
  2. Go to Manage products
  3. Add a new release
  4. Set ‘supported devices’ to BlackBerry Q10. If the .bar supports more you can do that as well, or also have different file bundles for different devices

Regarding item #4. Here is the guiding principle.

If your app contains one binary (BAR) file for both the BlackBerry Q10 and BlackBerry Z10 and you followed the practices above and selected to support both devices with one build, then all you need to do is have your application support both devices in the table below.

If however, you’ve created a separate new build that’s targeting the BlackBerry Q10 only. You’ll need to make sure that the new BAR file you’ve submitted only selects the BlackBerry Q10 device. If you have any questions, let us know in the comments!

Join the conversation

Show comments Hide comments
+ -