Flex to Apollo conversion: easy does it!

Yesterday the alpha version of Apollo was released. Time to put it to the test! Currently I’m working on a new version of my guitar scales application. The Flex (development) version can be seen here. I was curious about how much trouble it would be to turn this Flex application into an Apollo application. It turned out to be very easy. Here are the steps I took:

• First of all: downloaded the runtime, sdk and the Flex Builder extension
• Created a new Apollo project in Flex Builder
• Edited the [myappname]-app.xml file and changed the systemChrome attribute of the rootContent element to “false”. This removes the standard OS chrome and replaces it with a standard Flex chrome. In turn, the Flex chrome can be removed by adding a showFlexChrome attribute to the mx:ApolloApplication root element with a value of “false”.
• Added application thumbnails to the [myappname]-app.xml file:

  <icon><image16x16>assets/images/appicon16.png</image16x16>...

• Added a close button to the main Panel:

  <mx:Button click="stage.window.close()" label="Close application" />

• Added a mousedown event to the panel’s titlebar in order to let the user move the application:

  // should be placed in the constructor
  addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
  
  private function creationCompleteHandler(event:FlexEvent):void {
  	titleBar.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownInTitleBar);
  }
  
  private function onMouseDownInTitleBar(event:MouseEvent):void {
  	stage.window.startMove();
  }
  

• Save all, build and last but not least: File > Export > Deployable AIR File, add the application icons in the wizard and press finish!
• Check out the result.

Some useful links:

• Apollo at Adobe Labs
• Apollo release link roundup
• Apollo for Adobe Flex Developers Pocket Guide (O’Reilly)