Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

by BlackBerry Development Advisor (Retired) on ‎07-17-2012 04:25 PM - edited on ‎06-04-2013 03:40 PM by BlackBerry Development Advisor (11,174 Views)

:You have an application or a game that you created in Adobe® Flash® Professional and wanted to port it into a BlackBerry® 10 AIR application, this guide will help you get there. Note: Only applications built with AS3 will function correctly.

 

Outline
1. Download and install the latest version of the BlackBerry® 10 SDK for Adobe® AIR®
2. Register for signing keys
3. Create a Developer Certificate
4. Set the stage size

5. Add BlackBerry SDK for Adobe AIR libraries (optional)
6. Publish your swf file in Adobe Flash Professional
7. Create an icon
8. Set up your bar descriptor xml file
9. Set up your project application xml file
10. Download and install the BlackBerry graphical aid
11. Run the configuration wizard
12. Build your .bar file
13. Install and test your application
Conclusion

 

Step 1: Download and install the latest version of the BlackBerry 10 SDK for Adobe AIR

For the purposes of the tutorial at the time of writing you must download the BlackBerry 10 SDK for Adobe AIR  located here -https://developer.blackberry.com/air/download/

Once downloaded, install the SDK by following the setup wizard.

 

Step 2: Register for signing keys

If you have signing keys and a developer certificate already you can skip to step 4. If you forgot or need signing keys please visit this site. There is a self-help walkthrough on the site and after you register you will receive your keys by email within 2 hours.

 

Step 3: Create a Developer Certificate

You will need to create a developer certificate to sign your URL launcher. The steps outlined here will show you how to create a developer certificate.

 

Step 4: Set the stage size

The screen resolution on the BlackBerry® Z10 is 768x1280. You will need to guarantee that your stage size is set to the proper resolution for an optimal experience.

 properties

You can also target the BlackBerry Q10 by setting your resolution to 720x720. Going forward BlackBerry will be standardizing all device aspect ratios to 16:9 (720x1280) and 1:1 (720x720). Read more about device resolutions in this blog post.

 

Step 5: Add BlackBerry SDK for Adobe AIR libraries (optional)

If you would like to utilize BlackBerry specific API’s for use in your AIR application you can add the BlackBerry SDK for Adobe AIR libraries to your project. Follow these steps:

  1. Open Publish Settings by going to File -> Publish Settings
  2. Click on the wrench icon beside the Script dropdown to open ActionScript Settings
  3. Make sure you’re on the Library Path tab and click the +icon.png icon and then the flashIcon.png to add the following .swc files:

Name

Link type

Default Location (x64 windows)

blackberry.swc

Merged into code

C:\Program Files (x86)\Research In Motion\blackberry-tablet-sdk-3.2.0\frameworks\libs\blackberry

qnxmedia.swc

Merged into code

C:\Program Files (x86)\Research In Motion\blackberry-tablet-sdk-3.2.0\frameworks\libs\qnx

qnxui.swc

Merged into code

C:\Program Files (x86)\Research In Motion\blackberry-tablet-sdk-3.2.0\frameworks\libs\qnx

qnx-air.swc

External

C:\Program Files (x86)\Research In Motion\blackberry-tablet-sdk-3.2.0\frameworks\libs\air

 

4. If you would like to use any of the components in the SDK you’ll also need to add some ANE files. Make sure you’re on the Library Path tab and click the +icon.png icon and then the aneIcon.png to add the following .ane files:

Name

Default Location (x64 windows)

QNXDevice.ane

C:\Program Files (x86)\Research In Motion\blackberry-tablet-sdk-3.2.0\frameworks\libs\blackberry\ane

QNXSkins.ane

C:\Program Files (x86)\Research In Motion\blackberry-tablet-sdk-3.2.0\frameworks\libs\blackberry\ane


(For ANE files it is recommended that you copy them to your local project directory. The ANE files must be from the same version SDK as the .swc files)

 

5.Click OK on the ActionScript Settings screen and OK again on the Publish Settings screen. Here is what it looks like in my projects settings:

 

 settings.png

 

You can follow this same process to add more .swc or .ane files as needed.

 

Step 6: Publish your swf file in Adobe Flash Professional

Once you have optimized your project for the proper resolution publish your .swf file.

 

Step 7: Create an icon

Create an icon in your favorite graphic editing program. The dimensions are as follows:

 

114x114 for BlackBerry 10

 icon.png

 

Step 8: Set up your bar descriptor xml file (Full documentation)

Your bar descriptor xml file (bar-descriptor.xml) contains information relevant for AIR that your application uses. This file you are able to set permissions, who the author is, and what category your application should appear in BlackBerry® World™. Below is an example.

 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<qnx>
   <initialWindow>
      <systemChrome>none</systemChrome>
      <transparent>false</transparent>
   </initialWindow>
 <author>Dustin Malik</author>
 <icon>
      <image>icon.png</image>
   </icon>
</qnx>

 

 

Step 9: Set up your project application xml file

Your project application xml file (project-app.xml) contains information such as your applications name, version, id, and behavior. Below is an example.

 

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<application xmlns="http://ns.adobe.com/air/application/3.4">
<id>HelloWorld</id>
<filename>HelloWorld</filename>
<name>Hello World</name>
<versionNumber>1.0.0</versionNumber>
<initialWindow>
<content>helloWorld.swf</content>
<renderMode>auto</renderMode>
<aspectratio>portrait</aspectratio>
<autoOrients>false</autoOrients>
<fullScreen>true</fullScreen>
<visible>true</visible>
<maximizable>true</maximizable>
<minimizable>true</minimizable>
<resizable>true</resizable>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
</initialWindow>
<customUpdateUI>false</customUpdateUI>
<copyright>Dustin Malik</copyright>
<supportedProfiles>mobileDevice</supportedProfiles>
</application>

 

 

Step 10: Download and install the BlackBerry graphical aid

In this walkthrough we’ll be using the BlackBerry Graphical Aid Tool to publish an application. Download the latest version of the BlackBerry graphical aid tool here.

For more information on publishing with BlackBerry using Adobe® Flash Builder® or the command line you can visit this site.

 

Step 11: Run the configuration wizard

Run the configuration wizard by clicking on the Run Configuration Wizard button at the bottom of the Configuration tab. The only options we need to worry about for publishing an AIR application are the locations of the BlackBerry Tablet OS SDK Location from Step 1 and the Developer Certificate Location from Step 3. Once completed your configuration should look like the screenshot below (Note: that I do have a Debug Token Key installed that is not covered in the steps above):

 

config.png

 

Step 12: Build your .bar file

In the Build AIR tab of the BlackBerry graphical aid input the location of the following files:

BAR Output File – Select the location and name of the .bar file that will be created.

blackberry-tablet.xml File – This is the bar descriptor file that you created in step 8.

project-app.xml File – This is the project application xml you created in step 9.

SWF File – This is the swf file you created in step 6.

Use Build ID – Every time we build a .bar file you must increment the version or you will receive an error. This can be done in the project application xml file or by updating the build ID here.

Sign Application – If you completed steps 2 and 3 and would like to sign your application check this box. 

Developer Certificate Password – This is the password you created in Step 2.

Additional Files – Any files that are not part of your .swf file that you would like included in the application must be added here. In this example we are adding the icon.

 

Once completed your configuration should look like the screenshot below:

 

 

Click on the Build button located in the bottom right corner. A successful build should look like this:

 

 build2.png

 

Step 13: Install and test your application

If you don’t have a BlackBerry 10 device you can test your application by downloading the BlackBerry® 10 Simulator located here.

 

Put your BlackBerry device in development mode by going into: Options -> Security -> Development Mode and toggling Use Development Mode to on. Note: The default IP address when you have your device connected via USB is 169.254.0.1.

 

 devMode.png

 

In the Install tab of the BlackBerry Graphical Aid tool select the bar file we just created in Step 11 and enter the IP address. Enter your device password (if you’re using the simulator you won’t have one) and click the Install button.

 install1.png

 

A successful install will look like this:

install2.png 

 

The application icon and name will appear on the home screen.

installed.png 

 

Here is a screenshot of our running application.

 running.png

 

 

Conclusion

You should now have a successfully signed application that is ready to be submitted to BlackBerry App World. The source for the application above is attached to this KB article. 

 

For more information about BlackBerry App World, see the following resources:

 



Contributors
Comments
by New Developer on ‎07-29-2012 12:42 AM
Thx!
Users Online
Currently online: 4 members 606 guests
Recent signins:
Please welcome our newest community members: