Time to say “Hello, World!” to the newest kid on the tablet device block, the BlackBerry Playbook.  Why bother developing for a tablet that isn’t even publicly available yet?  Because Research in Motion (RIM) is offering free Playbooks to developers who create “useful” applications for it.  Thats right, if you join the RIM vendor list (free registration for a limited time only) and submit a quality app, you will receive a free Playbook.  Great incentive to bring developers to your platform.

So how do you get started? Go to the Playbook developers site and follow the instructions there.  Be warned, though, that its not the simplest setup.  Right now RIM has workflows for developing Playbook apps in Blackberry WebWorks and Adobe Air (via Flash Builder 4.0.1 or “Burrito“).  For my first go around I chose the Flash Builder 4.0.1 workflow.

Wanna take a quick peek at the code involved with the Hello World (seen above) for this workflow?

AIRHelloWorld.as

package 
{
        import flash.display.Sprite;
        import flash.events.MouseEvent;
        import flash.text.TextField;
        import flash.text.TextFormat;
        import qnx.ui.buttons.Button;
        import qnx.ui.buttons.LabelButton;
 
        // The following metadata specifies the size and properties of the canvas that
        // this application should occupy on the BlackBerry PlayBook screen.
        [SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
        public class AIRHelloWorld extends Sprite
        {
                public function AIRHelloWorld()
                {
                        var helloButton:LabelButton = new LabelButton();
                        helloButton.label = "Hello World!";
                        helloButton.x = (stage.stageWidth - helloButton.width)/2;
                        helloButton.y = (stage.stageHeight - helloButton.height)/2;
 
                        var myFormat:TextFormat = new TextFormat();
                        myFormat.color = 0xAA0000;   
                        myFormat.size = 24;  
                        myFormat.italic = true;  
                        myFormat.align = "center";
 
                        var text:TextField = new TextField();
                        text.text = "Close";
                        text.setTextFormat(myFormat);
 
                        var closeButton:Button = new Button();
                        closeButton.addChild(text);         
                        closeButton.addEventListener(MouseEvent.CLICK, closeWindow);
                        closeButton.x = (stage.stageWidth - closeButton.width)/2;
                        closeButton.y = helloButton.y - helloButton.height;
 
                        addChild(helloButton);
                        addChild(closeButton);
 
                        stage.nativeWindow.visible = true;
                }
 
                private function closeWindow(event:MouseEvent):void{
                        stage.nativeWindow.close();
                }
        }
}

All of you AS3 and Flash developers should be pretty pleased. You get the comforts of your language of choice with the ability to access native QNX components; the best of both worlds.

Setup Pitfalls

I can’t stress enough that you need to follow the instructions exactly or you won’t get it working.  I speak from experience.  Perhaps you can save yourself a few minutes (or hours) of searching for the resolution to the cryptic errors you may encounter by looking at the problems I ran into.  But really, all of these could be avoided by following the instructions exactly as written.

The Flash Builder 4.0.1 update must be installed

They only mention 4.0.1 about a dozen times but I figured “how important can a point release be?”.  Turns out, very.  You’ll see this if you ignore it too:

An internal error occurred during: "Launching AIRHelloWorld".
com.adobe.flexide.launching.air.ApolloLaunchConfiguration.getAIRProfile()Ljava/lang/String;

Just download and install the Flash Builder 4.0.1 update and all will be resolved.

Adobe Air 2.5 must be installed

Again, they are clear as day about this, but you need to install the Adobe Air 2.5 SDK. The version that comes with Flash Builder 4 is only 2.0.2, or might be 1.5, I can’t remember off hand. You can find the version of Air your BlackBerry Tablet SDK is installed against by looking at the app config XML file (AIRHelloWorld-app.xml) in your project. The first node, application, indicates the Air version used:

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

In any case, if its not the right version you have to install Air 2.5 or you’ll see an error similar to this:

Error: Cannot find node: versionNumber

This is because the versionNumber node in your app configuration isn’t supported before Air 2.5. In order to fix this error, you need to reinstall the BlackBerry Tablet SDK and make sure to point it at the directory of Adobe Air 2.5 during the install. If someone knows a better way to do it without having to reinstall the Blackberry Tablet SDK I’m all ears.

Put your Playbook Simulator in Development Mode

Even if you remember to put your Playbook Simulator in Development Mode as per the instructions, you’ll probably forget (like me) that you need to do that whenever you restart the simulator. I’m not aware of a way to set Development Mode ON by default. Here’s the error you’ll see:

Using icon: C:\development\AIRHelloWorld\bin-debug\blackberry-tablet-icon.png
Package created: C:\development\AIRHelloWorld/AIRHelloWorld.bar
Sending Install and Launch request...
Error: Device is not in the development mode. Switch to Development from Security settings on the device.

All you have to do is follow the instructions here, which will tell you to do the following:

1. Activate the Playbook Simulator
2. Click the gear icon at the top right
3. Click “Security”
4. Click “General” under “Security Settings”
5. Toggle “Development Mode” to ON under “Development Settings”

Summary

That’s all I got so far. It looks like a terrific platform and is really engaging a lot of the development community by integrating native access through external SDKs. Soon as my plate clears up a bit I’m gonna hit this full steam and add myself to the list of the lucky talented developers (like Jason Fincanon) getting themselves a free Playbook.

In my prior 2 part guide entitled “Google Project, Subversion, and Eclipse” ( and ) I discussed how to setup a Google Project Hosting Subversion repository and how to integrate it into an Eclipse based IDE. It came with lots of text and screenshots. While lots of people prefer this method of step by step instruction (I’m usually one of them), its layout left me disappointed.

To remedy this dissatisfaction I put together this video. It walks you through everything from that 2 part guide in a concise 6 minute video. You’ll get to see exactly how to create a Google Project Hosting Subversion repository, install the Subclipse SVN plugin for Flash Builder 4, and integrate the repository into your development environment.

You’ll have to forgive the very amateur nature of the video, this was my first time using Adobe Captivate .  Its a pretty intuitive software, but I’m totally ignorant to the finer points of video guide creation.  I’m sure that will start to change in the near future, though, especially if people actually take the time to watch this one.

In we learned how to setup a Google Project Hosting Subversion repository for version control and remote storage of our code.  In Part 2 we will learn how to integrate this remote repository into the Eclipse based IDE of your choice.  Before starting, though, let me first mention that:

• I’m on a Windows system with TortoiseSVN, so some of this will vary on other OSes.
• I will be using Flash Builder 4 for this guide, but Flex Builder 3 and other Eclipse based IDEs are very similar.
• You’ll need to know the workspace directory of your IDE, which will be referred to as WORKSPACE from now on.

So let’s say I want to check out my Away3D Flash Builder 4 template project.

1. The first thing I do is go to my Google Project Hosting page and find the Subversion URL for that project.  You can find my project hosting at
   
2. Goto “Source -> Browse” and we’ll find the project I’m looking for under the trunk, “away3d_template_fb4“.  The path to that project is “trunk/away3d_templates/away3d_template_fb4“.  You’ll need this for the checkout later.
   
3. Now its time to install Subclipse, an SVN plugin for Eclipse based IDEs.  Open up Flash Builder 4 (or whatever Eclipse based IDE you are using).  Goto “Help -> Install New Software…“
4. In the resulting dialog, enter the following URL in the “Work with” field: http://subclipse.tigris.org/update_1.6.x
   Then click  ”Add”.  You will be prompted for a name for the site.  Just call it “Subclipse”.  After you click OK you should get a dialog that looks like this:
   
5. Check “Subclipse” then expand its choices.  Deselect “Subclipse Integration for Mylyn 3.x (Optional)” and “Subversion Revision Graph”.  Your list should look like this:
   
6. From here just follow the steps for the Subclipse install.  If you need specific instructions to get Subclipse loaded in your Eclipse based IDE, use the Download and Install instructions from the Subclipse website.  The IDE will restart (or you should do it manually) when the install finishes.
7. After Flash Builder 4 reopens, right click in the Package Explorer and select “Import…”.  From the resulting dialog expand “SVN” and select “Checkout Projects From SVN“.  click Next.
   
8. Select the radio button next to “Create a new repository location” and click Next.
9. In the “URL” field, I will be entering the following URL: https://savagelook.googlecode.com/svn/trunk/away3d_templates/away3d_template_fb4
   Notice that the root of the path is my Google Project Hosting root “https://savagelook.googlecode.com/svn” and that it ends with the path to my specific project “trunk/away3d_templates/away3d_template_fb4” as mentioned in Step 2. click Next.
10. Your IDE will return a list of files under this project, but we are checking out the whole thing so just select the top level choice (the full URL) and click Finish.  It will likely take a few moments to finish, depending on the size of your project.
    
11. In your Package Explorer you should now have your Google Project Hosted code integrated into your Eclipse based IDE.  You can do a quick confirmation of this by seeing if there are little yellow icons indicating version control on your filenames.  Also, you can mouse-over any version controlled filename to see when it was last committed and by whom.
    
12. Now let’s try a quick change and commit.  I’m going to add a sphere to my Away3D template, then commit the change back to the Google Project Hosting Subversion repository.  After I make the code changes, save, and run the application, the local repository will mark the files as changed.  Notice the little yellow bars have changed to black and white asterisks on changed files.
    
13. To commit all my changes I am going to right click on the project root in the Package Explorer and goto “Team -> Commit…”
    
14. In the resulting dialog I am going to write a simple commit message to give a little info about the changes and then click OK.  Eclipse will execute the commit and when it is finished you will see all those little black and white asterisks turn back into yellow bars.  This signifies that your local changes have been successfully sent to the Google Project Hosting Subversion repository.  Feel free to go back to the Google project web interface to confirm it.
    

Congrats, you made it!  If you managed to follow along with these 2 long blog posts of mine, you now have your code hosted by Google Project Hosting in a Subversion repository and have it fully integrated into the Eclipse based IDE of your choice.  Give yourself a pat on the back!

It may seem like a lot of work up front, but the ability to revert, merge, backup, branch, and tag code becomes priceless once you get into some serious projects.  The simple assurance that you can fall back to a any revision of your code when you inevitably F something up is great.  Learn to love version control and I assure you it will love you back.  Creepy…

OK, this is a pretty boring update to the blog, but I thought it might be useful to at least a handful of people.  Flash Builder 4 comes with a stock version of the Flex 3.5 and 4.0 SDKs.  If you are like me, though, you want the latest and greatest as soon as you can get your hands on it.  For that reason I put together this very short and simple explanation of how to install specific Flex SDKs for your Flash Builder 4.  For those familiar with Flex Builder 3, this will seem pretty familiar.

- FLASH_BUILDER_4_HOME is your Flash Builder 4 install path (i.e., C:\Program Files\Adobe\Flash Builder 4)
- SDK_VERSION is the version number of your Flex SDK (i.e., 4.1.0)

1. Get your desired Flex SDK from the Flex SDK Download page.
   

   Flex SDK Download Page

2. Unzip the archive to FLASH_BUILDER_4_HOME/sdks/SDK_VERSION
3. Open Flash Builder 4 and in the menu bar goto Windows -> Preferences

   

4. In the left pane of the Preferences window expand “Flash Builder” and click “Installed Flex SDKs”.  Click “Add…” in the right pane.

   

5. In the “Add Flex SDK” window enter the location of your new SDK (FLASH_BUILDER_4_HOME/sdks/SDK_VERSION) or click the “Browse..” button to find it yourself.  If you enter the path correctly, the “Flex SDK Name” field should auto-populate with the correct SDK name.

   

6. Click “OK” and your Flex SDK should be successfully installed.  You can now also set it as the default, if you wish, for all your future Flex projects.  Just click the checkbox next to the name of your SDK and click “Apply”.

Even if you set up a new SDK as the default, there’s no reason you have to use it on all of your projects. During the creation of a new Flex project you can specify which SDK you want to use in the “Flex SDK version” section. You simply need to click the “Use a specific SDK” radio button and then select one of your installed SDKs from the drop down.

You can also change the SDK after the project is created. With your project selected, goto Project -> Properties and then click on “Flex Compiler” in the left pane. On the right you’ll now see the same “Flex SDK version” section that was mentioned in the last paragraph. Just change it and click “Apply”.

And thats about it. Dig and have fun, Flash Builder 4 really is a fantastic IDE.

Here’s a quick tip for those of you who are also switching to Flex 4.x/Flash Builder 4 from Flex 3.x/Flex Builder 3.  In the past when you wanted to add a Flash DisplayObject to the main Application canvas you’d wrap the DisplayObject in a UIComponent, then add the UIComponent to the Application as a child, like this:

var sprite:Sprite = new Sprite();
var ui:UIComponent = new UIComponent();
ui.addChild(sprite);
this.addChild(ui);

Try that in Flash Builder 4 and you’ll encounter a fun error that looks like this:

Error: addChild() is not available in this class. Instead, use
addElement() or modify the skin, if you have one.

To resolve it, simply change the last line of the previous code to use addElement() instead (change in red):

var sprite:Sprite = new Sprite();
var ui:UIComponent = new UIComponent();
ui.addChild(sprite);
this.addElement(ui);