menu

Blog

  • Preview new version of Flash Builder Burrito for blackberry development

    With upcoming Flash Builder "Burrito" and Flex SDK 4.5 "Hero" developers finally be enabled to create Flex application that run on Android platform.

    Thanks to Adobe Integrated Runtime being released for Android platform and thanks to Flex SDK 4.5, Flex developer is not required to go hard way coding in plain Actionscript or work with Flash authoring tool. To say even more, Flash Builder Burrito supports upcoming Blackberry Playbook tablet.

    Blackberry Playbook won't be Android device, it will run QNX Neutrino operating system, but Adobe AIR support will be provided out of the box. Adobe AIR runtime is integrated at system level. Besides, device boasts native C++ SDK on top of QNX Momentix SDK and OpenGL 2.0 SDK. Webkit engine that works on top of Blackberry  Webworks platform offers full support for HTML5 and CSS3. Also Playbook sports robust cross-screen API, creative and developer tools, integration with video server, data services and collaboration services. Integration with AppWorld, payment system and advertising promise easy distribution and monetization for you applications.

    Both QNX and Flex are both Beta and first iterations on mobile platform. Native applications running on Playbook very fast, but they cannot brag of fancy skinning. Flex applications can offer rich graphic abilities, layout and containers, binding, etc etc. Flex SDK may use native QNX UI classess as well.

    To start playing with development we'll need some toys. First, need Flash Builder "Burrito" prerelease: it can be downloaded from Adobe Labs page. Then grab Blackberry Playbook SDK and emulator from Blackberry site. To run emulator you'll need VMWare Player, emulator won't run in Oracle Virtualbox.

    If you have Flash Builder installed, install Burrito to separate folder. Install Blackberry Playbook SDK and provide path to Burrito installation folder. This installation will add some magic to standard Flex SDK 4.5 "Hero" shipped with Flash Builder "Burrito".

    As you see, Mobile project is just another project type in Flash Builder ! Select target platform:

    New type of Flex application will be created: MobileApplication.

    To launch application in built-in emulator, just configure appropriate configuration.

    Thant's it: you'll see default application in Blackberry emulator !

    In case you had installed Blackberry Playbook emulator in VMWare, then you can deploy AIR application there, but you'll need to push app via network. Turn Development mode on: in Blackberry Playbook click Settings cog, then Security and turn Development Mode on.

    Virtual device will tell you IP address it was assigned by VMWare when you connected to network - write this down.

    Then issue this command in command line (cmd.exe in Windows) and see console output:

    C:\blackberry-tablet-sdk-0.9.1\bin>blackberry-airpackager -package bobpop.bar -installApp -launchApp "C:\bobpop\bin-debug\bobpop-app.xml" "C:\bobpop\bin-debug\bobpop.swf" -device 192.168.241.128

    Using default icon: C:\blackberry-tablet-sdk-0.9.1\bin\..\samples\icons\blackberry-tablet-default-icon.png
    Package created: bobpop.bar
    Sending Install request...
    Action: Install
    File size: 1056286
    Installing ...
    actual_dname::bobpop.debug.Ym9icG9wLmRlYnVnICAgICAgICA
    actual_id::Ym9icG9wLmRlYnVnICAgICAgICA
    actual_version::0.0.0.0
    result::success
    Sending Launch request...
    Action: Launch
    Launching bobpop.debug.Ym9icG9wLmRlYnVnICAgICAgICA...
    done

    After you'll see your app in Blackberry Playbook and able to run it.

     New version of Flash Builder ("Burrito") will have facility to compile and run mobile Flex applications in built-in emulator or on device. Combining this feature with our virtual Blackberry device, we may debug applications in closest environment we can get until actual Blackberry Playbook come to market. To run app in virtual Blackberry device, set up Flex Mobile project run configuration:

    Then, just pressing Run, application will be installed and started in virtual device:

    Under the hood Flash Builder is running same command-line tool blackberry-airpackager.

    To test further I wrote simple application. It appeared that development is not too much differ from coding regular Flex applications.

    Main application: differense is that we have firstView property that should point to component of type View.

    <s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          firstView="views.testHome">
      <fx:Declarations>
         <!-- Place non-visual elements (e.g., services, value objects) here -->
      </fx:Declarations>
    </s:MobileApplication>

    View is a regular container, it support layouts and states as usual. In this sample it's /views/testHome.mxml:

    <?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    	xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:views="views.*"         creationComplete="view1_creationCompleteHandler(event)" 
             title="Home">
    
    	<fx:Declarations>
    		<!-- Place non-visual elements (e.g., services, value objects) here -->
    	</fx:Declarations>
    	
    	<fx:Script>
    		<![CDATA[
    			
    			import mx.events.FlexEvent;
    			
    			protected function view1_creationCompleteHandler(event:FlexEvent):void
    			{
    				this.addEventListener("FaceClicked", onFaceClick);
    			}
    			
    			protected function onFaceClick(event:Event):void {
    				this.currentState = "details";
    			}
    			
    			protected function button1_clickHandler(event:MouseEvent):void
    			{
    				this.currentState = "tile";
    			}
    			
    		]]>
    	</fx:Script>
    	
    	<s:states>
    		<s:State name="tile" />
    		<s:State name="details" />
    	</s:states>
    	
    	<s:TileGroup includeIn="tile" left="0" right="0" top="0" bottom="0">
    		<views:ButtonFace id="faceBender" img="bender.jpg" txt="Bender" />
    		<views:ButtonFace id="faceFry" img="fry.jpg" txt="Fry" />
    		<views:ButtonFace id="faceFrog" img="frog.jpg" txt="Frog" />
    	</s:TileGroup>
    	
    	<s:HGroup includeIn="details">
    		<s:Label text="Details" />
    		<s:Button label="Close" click="button1_clickHandler(event)" />
    	</s:HGroup>
    	
    </s:View>

    Custom components can be used as normal. Here it's /views/ButtonFace.mxml.

    <?xml version="1.0" encoding="utf-8"?>
    <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
    	  xmlns:s="library://ns.adobe.com/flex/spark"           width="200" height="200"                       horizontalAlign="center">
    	
    	<fx:Script>
    		<![CDATA[
    			
    			[Bindable]
    			public var img: String = "";
    			
    			[Bindable]
    			public var txt: String = "";
    			
    
    			protected function button1_clickHandler(event:MouseEvent):void
    			{
    				var e:Event = new Event("FaceClicked", true);
    				dispatchEvent(e);
    			}
    
    		]]>
    	</fx:Script>
    	
    	<s:BitmapImage source="assets/{img}" />
    	<s:Button label="{txt}" click="button1_clickHandler(event)" />
    </s:VGroup>

    Sixty seconds of coding and here's result: simple app with touch-clickable buttons and two view states - list and detail.