Flash Builder 4.5 Mobile Application for Acer Iconia A500 Tablet

This blog post will discuss making a simple mobile application using Flash Builder 4.5. I will be targeting the Acer Iconia A500 Tablet because it is currently the only mobile device that I have access to, but it should be relevant to other mobile devices too. The Acer Iconia A500 Tablet runs on Google Android 3.0 (Honeycomb). For a full review of the tablet, read this article. It sells for around $450 for the 32GB version.

Step 1 - configure the tablet

On the tablet go to Settings - Applications - Development
Check the USB Debugging option. This allows Flash Builder to debug applications straight on to the tablet through USB. Next, connect the tablet to your computer using the USB cable provided.

Step2 - create a mobile project

Inside Flash Builder, create a new Flex Mobile Project.
Give it a name like TabletApp. Click Next.

Select the desired target platform(s). For the Acer Iconia and other Andoid tablets, check the Google Android checkbox. You can choose the mobile app template to use here as well.
Important: your mobile application might need to have access to the internet, the file system, the gps, etc. Under the Permissions tab, choose the Google Android platform, and check any of the permissions that your application needs.
For my sample application I chose the INTERNET, WRITE_EXTERNAL_STORAGE, and ACCESS_FINE_LOCATION (GPS) permissions.

Click next. Set up the build path if necessary, or leave it to the default values.

Once the project is created, Flash Builder will open the two main files - TabletApp.mxml (the main application file), and TabletAppHomeView.mxml (the default home view component). Add in some components to the home view like a button or a label.

Step 3 - Run the application on the tablet

Now, to test our your application on the Acer Iconia Tablet, make sure it is connected by USB, and that you followed the step above on the tablet to enable USB debugging.

Under the Run menu, choose Debug Configurations.... Add a new Mobile Application launch configuration. Choose your project and application, and the target platform (Google Android in this case).

Under where it says "Launch method", choose the On device radio button. If you have trouble connecting, then read the Device connection help page.

If all works as planned, you should see on the tablet the simple application that you created.

Step 3b - Run the application on the desktop

If you want to test out your application without running it on the tablet, you can run it on the desktop by choosing the other radio button option - On desktop. There is a list of pre-configured devices, but the Acer Iconia tablet isn't in the list. So click Configure... and then Add to add it to the list. Here are the specs:

I've put together a simple app that shows some of the properties available to mobile applications. Click the screenshot below to see the full size.

You can download the project file here. In Flash Builder choose "File - Import...", and then choose "Flash Builder - Flash Builder Project", and select the downloaded fxp file.

Loading Remote SWFs and parameters

Here is another example of one SWF loading another SWF and how parameters can be passed through the url.

The main application (called Loader1) has a panel which displays information about the current application, parameters, url etc.

The main application loads a remote application SWF (called Loader2) which also has the same panel displaying information about the application, parameters, url, etc. The differences are highlighted in bold.

Here is the code for loading a remote swf - notice how parameters are passed into the url:

private function loadRemoteSWF():void {     var remoteSwfUrl:String =          "http://keg.cs.uvic.ca/flexdevtips/loaders/Loader2.swf?loaderurl=hello";     var loader:SWFLoader = new SWFLoader();     loader.addEventListener(Event.COMPLETE, remoteSWFLoaded);     loader.load(remoteSwfUrl); } private function remoteSWFLoaded(event:Event):void {     var loader:SWFLoader = event.currentTarget as SWFLoader;     ui.addChild(loader.content); // ui is a UIComponent }

In the remote application you can access the parameters that were passed in from the main application through the SWFLoader by the parameters property, but you MUST be inside the remote application MXML (e.g. in this case in Loader2.mxml), otherwise if you use Application.application.parameters this will refer to the parameters from the main application and not the ones that were passed in using the SWFLoader.


Source Code:

• Loader1 (Main Application), or right click View Source
• Loader2 (Remote SWF Application)