Everything You Need to Know About the BlackBerry Z30

Here’s Jorge Fernando Vazquez with everything you need to know to get your apps ready for the BlackBerry Z30 smartphone – Ed.

The new BlackBerry Z30 is a full touch-screen device that introduces some changes that you need to consider as a developer.

In this post, I will start by pointing out some of the differences between the BlackBerry Z10, BlackBerry Z30 and BlackBerry Q10 smartphones, and then I’ll show you how to make the porting process as easy as possible for each of our development platforms (Cascades, WebWorks, Adobe Air, and Android).

Know The Differences

As you can see, the BlackBerry Z30 display is larger and has a more narrow aspect ratio than the BlackBerry Z10, therefore, we need to be careful while designing our apps so that there are no cropped images, or overlapping components.

The camera features are the same across all three devices, so there is no need for adjustments there.

The BlackBerry Z30 comes with a more powerful processor than the BlackBerry Z10 or BlackBerry Q10, giving us higher graphics capabilities.

All other features are common across all three devices, the exception being that the BlackBerry Q10 has a physical keyboard and the others have a full touch screen.

The Porting Loop

To port your app over to the BlackBerry Z30, start with the BlackBerry Z10 implementation of your app and test it on the simulator or a device. The best case scenario is that your UI and images scale appropriately to the new screen size. In this case, you can probably get by with making only some small tweaks or optimizations to take advantage of the larger screen. Worst case scenario is that your UI doesn’t adjust to the new screen size,  and you will need to adjust the layouts and assets. Once all modifications are complete, retest the app on the device or simulator. Repeat as necessary until you are ready to deploy.

Cascades

Now we’ll take a look at some of the basic considerations you need to take when using Cascades, in regards to layouts and assets.

Regarding layouts, there are three major tools that a developer can use to make the UI adapt easily:

• Relative layouts: The framework arranges the components relative to the boundaries of the screen.
• Margins and padding: Provides a space, or buffer between child components and their parent containers.
• Space quota: Designates a proportion of the available space to a component.

The images above show the same QML file being displayed on different devices and orientations.From left to right, an all-touch device in portrait, an all-touch device in landscape, and a device with a physical keyboard.. By using relative layouts with margins and space quotas, you can see how the UI is able to adjust appropriately for each screen size.

Images are the other major factor to have in mind while adapting from one screen size to another

• If using generic images, make sure they scale uniformly, so when a new form factor is introduced, the images can adapt properly.
• If you need assets designed specifically for a particular resolution (or a theme), use the static asset selector. When your app is launched, the asset selector looks for assets designed specifically for that device. If it doesn’t find any, the default set of assets is used. Make sure you always have a set of default assets so that your app is compatible with future form factors. For more information on this, see Using the static asset selector.

The following image represents a basic example of how to use the assets selector. The project contains:

• A single icon which is used for all devices.
• Splash screens, one for  720×720 devices,one for 720×1280 devices, and a default version at the root of the assets folder. The assets in the resolution subfolders override the default version.
• A .qml file called SecondPage.qml for each different resolution.
• A default main.qml file that’s used for all resolutions.

For further information, please visit:

• http://developer.blackberry.com/native/documentation/cascades/dev/bb10_devices/index.html
• http://developer.blackberry.com/native/documentation/cascades/best_practices/resolution/index.html

The BlackBerry Z30 comes with version 10.2 of the BlackBerry 10 OS, so keep an eye out for some of these new features:

• Grid layout: Place components on a simple grid.
• Headless Apps: Solution for background processes. Register a service with triggers, and the OS will invoke the app in response to them.
• Custom Fonts: Import your own fonts into your app.
• Margins and Padding: Ability to use Small / Medium / Large that will respect proportions across devices.
• For details on timing and the full listing of upcoming APIs, visit:
  • https://developer.blackberry.com/cascades/download/roadmap/[WU1]
  • https://developer.blackberry.com/native/download/roadmap/

WebWorks

There are a series of recommendations that should be taken into account while working on WebWorks, not only while porting, but at all stages of development. These will help you when you need to make future modifications.

• Adhere to CSS Best practices:
  • http://developer.blackberry.com/html5/documentation/css_best_practices.html
  • Use templates when needed for different screen sizes.
  • Use the Web Inspector to analyze, optimize and reorganize your layouts:
    • Try using Stack or Flexible layouts as much as possible, so that the framework can control the positioning of the element in relation to the boundaries.
    • Pay attention to background and full screen images, and rethink their usage.
    • Make UI components semi-transparent if they overlap with critical content.
    • Adapt the color scheme.

As in Cascades, there are some upcoming features in 10.2, the major one being the Cordova Alignment. For details on timing and the full listing of upcoming APIs, visit https://developer.blackberry.com/html5/download/roadmap/.

Adobe Air

There is a small series of recommendations to be done while working on Air that all developers should pay attention to:

• Use Container and Layouts to organize and arrange components.
  • http://developer.blackberry.com/air/documentation/bb10/organizing_ui_containers_layouts.html
  • Pay attention to background and full screen images, and rethink their usage.
    • When it comes to splash images, remember you can use the bar-descriptor.xml file to dynamically choose one:

              <splashScreens>                        <image>splash-1280x768.jpg</image>                        <image>splash-1024x760.jpg</image>                        <image>splash-720x720.jpg</image>                </splashScreens>

• Make UI components semi-transparent if they overlap with critical content.
• Make good use of the stage.stageWidth and stage.stageHeight properties.
• Test your app, and redesign or reorganize when required:
  • http://developer.blackberry.com/air/documentation/bb10/testing_air_overview_2010848_11.html
  • For additional information you can visit:
    • http://www.adobe.com/devnet/air/articles/multiple-screen-sizes.html

In 10.2 the major update for Adobe Air is the introduction of the 3.5 runtime, which is now available in the current 10.2 SDK beta: https://developer.blackberry.com/air/download/. For more details on timing and the full listing of upcoming APIs, visit: https://developer.blackberry.com/air/download/roadmap/

Android

The Android platform already has support for different screen resolutions, so we should take advantage of that as much as possible. The general recommendations are to:

• Use resolution specific folders for resources
  • Android supports different folders for different resolutions, similar to Cascades. Make use of this.