Porting Adobe AIR BlackBerry PlayBook Applications to BlackBerry 10

Speaking of porting, don’t forget our 36 hour The BlackBerry Got Game Port-a-Thon  starts tomorrow! Check out this post for details and how you can get some awesome rewards for porting apps to BlackBerry® 10. – Ed.

The BlackBerry® 10 SDK for Adobe® AIR® has been created to make it easier for you to create Adobe AIR applications on multiple screen sizes while keeping mobile performance in mind. If you’re a developer that has one or more of the 6000+ Adobe AIR applications on the BlackBerry® PlayBook™ tablet, this article will help point you in the right direction for getting your BlackBerry PlayBook tablet application updated for BlackBerry 10. This blog post will cover:

• Getting started
• User interface guidelines
• Support for multiple screen sizes
• Fuse UI
• Layouts
• Application icon size
• Samples
• Help

Getting Started

The first thing you’re going to want to do is download and install the latest versions of the BlackBerry 10 Beta SDK for Adobe AIR 3.0 from this location. This link also provides steps on how to download and install the latest version of the BlackBerry 10 Dev Alpha Simulator, which you’ll also need if you haven’t attended a BlackBerry Jam event and got yourself a Dev Alpha unit. To get your development environment set up, you can follow one of the many guides located here. If you are porting content that was originally created using Adobe® Flash® Professional, there is a guide you can follow here.

User interface guidelines

The user experience for BlackBerry 10 has changed significantly from the experience on the BlackBerry PlayBook tablet. Creating a cinematic experience, having fluid workflows, and emphasizing high performance are just some of the key principles that BlackBerry 10 applications should follow. The BlackBerry 10 UI Guidelines cover these principles and specify design, interaction, and style guidelines for your app.

Support for multiple screen sizes

Your BlackBerry 10 application should support the different screen sizes so that it looks consistent across devices. You specify the splash screen in the BAR application descriptor file and you can add them for each supported screen resolution. The BlackBerry 10 OS chooses the correct icon and splash screen to use based on the device that the application is running on.

Currently, the BlackBerry 10 OS supports the following screen sizes:

To support multiple screens in your BlackBerry 10 application, modify the bar-descriptor file.

<splashScreens>
   <image>splash-1024x600.jpg</image>
   <image>splash-600x1024.jpg</image>
   <image>splash-1280x768.jpg</image>
   <image>splash-768x1280.jpg</image>  
</splashScreens>

Fuse UI

In BlackBerry Tablet OS SDK for Adobe AIR 2.0, the qnx.fuse.ui API was introduced as a replacement for the qnx.ui API used in version 1.0. While the qnx.ui was deprecated, it remained available to applications for the BlackBerry PlayBook OS.

In the BlackBerry 10 SDK for Adobe AIR, the qnx.ui API has been removed, and you must update up your application to use the qnx.fuse.ui API.

In order to use the qnx.fuse.ui API in your application, you must add the QNXSkins AIR Native Extension to your application. For more information, see Adobe AIR native extensions.

Layouts

In BlackBerry Tablet OS SDK for Adobe AIR 2.0, the container methodology (highlighted in qnx.ui.core) was deprecated in favor of using layouts to organize your UI components.

In the BlackBerry 10 SDK for Adobe AIR, the container concept has been removed, and you must update your application to use the layout method.

You can use the Container class to organize your application’s UI controls. By using a layout, a Container manages the positioning and size of any UI component that it contains. Any controls that are added to a container are known as children. A container can also contain other containers, called sub-containers.

Below a container is created and a rowLayout is assigned to it:

//Create container
container = new Container();
container.scrollDirection = ScrollDirection.VERTICAL;
container.height = stage.stageHeight;
container.width = stage.stageWidth;
//Create layout
var row:RowLayout = new RowLayout();
container.layout = row;
row.spacing = 5;
row.padding = 5;

Application icon size

When creating new application icons, make sure that your application icon is the appropriate size for the application platform.

Samples

There are some BlackBerry 10 Adobe AIR samples that you can download the source for that will help you get started. You can find a description and the download location here. If you’re new, I recommend starting with the “Starship Settings” application and then moving on to the “Weather guesser” application for some more advanced layout techniques.

Help

If you need help, here is a list of resources that you can reference:

The Adobe AIR Development BlackBerry Support Community Forum
BlackBerry 10 SDK for Adobe AIR API Reference (beta)
The BlackBerry SDK for Adobe AIR Documentation
The Adobe AIR Development BlackBerry Resource Center

If all else fails, you can tweet me @dustinmalik or tweet @BlackBerryDev.

Related Posts