Requirements

Prerequisite knowledge

Prior experience with Flash Builder will be helpful in making the most of this article.

User level

Intermediate

Note: This tutorial was originally published on October 25, 2010 on InsideRIA.com.
 
Adobe Flash Builder "Burrito" is available and you are probably chomping at the bit to start building Flex based Android applications. This tutorial walks you through creating your first Flex application for Adobe AIR on Android.
 

 
Setting up the project

After downloading and installing Flash Builder "Burrito", follow these steps to set up your first project:
 
  1. Choose File > New > Flex Mobile Project.
  2. For the Project name type AIRFlexonAndroid [see Figure 1].
  3. Click Next.
  1. For the mobile settings, make sure Google Android and Mobile Application are selected [see Figure 2].
  2. Click Next.
  1. Leave the server settings at their default values. [You won't be using an application server for this application.]
  2. Click Next.
  3. Leave the build path settings as they are and click Finish [see Figure 3].
Flash Builder "Burrito" creates a new Flex mobile project, with both a default file and an initial view [see Figure 04].
 

 
Creating the home navigation

Now that you have created a project, you are ready to start updating the code. For this simple application, you will create a navigation system and a few screens.
 
The first step is to add a Home button that, when clicked, displays the application's first view. What is first view, you ask? Flex AIR on Android navigation is based on the ViewNavigator component. To change views, you tell the navigator what to do and the built-in navigation system responds accordingly. The first view, then, is the main view of the application, which the ViewNavigator component displays when its popToFirstView[] method is called.
 
Follow these steps to add a Home button to the first view:
 
  1. Open the file named AIRFlexonAndroid.mxml in your project.
  2. Add the following code immediately after the </fx:Declarations> tag:
<s:navigationContent> <s:Button label="Home" click="navigator.popToFirstView()"/> </s:navigationContent>
When this button is clicked, popToFirstView[] is invoked, and the navigator will display the first view.
 
Within the <s:MobileApplication> tag in AIRFlexonAndroid.mxml, the firstView property has been set to views.AIRFlexonAndroidHome, which refers to a file that was automatically generated when you created the project. When the user clicks the Home button, the ViewNavigator component will load the views.AIRFlexonAndroidHome view.
 
Your AIRFlexonAndroid.mxml file should now have the following code:
 
<?xml version="1.0" encoding="utf-8"?> <s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.AIRFlexonAndroidHome"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:navigationContent> <s:Button label="Home" click="navigator.popToFirstView()"/> </s:navigationContent> </s:MobileApplication>

 
Adding more screens

Next, add some content to the home view:
 
  1. Open the AIRFlexonAndroidHome.mxml file in the views package.
  2. Add the following code immediately after the </fx:Declarations> tag:
<s:Button label="Go To Screen 1" click="navigator.pushView(views.Screen1)" horizontalCenter="0" verticalCenter="0"/>
Your AIRFlexonAndroidHome.mxml file should now look like this:
 
<?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" title="Home"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Button label="Go To Screen 1" click="navigator.pushView(views.Screen1)" horizontalCenter="0" verticalCenter="0"/> </s:View>
You have added a Button control that will call navigator.pushView[views.Screen1] when clicked. This will tell the navigator to change to the views.Screen1 view, but that doesn't exist yet. Follow these steps to create this new view:
 
  1. Right-click the views package and select New > MXML Component.
  2. Type Screen1 as the name [see Figure 5].
  3. Click Finish.
  1. Next, update Screen1.mxml with the following code:
<?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" title="Screen 1"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:VGroup horizontalCenter="0" verticalCenter="0"> <s:Label text="I am screen 1"/> <s:Button label="Go Home" click="navigator.popToFirstView()"/> <s:Button label="Go To Screen 2" click="navigator.pushView(views.Screen2)"/> </s:VGroup> </s:View>
This view has two buttons. The Go Home button uses the navigator.popToFirstView[] function to switch to the first view. The Go To Screen 2 button calls navigator.pushView[views.Screen2] when clicked. Notice that the title property of the view is set to Screen 1, which is important for navigation.
 
  1. Repeat the process above to create Screen2.mxml.
  2. Edit Screen2.mxml and update it with the code below:
<?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" title="Screen 2"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:VGroup horizontalCenter="0" verticalCenter="0"> <s:Label text="I am screen 2"/> <s:Button label="Go Home" click="navigator.popToFirstView()"/> <s:Button label="Go To Screen 1" click="navigator.pushView(views.Screen1)"/> </s:VGroup> </s:View>
Like Screen 1, this view also has two buttons and a title attribute, which is set to "Screen 2".
 

 
Running the application in the emulator

At this point, you are ready to run the application within the emulator.
 
  1. Open the AIRFlexonAndroid.mxml file.
  2. Choose Run > Run As > Mobile Application.
  3. Select On Desktop as the Launch Method and then choose a device to simulate [see Figure 6].
  4. Click Apply and then click Run.
The emulator will open and you will be able to navigate through the application using the buttons you added in the view or the Home button at the top. As you navigate, notice that the name of the screen [shown to the right of the main Home navigation button] changes to the values specified in the title property for each view [see Figure 7].
 
That’s it. Your first Flex based AIR on Android application is running in the emulator.
 

 
Running the application on a device

If you have an Android device, you can follow the steps below to test your application on your device:
 
  1. Plug your device into your USB port and choose Run > Run Configurations.
  2. Change the Launch Method to On Device.
  3. Click Run.
  4. If the Choose Device dialog box appears, you may need to click Refresh and select your device.
If everything is set up correctly, your application will simply launch on the device [see Figure 8]
 

 
Where to go from here

For more information on developing mobile applications with Flex Builder "Burrito" and Flex SDK "Hero" see Mobile Application Development in Flex SDK "Hero". You may also want to read Narciso Jaramillo's Adobe Developer Connection article on the same topic or take the Flex Test Drive for Mobile.