Adventures of a Flex developer

Today I went abseiling for the lilly foundation.  If I'm honest I've never been so scared as I don't like heights.  Any how if I also created a poster to help advertise it myself:





If you are feeling generous you can still donate here

The Metro UI seems to be used in more and more places of late.  Originally I only saw it in the Zune software but its now part of the Windows mobile 7 and the up coming Windows 8 release.  I personally really like it.  Any how I've created a few skins and released this demo Air app. Feel free to take the code and skins and make your own apps metro themed





You can download and run the app here (it does very little apart from look pretty)

Or you can download the source code here

Enjoy

Had a little doodle in photoshop.  If you ever wanted where cloud computers come from:

Nothing to exciting but I notice I had a bug in my egg timer app. Unfortunately for me i wrote the app using Flash Builder burrito, and I've since moved the final version. So updated/rewrote the app and gave it a little face lift. The android version has been updated however the playbook version wont be updated until Flash builder 4.5.1 so i'm not writting more beta code :-/

One of the Application types available in Flash builder 4.5 is the TabbedViewNavigatorApplication.  Its a pretty simple but useful starting point which gives you, your navigation for free by creating a button bar at the bottom of the application.

As seen here:

 

   /**  
    * @private  
    */  
   override protected function createChildren():void  
   {  
     tabbedNavigator = new TabbedViewNavigator();  
     tabbedNavigator.id = "tabbedNavigator";  
     addChild(tabbedNavigator);  
           tabbedNavigator.addEventListener(FlexEvent.UPDATE_COMPLETE,onChange);  
   }  
   /**  
    * @private   
    */   
   override protected function measure():void  
   {      
     super.measure();  
     measuredWidth = tabbedNavigator.getPreferredBoundsWidth();  
     measuredHeight = tabbedNavigator.getPreferredBoundsHeight();  
   }  
      /**  
       * @private  
       */  
      override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void  
      {  
           super.layoutContents(unscaledWidth, unscaledHeight);  
           tabbedNavigator.setLayoutBoundsSize(unscaledWidth, unscaledHeight);  
           tabbedNavigator.setLayoutBoundsPosition(0,0);  
      }  
      private function reDrawTB():void  
      {  
           tabbedNavigator.y = tabbedNavigator.tabBar.height;  
           tabbedNavigator.tabBar.y = -tabbedNavigator.tabBar.height;            
      }  

The playbook version of Bottle Rocket Dash got approved last night. The best thing about writing an application in Adobe air is I can release it on multi-platforms with very little effort.

You can download the app here

Flex builder 4.5 makes it pretty simple to persist data within an app.

Air provides the ability to create a SQL lite database, which could be useful for various uses in an application.

In the following example we use the db to score a number and date time stamp.  Bit like a high score table.

The example is pretty simple and all the important logic is handled with in a few functions. The init function is called on load, which then calls two more functions. createdb and updatelistresult. The Create db function checks if the database exists. If not it simply creates a new database.

The update list result function runs a simple command and uses the result as the data provider for the list.


You can download the apk here and the source here

                protected function init(event:FlexEvent):void {  
                     createDb();  
                     updateListResults();  
                }  
                private function createDb():void {  
                     sqlConnection = new SQLConnection();  
                     sqlConnection.open(File.applicationStorageDirectory.resolvePath("hs.db"));  
                     var stmt:SQLStatement = new SQLStatement();  
                     stmt.sqlConnection = sqlConnection;  
                     stmt.text = "CREATE TABLE IF NOT EXISTS highscore (highscoreid INTEGER PRIMARY KEY AUTOINCREMENT, score INTEGER, date DATE)";                      
                     stmt.execute();  
                }                 
                private function updateListResults():void {  
                     var sqlStatement:SQLStatement = new SQLStatement();  
                     sqlStatement.sqlConnection = sqlConnection;  
                     sqlStatement.text = "SELECT * FROM highscore ORDER BY score DESC";  
                     sqlStatement.execute();  
                     var result:SQLResult = sqlStatement.getResult();  
                     listData.source = result.data;  
                }  
                private function addRecord():void {  
                     if(Number(num.text) is Number) {  
                          var sqlStatement:SQLStatement = new SQLStatement();  
                          sqlStatement.sqlConnection = sqlConnection;  
                          sqlStatement.text =  
                               "INSERT INTO highscore (score, date) " +  
                               "VALUES (:score, :date)";  
                          sqlStatement.parameters[":score"] = num.text;  
                          sqlStatement.parameters[":date"] = new Date();  
                          sqlStatement.execute();  
                          updateListResults();  
                     }  
                }  

On a lot of new/geek new websites I read a lot about android fragmentation.  Some people suggesting it is a bit problem?


My Bottle Rocket Dash game has been live on the android market for less than 48 hours although I pleasantly surprised to see it had been downloaded over 400 times.  Although only just over half are active installs. (I’ll just hope they plan on reinstalling it).


Any how I found the graphs that the android market creates quite interesting.  Weirdly no devices appear to have an android version of less than of 2.2. Admittedly this is no way near the amount of data to draw any conclusions from.   But I thought I would share it:

Finally got round to finishing my first Android Adobe Air game.  You can download a free and paid version from the marketplace:

https://market.android.com/details?id=air.com.indecentmonkey.BottleRocketDash
















https://market.android.com/details?id=air.com.indecentmonkey.BottleRocketDashFree

Got my egg timer application approved for the playbook.  Which also means i quality for a free blackberry playbook.  Can't wait for it to arrive

I was trying to submit my app for the blackberry playbook, however the release build feature in Flash builder burrito appears to be broken. I was shown the following error: “Error: The system cannot find the path specified”

Luckly you can compile the application from the command line. This took me a while to figure out so I thought I would post it up to share and hopefully save someone else the time.

C:\Users\Mark\Adobe Flash Builder Burrito Preview\Egg Timer Air\src>"C:\Program Files (x86)\Adobe\Adobe Flash Builder Burrito\sdks\blackberry-tablet-sdk-0.9.3\bin\blackberry-airpackager" -package Main.bar Main-app.xml Main.swf blackberry-tablet.xml blackberry-tablet-icon.png assets


You can test your newly created compiled app with the following command:

"C:\Program Files (x86)\Adobe\Adobe Flash Builder Burrito\sdks\blackberry-tablet-sdk-0.9.3\bin\blackberry-deploy" -installApp -launchApp -package C:\Users\Mark\Adobe Flash Builder Burrito Preview\Egg Timer Air\src \Main.bar -device 192.168.1.123 -password "password"

You will need to fill in your own ip of the playbook simulator and development password. Also worth a not those paths are from my x64 windows. You can drop the (x86) bit if you’re on 32bit

If you have been using Flash Builder burrito you may have noticed that currently there is no support for the native menu system available to Java Android apps. I expect this is something that will be included in the final release of the up coming Flash Builder.

I have created a temporarily work around which seems to work quite nicely until an update is available. You must listen manually for the Menu hardware key press in your app.

 <s:MobileApplication   
      xmlns:fx="http://ns.adobe.com/mxml/2009"   
      xmlns:s="library://ns.adobe.com/flex/spark"  
      applicationComplete="init()">            
      <fx:Script>  
           <![CDATA[  
                protected function init():void {  
                     NativeApplication.nativeApplication.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);  
                }  
                private function keyDown(e:KeyboardEvent):void {  
                     if(e.keyCode == Keyboard.MENU) {  
                          trace("Handle Menu button"); 
                     }  
                }                 
           ]]>  
      </fx:Script>  
 </s:MobileApplication>  

Once you have received your menu event you can handle it however you like. I have created a gingerbread styled menu which you can use in your own apps. See below:

You can view a normal Flash example here where the source code is available here or view the context menu

I've finished and uploaded my first Adobe Air Android app, you can find it here: https://market.android.com/details?id=air.com.indecentmonkey.eggtimerair

Something else I've been meaning to post... I recently have started experimenting with creating Android apps in Flash builder (burrito) so I'm going to post some of the tests and hopefully final version of an app i've been working on here soon.

I've been testing my apps on my HTC desire which I've had for about 6 months now, i really like it although I would really like an upgrade to the Nexus S if anyone fancies buying me one.  Picture of my Desire running Android 2.3(gingerbread)[Oxygen]

I should have posted this ages ago. Still better late then never. In October I was playing with robotlegs, anyhow this is what i created:

This is a Nike plus client that will display all the publicly available information from your account. This is just the run information. You need to know your NikePlus ID. By default the application has my NikePlus ID pre-populated.

Click on the screen shots below to find more information or view the running application here. You can download the source directly here or using the context menu in the running application.

I recently attended Flex and the city; I was most excited to hear Richard Lord’s talk about frameworks. As I have been experimenting with Flex 4 (Flash Builder) and looking to move away from the cairngorm framework 2 as it is no longer developed and it has been superseded by cairngorm 3. Which is more designed to complement another framework and isn’t one itself. I’ve looked into various frameworks and was recommended by a friend to use experiment with robot legs.

Although he Richard didn’t say what framework was the best (for many reasons or although the most important was on the type of project). He did surmise that robot legs fitted the requirements of the majority of projects, and he seemed to highly recommend it!

You can view his slides here

I much preferred the 2nd Flash camp meet up in London then the 1st one as it was aimed at Flex developers rather than Flash. Although it would have been useful for Flash developers to attend as well.

Finally got some good freebies at the event! Thanks Adobe

So you have created your custom components and you want to use them in multiply projects, you could add the source to every project, or you could create a swc.  A swc is a compiled collection of classes.
Click to view the previous example with the custom component compiled into a swc.

Example
Source

You can easily create a swc from within Adobe Flex builder; simply create a new Flex library project.  The example used above to build the swc can be found here.

Source 

 package indecentmonkey.controls  
 {  
   import flash.events.Event;  
   import mx.controls.TextInput;  
   import mx.styles.CSSStyleDeclaration;  
   import mx.styles.StyleManager;  
   /**  
    * Colour of the outline of changed text  
    *   
    * @default 0x03ce02  
    */  
   [Style(name="itemConfigChanged", type="uint", format="Color", inherit="no")]  
   /**  
    * Colour of the outline of unchanged text  
    *   
    * @default 0xb7babc  
    */  
   [Style(name="itemConfigDefault", type="uint", format="Color", inherit="no")]   
   public class TextInputColour extends TextInput  
   {  
     public function TextInputColour() {  
       addEventListener(Event.CHANGE,handleColour);  
     }  
     /**  
      * @private  
      *   
      * We initialize the default styles for outline and fill styles by calling  
      * initStyles() when the component is instantiated.  
      */  
     private static var stylesInitialised:Boolean = initStyles();  
     /**  
      * @private  
      *   
      * The default styes are defined here.  
      */  
     private static function initStyles():Boolean {  
       var sd:CSSStyleDeclaration = StyleManager.getStyleDeclaration("TextInputColour");  
       if (!sd) {  
         sd = new CSSStyleDeclaration();  
         StyleManager.setStyleDeclaration("TextInputColour", sd, false);  
       }  
       sd.defaultFactory = function():void {  
         this.itemConfigChanged = 0x03ce02;  
         this.itemConfigDefault = 0xb7babc;  
       }  
       return true;  
     }  
     /**   
      * string to hold set text  
      */   
     private var _setText:String = "";  
     /**  
      * Handles initialization of this component.  
     */  
     override public function initialize():void {  
       super.initialize();  
     }  
     override public function set text(value:String):void {  
       super.text = value;  
       _setText = value;  
       handleColour(new Event(Event.CHANGE));  
     }  
     private function handleColour(e:Event):void {  
       if ( _setText == text ) {  
         setStyle("borderColor",getStyle("itemConfigDefault"));  
       }  
       else {  
         setStyle("borderColor",getStyle("itemConfigChanged"));  
       }        
     }  
   }  
 }