I have just started developing for the BlackBerry PlayBook tablet using AIR and I’ve already found something that I think is useful to share. First thing I had to do was to setup FlashDevelop to compile, package and install the app in the PlayBook Simulator. Why FlashDevelop? Because it is awesome. If you’re using Flash Builder, there is is plenty of information about compiling and testing an application on this page BlackBerry – Getting Started Guide. But if you’re using FlashDevelop or a different editor, there is not much info out there. So here we go.

To start developing for the PlayBook, we’ll need to download some files:

  1. Download AIR SDK (2.5 or bigger)
  2. Download BlackBerry Tablet OS SDK for AIR for Windows (1.0.1)
  3. Download VMware (required to run the BlackBerry PlayBook Simulator)

The PlayBook Simulator is packaged with the SDK, but you want to download it separately for some reason, here is the link: Download the BlackBerry PlayBook Simulator for Windows.

 

It does take a while to download and install all these, but it is all quite straightforward.
Below I’ll comment on some key steps:

 

- When you launch BlackBerryTabletSDK-Air-Installer just select No on the Flash Builder Integration step.

 

- After you install the VMware Player, click Open a Virtual Machine.

 

- Browse to the blackberry-tablet-sdk folder, then to BlackBerryPlayBookSimulator folder and select BlackBerryPlayBookSimulator.vmx

 

- Double click BlackBerry PlayBook Simulator on the left, wait for it to load, type in the password (playbook) and you should see something like this:

 

- Click on the little man icon on at the top, make sure Development Mode is ON and remember the IP Address to target this device later.

 

Great. Now let’s go to FlashDevelop.

- Create a new project. Project > New Project…
- Select AIR AS3 Projector.
- Name it PlayBook and hit OK.

 

- Click Project > Properties…
- Select the Compiler Options tab.
- Select Custom Path to Flex SDK and browse to the blackberry-tablet-sdk folder.

 

- In this example, we are going to use one of the PlayBook UI components, so it is necessary to add a SWC library to our project before we start coding. Browse to the blackberry-tablet-sdk folder then go to frameworks\libs\qnx-screen. Copy qnx-screen.swc and paste it into the project’s lib folder. Right-click and Add To Library.

 

- This is the code for the Main.as:

package 
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import qnx.ui.buttons.LabelButton;
 
	[SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
	public class Main extends Sprite 
	{
 
		public function Main():void 
		{
			var helloButton:LabelButton = new LabelButton();
			helloButton.label = "Hello World!";
			helloButton.x = (stage.stageWidth - helloButton.width)/2;
			helloButton.y = (stage.stageHeight - helloButton.height) / 2;
			helloButton.addEventListener(MouseEvent.CLICK, closeWindow);
			addChild(helloButton);
 
			stage.nativeWindow.visible = true;
		}
 
		private function closeWindow(event:MouseEvent):void{
			stage.nativeWindow.close();
		}
	}
}

 

If you compile and run the project, you should see an AIR window with a nice “Hello World!” button in the center. Now it is time to see it running inside the PlayBook Simulator. Flash Builder has a graphic interface for this step, but in FlashDevelop we have to use the command line.

- Click Project > Properties…
- Select the Build tab.
- In the Post-Build Command Line box, click Builder…
- Inside the Command Line Builder, according to the instructions on this page Package and deploy your application using the command line we should type in:

blackberry-airpackager -package output_bar_file_name -installApp
-launchApp project_name-app.xml project_name.swf any_other_project_files -device IP_address -password password

Adapted for this example it should look like this:

$(CompilerPath)\bin\blackberry-airpackager.bat -package PlayBook.bar -installApp -launchApp $(ProjectDir)\application.xml $(OutputDir)\PlayBook.swf -device 192.168.47.128 -password playbook

 

- If you try to run that, you’ll probably see the following error message in the output window:

Error: Cannot find node: versionNumber

The AIR AS3 Project template is a bit outdated, so we need to edit the application.xml
In the <application> node at the top, the xmlns attribute needs to end with 2.5:

<application xmlns="http://ns.adobe.com/air/application/2.5">

And the <version> node needs to be updated to <versionNumber>:

<versionNumber>1.0.0</versionNumber>

 

Now you’re good to go. Open the PlayBook Simulator in the VMPlayer, then hit F8 or Ctrl+Enter to compile the project, wait for it to finish and check the simulator window. You should be able to see a new PlayBook application with the default icon there. Now try to open it. Crashed instantly? Yes, happened to me. And took me a while to understand what was wrong.

The problem is that the project’s files are not all in one folder. The AIR AS3 Project template puts the application.xml in the root folder and the .swf in the bin folder and the blackberry-airpackager doesn’t like that. We need to put all files in the same folder.

If you choose to put all the files in the project’s root folder, go back to the Command Line Builder and type this:

$(CompilerPath)\bin\blackberry-airpackager.bat -package PlayBook.bar -installApp -launchApp application.xml PlayBook.swf -device 192.168.47.128 -password playbook

If you prefer to keep your files in the bin folder we need to add the $(OutputDir) paths AND add the packager option -C :

$(CompilerPath)\bin\blackberry-airpackager.bat -package $(OutputDir)\PlayBook.bar -C $(OutputDir) -installApp -launchApp $(OutputDir)\application.xml $(OutputDir)\PlayBook.swf -device 192.168.47.128 -password playbook

 

Compile the project and you should see it running nicely in the PlayBook Simulator.

 

And that’s it. Have fun developing for the BlackBerry PlayBook!

 

UPDATE: ANT
Ok, it doesn’t take long to realize you don’t want to deploy for the Simulator on every build. A good option is to create an ANT build file so you can decide which task to run. I have added the following files to the Example Files below:
build.xml (ANT build)
build.properties (user settings and project variables)
config.xml (project specific values)

Please make sure you edit both build.properties and config.xml to match your project.

If you’re new to ANT, it is very easy to get it running on FlashDevelop.
There is nice ANT panel plug-in called fd-ant-plugin

- Donwload AntPlugin-r9.zip.
- Extract the content to [ FlashDevelop path ]/Plugins/
- Restart FlashDevelop.
- A new tab called Ant should be available besides Outline | Bookmarks | Files | Project.
- From the Project tab, drag build.xml and drop it in the Ant tab.
- Double click any of the ANT tasks to run them.

 

LINKS
Example Files

ADITIONAL NOTE: GESTURES
Some useful gestures when testing with the PlayBook Simulator:

Minimize an application: drag up from the border at the bottom
Open settings: drag down from the border at the top
Close an application: when minimized, click the app thumb and drag up
Rotate the simulator: drag from the bottom-right corner to the center

 


7 Comments on “FlashDevelop and BlackBerry PlayBook”

You can track this conversation through its atom feed.

  1. momochii says:

    Beneficial info and excellent design you got here! I want to thank you for sharing your ideas and putting the time into the stuff you publish! Great work!

  2. Devin Reimer says:

    Thanks for the walkthrough. One quick addition, I got hung up this error in FlashDevelop: ‘Exception: The system cannot find the file specified’.

    I discovered the reason was on 64-bit Windows the folder location for the bat files starts with C:/Program Files (x86). This has a space in it. The solution is to wrap the compiler path in double quotes: “$(CompilerPath)\bin\blackberry-airpackager.bat”

  3. unbox » Blog Archive » flag.in for PlayBook says:

    [...] the simulator, etc) and working with the QNX components. I have already talked about these two topics [...]

  4. Marlon says:

    Thanks a lot for this! Really helpful (despite being a little outdated now). Also thanks to Devin Reimer for his solution on the “Exception: The system cannot find the file specified” problem.

  5. Zork says:

    Hi, I am getting “Exception: Could not locate lib\fcsh.jar in Flex SDK.” when I try to build. Any ideas?

    Thanks.

  6. Rigoberto Gocek says:

    wonderful site, I like it very much. Good work ! Nice post. Thanks !

  7. Shawanna Legette says:

    I have recently started a web site, and the information you provide on this website has helped me greatly. Thanks for all of your time & work.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>