back

Create Android apps with Flex "Hero" and Flash Builder "Burrito"

by Brian Rinaldi

In the last edition of the Edge, I introduced AIR for Android and walked you through creating an application using Adobe Flash Professional CS5. This is great if you are a Flash programmer who is accustomed to creating applications in the Flash IDE. However, what if you are a Flex or ActionScript programmer who is comfortable in Flash Builder? Thankfully, with the recently released preview versions of Flex "Hero" and Flash Builder "Burrito," there's not only a mobile workflow for Flash Builder but also specially optimized mobile components in Flex.

In this article, I show you how to create your first mobile Flex application using "Hero" and "Burrito." With these tools, developing Android applications couldn't be easier or more straightforward for Flex developers — even if you have never built a mobile application before. Over time, we plan to enable you to use these same tools to deploy applications to BlackBerry Tablet OS and Apple iOS.

Getting your development environment set up

One of the other recent developments since my last article is that AIR for Android is now available in the Android marketplace. This means that you can put your application in the marketplace, and anyone with a phone capable of running AIR for Android can use it. It also means that setting up your phone and local environment for testing AIR for Android applications is simply a matter of letting Flash Builder install the applications on your phone or downloading AIR for Android from the Android marketplace.

While you may eventually need the Google Android SDK, you don't need it to develop mobile Android applications with Flash Builder "Burrito." Flash Builder comes with the SDK tools you need to push applications to your phone. (It even includes the Android driver you need if you connect your Android device to a Windows machine.) Additionally, the AIR for Android SDK comes with the Flash Builder installation. Even if you don't have an Android device, you can test your mobile applications from Flash Builder right on your desktop.

So ultimately, setting up your development environment is just a matter of installing Flash Builder "Burrito" from the site. However if you need to reference detailed instructions for setting up the Android SDK on your own, refer to my previous article or to Lee Brimelow's video tutorial on the topic.

Building mobile applications in Flash Builder "Burrito"

Our sample application is designed to display and share a user's Xbox Live activity (see Figure 1). While Xbox Live does not have a public API available for this purpose, a site called 360voice.com does make one available for free. The only drawback is that the user also needs a 360voice.com account for it to work. Let's use this API to get a user's recent Xbox Live usage as well as details on his Xbox Live account.

A mobile application that displays and shares Xbox Live activity.

Figure 1. A mobile application that displays and shares Xbox Live activity.

While this application only has a handful of views, it will give you a good idea of how to create an application using Flex mobile components. We'll also use the data-centric development (DCD) features in Flash Builder to connect to the external HTTP service. Since I can't go over every bit of code in detail in this article, you can download the finished code via an FXP file (ZIP, 791 KB) that you can import to Flash Builder.

The first step is to choose File > New > Flex Mobile Project in Flash Builder "Burrito" and use all the default settings with two exceptions: Deselect Automatically Orient on the mobile settings and select None/Other for the application server. I named my project "WhatsMyXboxUpTo" but you can use any name you like. Once you click Finish, you will see that Flash Builder generates a file in the default package called WhatsMyXboxUpTo.mxml and another file in the views package called WhatsMyXboxUpToHome.mxml. This is different than you might be used to with a standard Flex application. Flex handles views a little differently in mobile. You'll understand these differences better as you build your application, and you can always consult the documentation in the preview release for more detail.

Connecting to services

Before you build your views, you need to import your 360voice services using the DCD features in Flash Builder. You're going to use three services on 360voice: one to determine if the user exists on the service, one to load the gamer entries (such as usage history), and one to get profile information. The service URLs and parameters are as follows:

If you've never set up an HTTP service in Flash Builder before, it's an easy process. Simply select the Data menu and choose Connect To HTTP. Then walk through the steps of adding the URLs above and the parameters listed for each. For the service name, I entered ThreeSixtyVoice and used the default service package name. You'll also want to configure the returntypes of each of these service methods using the auto-detect feature. (I can't walk through every step in this article, but you can see the returntype information in the FXP.)

Building the views

Views in Flex for mobile are handled a little differently than you may be used to in prior Flex development. The main mxml application file (WhatsMyXboxUpTo.mxml in the default package in this case), for instance, doesn't serve as your primary view, but instead it serves as a container for all the views added to your view stack. It also identifies your first view (via firstView="views.WhatsMyXboxUpToHome" in the MobileApplication tag), and it contains any common elements that might appear on all views.

In this application I've set up four views:

By default, a mobile Flex application contains a header area called an ActionBar as well as a set of views. Each view uses the View component as its base tag to specify the content that shows up in the ActionBar when that view is active. The ActionBar is made up of three sections: the navigationContent area on the left, the titleContent area in the center, and the actionContent area on the right. In the code below, you can see how I defined each of these areas within the GamerProfile view. The navigationContent contains a Back button, the titleContent contains the gamer tag, and the actionContent contains an e-mail button that uses an icon:

<s:navigationContent>
   <s:Button height="100%" label="< Back" click="viewEntries()"/>
</s:navigationContent>
<s:titleContent>
   <mx:Spacer width="10" />
   <s:Image id="myGamerimage" width="64" height="64" source="{model.info.tile}"/>
   <mx:Spacer width="10" />
   <s:Label id="myGamertag" text="{model.info.gamertag}"/>
</s:titleContent>
<s:actionContent>
   <s:Button icon="@Embed(source='assets/email_go.png')" height="100%" label="Share" click="emailEntry()" />
</s:actionContent>

Building the rest of the view should be straightforward for anyone with prior Flex experience. Flash Builder "Burrito" provides an enormous amount of assistance by favoring mobile-optimized components in code hinting and Design view. This is important not only for keeping the size of your application down but also because these components are designed to handle touch inputs and gestures that standard Spark components are not designed to handle, even if they will technically work on AIR for Android.

Using pushView(), popView(), and popToFirstView()

Within a mobile application, navigation is really a matter of adding or removing items from the view stack where the top item is the view currently being displayed. Adding and removing views within the stack is handled by three methods. The pushView() method adds a new View component to the stack. You simply pass three arguments: the View component to add to the stack, any data you want passed into that view, and the transition you would like to use if you aren't using the default. For example, the following method is triggered when you click a gamer entry in the List view:

protected function viewEntry(event:MouseEvent):void
{
   model.selectedEntry = entriesList.selectedItem as Entry;
   navigator.pushView(EntryDetail,model);
}

In my application, I have created a model ActionScript component where I am storing the data I use across all the views and simply passing this to each view when it is pushed to the stack. However, you can pass any arbitrary data you like when using the push() method. You do not need to use this particular design pattern.

To remove the current View from the stack, you can use the popView() method. You can trigger this manually via code, or it can be triggered by users pressing the Back button on their phone. For example, here is the code for the Back button in the navigationContent of my ActionBar on the GamerProfile view:

protected function viewEntries():void {
   navigator.popView();
}

It is important to note that you can only specify a transition in this case. You cannot pass data through this method. To pass data back to the prior view, you can override the createReturnObject method in the current view as follows:

override public function createReturnObject():Object {
   var foo:Object = new Object();
   foo.name = "bar";
   return foo;
}

Then in the prior view on the stack, you simply add code to handle the returned data in your viewActivate handler method like below:

if (returnedObject != null) {
     trace(returnedObject.name);
}

Finally, if you wish to go back all the way to the first view of the application, you can use the popToFirstView() method, which adheres to the same rules regarding passing data as the popView() method. For example, here is the code that is triggered when you click the Load A Different Profile button on the GamerProfile view:

protected function clearProfile():void {
   persistence.clear();
   navigator.popToFirstView();
}

(Note that I clear persistence here; Flex on AIR for Android comes with built-in persistence mechanisms that, due to space constraints, I cannot cover in this article.)

Triggering built-in phone features

In my application, I take advantage of the Android phone's ability to send e-mail to enable users to share their gamer entries or profile name easily. Triggering e-mail is incredibly simple and can be done with as little as one line of code using the navigateToURL() method. Below is the code from the GamerProfile view that triggers the e-mail application with the provided subject and body details:

protected function emailEntry():void {
   var subject:String = "Check out my XBox Live Profile";
   var body:String = model.info.gamertag + " from " + model.profile.getFullLocation() 
+ " wants to be your friend on XBox Live.";
   navigateToURL(new URLRequest("mailto:?subject=" + subject + "&body=" + body));
}

Jonathan Campos has written a good tutorial on how you can also use navigateToURL() to trigger text messages, phone calls, and websites from within your Flex application.

Deploying your first application

Deploying your mobile application to the desktop or a connected phone for testing using Flash Builder "Burrito" is extremely simple. In my testing, I generally created two run configurations: one for simulating a particular device's screen size on the desktop (Nexus One in my case), and one for running on the actual phone. The only difference between the two from a settings standpoint is that for the phone configuration you choose On Phone for the Launch Method option. Assuming your phone is connected (and a required USB driver is installed), this will push the application to your phone and run it.

Now you're a mobile Flex developer

I hope that this tutorial demonstrated just how easy (and fun) it is to build mobile applications for Android using Flash Builder "Burrito," Flex "Hero," and AIR for Android. In fact, while it isn't fully polished, the application we examined in this article could be built from scratch in only a few hours. I also recommend checking out Flex Mobile Development page on Adobe Labs that, among other things, offers a Mobile Test Drive that contains more details on how to connect to services you've created in PHP, Java, or ColdFusion.

‹ Back


Brian Rinaldi is as a Content and Community Manager for the Adobe Developer Center team, where he helps drive content strategy for HTML5 and JavaScript developer content. Brian blogs regularly at http://remotesynthesis.com and is a unreformed twitter addict @remotesynth.