Using Flash Professional to create Apps for the BlackBerry Playbook

As of now, the only “built-in” option to compiling Blackberry apps for the Blackberry Tablet is using Flash Builder 4. This process if straightforward, but what if you do not have Flash Builder 4 or if you have it and not comfortable using Flash Builder.  Let’s just say you are a Flash Professional Pro! During Adobe MAX, it was mentioned that Blackberry was working on an update for Flash Professional that will allow you to use Flash Pro to compile Blackberry Apps. 

The Document Class – Why is it so important?

Through my travels as an instructor, I always get the question, What is a Document Class?  Well the answer is simple, but the possibilities are extreme.  During this article, I would like to explain some of the most important things to know about a Document Class….Mainly a Document Class is “Your SWF file”!

First of all, the document class is optional.  Ok, it’s 2011, most seasoned Flash Developers are NOT using the timeline anymore and are using the Document Class. And every year as someone reaches excellence, there is someone born…New to Flash/ActionScript. Someone, right now, is holding on to the timeline, as if their life depended on it. So, whatever category you may fall into, one thing is certain, Flash is OPEN to you.  Flash will let you do, pretty much, whatever you want.

• Create animation and ActionScript on the timeline
• Create animation without the timeline, using ActionScript
• Create animation with AND without the timeline, together…

Create an Adobe ActionScript application

Use the following code sample to create an Adobe® ActionScript® application named AIRHelloWorld.

Before you begin: Create an image in PNG format with a maximum resolution of 86 x 86 pixels named blackberry-tablet-icon.png to use as the icon for your application. If you create the image file in the same folder as your compiled application, the application packaging tool that is included in the BlackBerry® Tablet OS SDK adds this image to your application automatically. For more information about adding an icon for your application, see "Create an XML configuration file for your icon".

1. In a text editor, paste the following code sample.

   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;
   
    [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();
     }
    }
   }
   

2. Save the file as AIRHelloWorld.as.

BlackBerry Tablet OS SDK for Adobe AIR

Adobe® AIR® technology represents a huge opportunity for mobile app developers – the promise for easing the mobile development process and the ability to share code across multiple platforms have become reality. Such capabilities including compiling for the BlackBerry Tablet® OS SDK, Android, and iOS from one source file were demonstrated by Chris Black in his keynote at Geeky By Nature in NYC earlier this month.

Flash Professional CS5 for building BlackBerry Tablet application

The BlackBerry PlayBook runs the BlackBerry Tablet OS, and includes support for Adobe AIR and Adobe Flash Player. The BlackBerry Tablet OS SDK provides tools to package and deploy AIR applications (which use the .bar file extension) to the PlayBook simulator. Using this setup, you can create Flash content with either Adobe Flash Professional or Adobe Flash Builder.

In this article you'll learn how to build, package, and deploy a Battery Monitor application using Flash Professional CS5 and the BlackBerry Tablet OS SDK. This article is divided into the following sections:

• Using the BlackBerry Tablet OS SDK and Flash Professional CS5 Extension for AIR 2.5
• Creating a battery monitor application
• Packaging and deploying your application for the PlayBook simulator

Blackberry flash applicatons development

For me, day two of Mobile World Congress started with a demo on how to build Flash based applications for BlackBerry devices. Since RIM is one of our Open Screen Partners you will soon see Flash Player 10.1 and AIR on BlackBerry devices. As a Flash developer I am obviously very excited about that. BlackBerry has traditionally been an enterprise platform, one that uses Java as its core developer platform. Bringing Flash Player 10.1 and AIR to these devices opens up a whole new world for Flash Developers but also for BlackBerry users.

How to Read and Write XML files with Flex and AIR

Needed Resources:

• Adobe Flex Builder 3 or Flex Builder 3 plug-in for Eclipse
• The xml file attached to this post.

Final Product:

An AIR application with a load xml and save xml button. The load button prompts the user to find an xml file titled "person.xml." Once the user has selected the file, the first name and last name of the person will be displayed in two text inputs. The user can then edit these entries and save them back to the file using the save button.

The Data:

<?xml version="1.0" encoding="UTF-8"?>

<person>

<firstName>John</firstName>
<lastName>Doe</lastName>

</person>

Execution:

1. Mock up a simple interface with two input fields and two buttons in MXML:
   


   <mx:VBox>

   <mx:HBox>

   <mx:Label text="First Name:"/>
   <mx:TextInput id="fName_txti"/>

   </mx:HBox>
   <mx:HBox>

   <mx:Label text="Last Name:"/>
   <mx:TextInput id="lName_txti"/>

   </mx:HBox>

   <mx:HBox>

   <mx:Button id="load_btn" label="Load XML" click="loadXML()"/>
   <mx:Button id="save_btn" label="Save XML" click="saveXML()" enabled="false"/>

   </mx:HBox>

   </mx:VBox>

   NOTE: save_btn is disabled to prevent the user from trying to save something that does not yet exist.

2. Create a script tag and import the Alert class that will be needed to let the user know if they have selected an invalid file:
   import mx.controls.Alert;
3. Write the method that will be invoked when the"Load XML" button is clicked:
   
private function loadXML():void{

   file = new File();
   file.addEventListener(Event.SELECT, dirSelected);
   file.browseForOpen("Select person.xml file");

   }
4. Setup the event listener function that will read the xml file and create an XML object. If the user has not picked a file with the name "person.xml," the application will fire a prompt informing them of their mistake:
   
private function dirSelected(e:Event):void {

   
   if(file.nativePath.indexOf("person.xml") != -1){

   var fs:FileStream = new FileStream();
   fs.open(file, FileMode.READ);
   personXML = XML(fs.readUTFBytes(fs.bytesAvailable));
   fs.close();
   setTextInputs();

   }else{

   Alert.show("You have not selected an xml file called 'person.xml'");

   }

   }
5. The next function is a helper function that sets the text input's text:
   
private function setTextInputs():void{

   fName_txti.text = personXML.firstName;
   lName_txti.text = personXML.lastName;
   save_btn.enabled = true;

   }
6. Last is the function to save the xml back to the originally opened file:
   
private function saveXML():void{

   personXML.firstName = fName_txti.text;
   personXML.lastName = lName_txti.text;
   var newXMLStr:String = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" + personXML.toXMLString();
   var fs:FileStream = new FileStream();
   fs.open(file, FileMode.WRITE);
   fs.writeUTFBytes(newXMLStr);
   fs.close();

   }
   NOTE: If the application used "writeUTF" instead of "writeUTFBytes" the xml file ends up with some garbage characters that causes parse errors when the app tries to reopen and parse the xml.
7. Check out this post to see how to save a class object to XML. Enjoy!