Porting Adobe AIR BlackBerry PlayBook Applications to BlackBerry 10

Adobe AIR Development

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:

Device Resolution Ratio
BlackBerry 10 Dev Alpha 768×1280 -
First full touch BlackBerry 10 device 768×1280 -
Future full touch BlackBerry 10 devices 720×1280 16:9
Physical keyboard BlackBerry 10 devices 720×720 1:1

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.

BlackBerry Tablet OS SDK 1.0 BlackBerry Tablet OS SDK 2.X and BlackBerry 10 SDK
qnx.ui.buttons qnx.fuse.ui.buttons
qnx.ui.core qnx.fuse.ui.core
qnx.ui.display qnx.fuse.ui.display
qnx.ui.events qnx.fuse.ui.events
qnx.ui.geom qnx.fuse.ui.geom
qnx.ui.listClasses qnx.fuse.ui.listClasses
qnx.ui.media qnx.fuse.ui.media
qnx.ui.picker qnx.fuse.ui.picker
qnx.ui.progress qnx.fuse.ui.progress
qnx.ui.skins qnx.fuse.ui.skins
qnx.ui.slider qnx.fuse.ui.slider
qnx.ui.text qnx.fuse.ui.text
qnx.ui.text.textInputIMF qnx.fuse.ui.text.TextInput
qnx.ui.listClasses.scrollPane qnx.fuse.ui.core.Container

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.

Platform Icon Size (pixels)
BlackBerry PlayBook OS 86×86
BlackBerry 10 OS 114×114

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.

About Dustin M.

Dustin Malik began his interactive development career at a small mom and pop ISP in Hamilton, Ontario back in 2000 where he was introduced to Flash 5. He continued to pursue his passion for development and caught his break in 2004 when he was hired as a Flash Developer at Research In Motion. Over the next 6 years Dustin contributed to over 300 projects, and in 2010 he took on leadership of the Flash team. He spent the next 2 years managing and mentoring an incredibly talented group with skills in programming, motion graphics, video, audio, art, and 3D. Dustin in now part of the BlackBerry Developer Relations team and does his part to inspire and support developers who are writing apps in HTML5/AIR, and drive their success in BlackBerry App World.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus