Developing, running and packaging AIR mobile applications for Android

From IntelliJ-Wiki

Jump to: navigation, search

This tutorial walks you through the main tasks related to developing AIR mobile applications for Android devices in IntelliJ IDEA:


Before you start

  • Download and install the latest version of Apache Flex Software Development Kit (SDK). (You need a Flex SDK for producing Adobe Flash Player, Adobe AIR and AIR mobile-oriented Flex applications.)
  • Download and install the latest version of Adobe AIR SDK.
  • Copy all the contents of the AIR SDK installation folder into the Flex SDK installation folder. (Generally, a Flex SDK includes an AIR SDK as its part. Depending on a version, however, a Flex SDK may be incomplete or outdated in its AIR part. That is, not all of the files present in the latest AIR SDK version may be included, certain files may be out-of-the-date, etc. To avoid related problems, it's worth "updating" your Flex SDK using the AIR SDK as a source.)
    For Mac OS X users: Don't use the Finder for copying. Instead, open the Terminal window and run the following command:
    ditto <path_to_air_sdk_installation_folder> <path_to_flex_sdk_installation_folder>
    (There are also other commands for performing the same operation, see Merging directories on Mac OS X.)
  • Get an Android 2.2+ mobile device (e.g. a phone) to be able to run a sample application on it. Besides, you can view here the addition article that can help you.

Making sure that the Flash/Flex Support plugin is enabled

IntelliJ IDEA’s support of Flash and related technologies (AIR, AIR mobile) is based on the Flash/Flex Support plugin. So, the first thing to do is to make sure that this plugin is enabled:

1. Open the Settings dialog (e.g. by pressing CTRL+ALT+S).

2. In the left-hand pane of the dialog, under IDE Settings, select Plugins (1 on the picture below).

3. On the Plugins page that opens in the right-hand part of the dialog, type fl in the search box (2). As a result, only the plugins whose names and descriptions contain fl are shown in the list.

Make sure that the check box next to Flash/Flex Support is selected (3).


4. Click OK (4).

5. If suggested, restart IntelliJ IDEA.

(For more information on working with plugins, see Managing Plugins in IntelliJ IDEA Help.)

Specifying a Flex SDK and adding documentation URL

IntelliJ IDEA should be aware of your Flex SDK to be able to use it. To specify the Flex SDK in the IDE:

1. Open the Project Structure dialog (e.g. CTRL+ALT+SHIFT+S).

2. In the leftmost pane, under Platform Settings, select SDKs (1). Above the pane to the right, click File:I12IconAdd.png (2) and select Flex/AIR SDK (3).


3. In the Select Home Directory for Flex SDK dialog that opens, select the directory in which you have the desired Flex SDK installed (1).


Click OK (2) or press ENTER.

The specified Flex SDK is added to IntelliJ IDEA.


4. Though this is optional, add the URL of online Flex SDK documentation to the SDK configuration. (Later, we’ll show how to use this documentation when working with your code.)

To specify the documentation URL, select the Documentation Paths tab (1) and click File:I12AddDocURLIcon.png (2) (alternatively, press ALT+S).


The Specify Documentation URL dialog that opens already contains the URL that you want.


So, just click OK or press ENTER to accept the specified URL and close the dialog.

The URL is shown on the Documentation Paths tab.

5. At this step, configuring the Flex SDK is complete. Click OK in the Project Structure dialog.

(For more information on working with SDKs, see SDK and SDKs in IntelliJ IDEA Help.)

Creating a project

Any new development in IntelliJ IDEA starts with creating a project. (To find out why a project is needed, see Project in IntelliJ IDEA Help.)

So now we are going to create a project suitable for AIR mobile application development, that is, a project with a Flash module.

To create such a project:

1. If no project is currently open in IntelliJ IDEA, click Create New Project on the Welcome screen. Otherwise, select New Project from the File menu.

As a result, the New Project wizard opens.

2. In the left-hand pane, select Flash Module (1).

3. In the right-hand part of the page, in the Project name field, type the name of your new project (e.g. HelloWorld) (2).


4. Click Next (3).

On the next page of the wizard, specify initial setting for your new Flash module:

5. Select Mobile from the Target platform list (1). (The application that we are going to develop is intended for the AIR mobile platform).

6. Clear the iOS check box (2). (This disables generating the output for iOS devices. When the project is created, you'll be able to change this setting if necessary.)

Note that the Create sample app option is selected. IntelliJ IDEA, will create a sample application as part of the project creation process. We'll use this application for showing certain IntelliJ IDEA features and also as the basis for our own application development.


7. Click Finish to complete the wizard (3).

Wait while IntelliJ IDEA is creating the necessary project structures. When this process is complete, you can see the structure of your new project in the Project tool window (in the left-hand part of the workspace). At the same time, the file HelloWorld.mxml which represents the sample application opens in the editor (in the right-hand part of the workspace).

Exploring the project structure

Let’s take a quick look at the project structure.


There are two top-level nodes in this structure:

  • HelloWorld. This node represents your Flash module. The .idea folder and the file HelloWorld.iml inside are used to store configuration data for your project and module respectively. The folder src is for your source code. At the moment, this folder contains only one file, the main sample application file HelloWorld.mxml.
  • External Libraries. This is a category that represents all the "external" resources necessary for your development work. Currently in this category are the .swc files that make up your Flex SDK.

(For more information on tool windows in general and the Project tool window in particular, see IntelliJ IDEA Tool Windows and Project Tool Window in IntelliJ IDEA Help.)

Running the sample application

Applications in IntelliJ IDEA are run according to what is called run/debug configurations. Such configurations, generally, should be created prior to running an application. (For more information, see Running, Debugging and Testing and Running and Debugging ActionScript and Flex Applications in IntelliJ IDEA Help.)

In our case, however, we already have one run configuration. When creating a Flash module, we specified that we'd like the sample application to be created. So, IntelliJ IDEA has created HelloWorld.mxml containing the application source code and also a run configuration for running this application.

Let's take a quick look at this run configuration.

Accessing run configuration settings

One of the possible ways to access run configuration settings is by using the main toolbar. There is an area there containing controls related to running applications. These include the run/debug configuration selector and icons for running applications in various modes.


The configuration selector, obviously, lets you select a run/debug configuration that you want to be used. It also lets you access the run/debug configuration settings. To open these settings, select Edit Configurations.


The Run/Debug Configurations dialog opens showing the settings for the run configuration HelloWorld.

Exploring the run configuration settings

The Run/Debug Configurations dialog, at the moment, looks similar to this:


As you can see:

  • The run configuration has a build configuration associated with it (shown in the Build configuration field). (See the discussion of build configurations in IntelliJ IDEA Help.)
  • The application is going to be run using an emulator of an Android device (the Emulator option is selected).
  • An auto-generated application descriptor will be used (as set for Android: generated in the App descriptor field means as specified for Android in the associated build configuration. Later, we'll see that the use of auto-generated application descriptor is currently specified in the corresponding build configuration).
  • Prior to running, IntelliJ IDEA will automatically build the application (the Before Launch task list includes the Make option).

(To find out more about the settings in this dialog, use the Help button (alternatively, F1). This will open the dialog description in IntelliJ IDEA Help.)

We are going to use the run configuration HelloWorld as is and won't make any changes to it. Click OK to close the dialog.

Studying the source code. Using online documentation

To find out what to expect when running the sample application, let's take a look at its source code (HelloWorld.mxml).


The source code is very simple, and you can, possibly, guess at a glance what it does. Even so, we suggest that you make use of the context-sensitive online documentation to study the code. Though this might be unnecessary in this particular case, you may find this ability very useful in other circumstances.

(When configuring the Flex SDK we specified the documentation URL. So, the online documentation is only a couple of clicks away from you now.)

Place the cursor within ViewNavigatorApplication and press SHIFT+F1. The description of the ViewNavigatorApplication class opens in your default Web browser. Read more the description and then switch back to IntelliJ IDEA.

Repeat this procedure for navigationContent, Button, label, click and popToFirstView(). Finally, you’ll know that there is one screen (view) in the application that contains the Home button which doesn't really do anything useful.

Let's now see that this is so by running the application.

(As an alternative to SHIFT+F1, you can also use CTRL+Q. In this case, the documentation extracted from the Flex SDK sources will be shown. For more information on working with documentation, see Viewing Reference Information in IntelliJ IDEA Help.)

Running the application

1. To run the application, click File:I12RunIcon.png on the toolbar. (Alternatively, press SHIFT+F10).

As a result, the Run tool window opens at the bottom of the screen. This tool window is responsible for displaying all the output from executed run configurations. (For more information, see Run Tool Window in IntelliJ IDEA Help.)


At the moment, the tool window contains only the command line IntelliJ IDEA used to run the application, including all options and arguments.

After a while, the emulator window opens with the sample application running in it.


2. You can give the Home button a couple of clicks to see that it reacts somehow. There's nothing more you can do with the application at the moment, so close the emulator window.

The Run tool window responds by outputting Process finished with exit code 0 (meaning that the application has been successfully stopped.)


3. Close the Run tool window by clicking File:I12CloseIcon.png. (If you don’t see this icon, point to the leftmost File:Flex_more.png‎ first.)


To complete this discussion, there are more options for running and debugging applications in the Run menu.


The options for running applications and for working with run/debug configurations, if appropriate, are also present as context menu commands in the Project tool window and the editor.

Expanding the application

Now we are going to expand the sample application to show some of the coding assistance features.

The application we are aiming at will contain two screens (views). The first of the screens, the Home screen, will contain the Say Hello button. Tapping this button will display the second of the screens, the Hello screen. This screen will show the text Hello, World! and contain the Back button. Tapping Back will bring you back onto the first of the screens.

File:HomeScreenOnDeviceRE1.png   File:HelloScreenOnDeviceRE1.png

The application file structure and code

The application in its final state will include three .mxml files.

HelloWorld.mxml (which already exists) will just define the initial application view. Here is what it will look like:

<?xml version="1.0" encoding="utf-8"?>

The remaining two files (HomeView.mxml and HelloView.mxml) which we'll create in the views package will implement the application views. (The views package doesn't yet exist and we'll create it as well.) Here is the source code for these files:


<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx=""
    <s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
        <s:Button label="Say Hello" click="navigator.pushView(HelloView)"/>


<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx=""
    <s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
        <s:Label text="Hello, World!"/>
        <s:Button label="Back" click="navigator.popView()"/>

Modifying HelloWorld.mxml. Creating views.HomeView.mxml from its usage

1. First of all, let’s get rid of unnecessary code in HelloWorld.mxml, namely:

    <s:Button label="Home" click="navigator.popToFirstView()"/>

To do that, select the corresponding code lines and press DELETE.

2. Now place the cursor between spark" and > and press ENTER to start a new line.

3. Type f and select firstView from the suggestion list. (You can use the UP and DOWN arrow keys for moving within the list and ENTER for selecting a highlighted item).


4. Between the quotation marks (that are added automatically), type views.HomeView.


Note that views and HomeView are red. This is because IntelliJ IDEA doesn’t know what these are and marks them as an error. (In fact, the referenced view HomeView and the package views don’t exist.)

Also note a light bulb File:I12ErrorIcon.png‎ at the beginning of the line. This indicates that there is a quick fix available for the current context.

5. To access the quick fix list, click the light bulb or press ALT+ENTER.


6. Select Create View 'HomeView' (ENTER).

7. In the dialog that opens, confirm that you want to create the package views by clicking Yes. (Alternatively, press ENTER).


As a result, the package views and the file HomeView.mxml are created.


At the same time the new file (HomeView.mxml) opens in the editor.


Before we start editing HomeView.mxml, let's summarize what we've just seen.

You don't need to create entities such as packages, classes, etc. prior to referencing them in your code. Instead, you can reference the entities that don’t yet exist and then use a corresponding quick fix to create the referenced entities.

(For more information on quick fixes and related features, see Intention Actions in IntelliJ IDEA Help.)

Writing code for HomeView.mxml

Let’s start modifying the file by adding the title attribute to <s:View>.

1. Place the cursor between spark" and > and press ENTER to start a new line.

2. Type ti and select title.


3. Between the quotation marks, type Home.

4. Go to the end of the current line (press END) and press ENTER to start a new line.

What’s left to be added is this:

<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
    <s:Button label="Say Hello" click="navigator.pushView(HelloView)"/>

The quickest way to add this fragment is by moving from the "inside outward", that is, by adding <s:Button> first and then "wrapping" it in <s:Group>.

5. Type <s:B and select s:Button.


6. Type / to close the tag.

7. Place the cursor between Button and /. Type space, then l and select label.

8. Between the quotation marks, type Say Hello.

9. In a similar way, add the remaining attribute and its value (click="navigator.pushView(HelloView)").


Note that HelloView is red because a non-existing view is referenced. Now we are going to use a quick fix to create this view (the way we did to create HomeView.mxml).

Creating HelloView.mxml

1. Press ALT+ENTER and select Create View 'HelloView'.


2. In the dialog that opens, click OK to confirm that you want to create the view in the package views.


The file HelloWorld.mxml is created and opened in the editor.

Completing the code for HomeView.mxml. Using the Surround With operation

1. Go back to editing HomeView.mxml. (To switch between the editor tabs using the keyboard, press ALT+LEFT ARROW or ALT+RIGHT ARROW.)

2. Highlight <s:Button label="Say Hello" click="navigator.pushView(HelloView)"/> and select Surround With from the Code menu (alternatively, press CTRL+ALT+T).

3. In the Surround With menu, select Surround with <tag></tag>.


A pair of tags (<>...</>) is added that surrounds the <s:Button> element.

4. Within the opening tag, type s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center".


5. When the opening <s:VGroup> is completed, press ESCAPE.

6. Delete the empty lines. (You can use CTRL+Y to delete a current line.)

Developing the code for HelloView.mxml

Because the code in HelloView.mxml is going to be similar to that in HomeView.mxml, let's start by copying all the contents of HomeView.mxml into HelloView.mxml and then make the necessary changes:

1. To select all the contents of HomeView.mxml, press CTRL+A. Then, to copy the selected contents to the clipboard, press CTRL+C.

2. To switch to HelloView.mxml, press ALT+RIGHT ARROW.

3. Now to replace the contents of the file with the contents of the clipboard, press CTRL+A and then press CTRL+V.

4. Change the value of the title attribute from Home to Hello.

5. Start a new line after the <s:VGroup> opening tag.

6. Using code completion, type <s:Label text="Hello, World!"/>.

7. Within <s:Button .../>, change the label from Say Hello to Back, and replace pushView(HelloView) with popView().


The source code of the overall application is now ready.

We could run the application right away the way we did before but let's first have a look at a bit different thing, an AIR application descriptor template that you are most likely to deal with in your development work.

Creating an AIR application descriptor template

An auto-generated application descriptor (see a definition of the application descriptor in Adobe AIR documentation) was created when we ran Hello World for the first time. Though that let us run the application, this is, basically, the only good thing about an auto-generated descriptor.

In fact, you have very limited control over that kind of descriptor. In practice, you are more likely to be using a descriptor template which can be flexibly adjusted to your needs. In this section, we'll show how to create such a template and briefly discuss its contents.

Functions for creating the descriptor templates can be found in the UI for working with Flash build configurations. (See the discussion of build configurations in IntelliJ IDEA Help.) So now we are going to take a look at this UI and create the template.

Opening build configuration settings

Build configurations for Flash modules are managed in the Project Structure dialog. To open this dialog, generally, you can use File | Project Structure, the toolbar icon File:I12ProjectStructureIcon.png, or CTRL+ALT+SHIFT+S. However, for accessing build configurations, there is a shortcut on the Status bar. Let's use this shortcut:

In the right-hand part of the Status bar, click HelloWorld (app) (1) and select Project Structure (2).


The build configuration settings are shown in the Project Structure dialog.

Note where in the Project Structure dialog the build configurations are located. (They appear as elements of a Flash module.)


At the moment, there is one (Flash) module HelloWorld and one build configuration with the same name. (This build configuration was created automatically when creating our Flash module.)

The build configuration settings are shown in the right-hand part of the dialog, on the Build Configuration page.

Exploring general build configuration settings

The settings on the General tab all seem to be clear. (To see their explanations, click the Help button or press F1.)

Basically, there is only one thing that we'd like you to note. This is where the module output is generated and stored (the Output folder field). By default, this is <project_folder>\out\production\<module_name>.


Creating the descriptor template

1. The settings and functions related to Android (including those for creating the application descriptor template) are on the Android tab. So, click this tab (1).

Note that at the moment an auto-generated application descriptor is used (the Generated option is selected under Application descriptor).


Now, to create the template:

2. Under Application descriptor, select Custom Template (2) and click Create (3).

The Create AIR Descriptor Template dialog opens. Note the template file name and location. If interested, also take a look at other settings. These will affect the initial template contents and may be edited manually when the template has been created. (As in most of the cases, you can use the Help button or F1 for opening the dialog description.)


3. Click Create.

4. Click OK in the Project Structure dialog.

As a result, the template file is created which you can see in the Project tool window.


Let's take a quick look at the template contents.

Exploring the descriptor template

Open the template file in the editor. To do that, select the template file in the Project tool window and press F4.


Almost all that the template contains goes to the descriptor file as is. (The descriptor is generated in the output folder each time the module is built.)

The only variable part in the template is the <content> element (within <initialWindow>).


When generating the descriptor, the text SWF file name is set automatically at compile time is replaced with the name and extension (.swf) of the application file.

So, to control the descriptor contents, you will, generally, comment and uncomment elements, change their content, add new elements and so on.

(To uncomment a commented element, place the cursor within the element and select Code | Comment with Block Comments or press CTRL+SHIFT+SLASH. In the same way you can comment an element. However, in this case you should highlight the element first.)

Preparing run configurations

Now we are going to:

  • See that the use of the template-based descriptor has been automatically set in the run configuration for the emulator (HelloWorld).
  • Create a configuration for running the application on a real Android device.

Checking the existing configuration

Open the HelloWorld run configuration as we did before.

Note the setting in the App descriptor (emulator) field. Now, it's as set for Android: HelloWorld-app.xml (it was as set for Android: generated before and now changed because we changed the descriptor settings in the associated build configuration HelloWorld (app)).


This is fine, so no changes are necessary in this run configuration.

Creating a run configuration for an Android device

To create a run configuration for an Android device, we will create a copy of the existing configuration (HelloWorld) and then adjust the settings. (The alternative way is to create a run configuration from scratch by using File:I12IconAdd.png).

1. Click Copy Configuration File:I12CopyConfigIcon.png (1) (CTRL+D). As a result, a copy of the run configuration with the name HelloWorld (1) is created.

2. Let's change the name to HelloWorldD (D for Device) to distinguish this configuration from the one intended for the emulator (2).

3. Under Run on, select Android device (3).


No other changes in this run configuration are needed.

4. Click OK in the Run/Debug Configurations dialog to save the changes made (4).

Running the application on the emulator

To run the application using the emulator-oriented run configuration:

1. Select the HelloWorld run configuration.


2. Click Run File:I12RunIcon.png (SHIFT+F10).

The result is similar to that we had when running the sample application for the first time. What is now different is the application behavior.

3. Play with the application in the emulator for a little while, and then close the emulator window.

4. Close the Run tool window.

Running the application on an Android device

Before running the application we have to prepare the device and, on Windows, possibly, also to install a USB device driver.

Preparing the device

To prepare the device, you should set the default USB connection type to Charge only and also turn USB debugging on.

To set the USB connection type:

1. Press the menu button and tap Settings.

2. On the Settings screen, tap Connect to PC.

3. On the USB connection type screen, tap Default connection type and then tap Charge only.

File:01_select_settings.png   File:02_settings.png   File:03_usb_connection_type.png

Now to turn USB debugging on:

1. Go back to the Settings screen and tap Applications.

2. On the Applications screen, tap Development.

3. On the Development screen, select the USB debugging check box. Optionally, just for convenience, select Stay awake (Screen will never sleep while charging).

File:04_applications.png   File:05_development.png

Connect the device to your PC using the USB cable.

Installing the device driver on Windows

For a Windows PC to communicate with an Android device, the corresponding device driver is needed. Sometimes, the driver is installed automatically as soon as you connect the device to your PC. If this doesn’t happen, you can install the driver included in your Flex SDK (the corresponding drivers are located in <flex_sdk_installation_folder>\install\android\usb_drivers):

Just in case, here are the instructions (if you know how to install the driver, skip the instructions and proceed to running the application).

1. Click Start File:start_button_19_19.png (1), right-click Computer (2) and select Manage (3).


2. In the Computer Management dialog, under Computer Management (Local), select Device Manager (1).

3. In the second-from-the-left pane find Android Phone (it may be within the Other devices category). Right-click it (2) and select Update Driver Software (3).


The Update Driver Software wizard opens.

4. Click Browse my computer for driver software.


5. In the Browse For Folder dialog, select the folder that contains the necessary drivers (1) (<flex_sdk_installation_folder>\install\android\usb_drivers) and click OK (2).


6. In the Update Driver Software wizard, under Search for driver software in this location, select Include subfolders (1) and click Next (2).


7. If a Windows security warning is displayed that looks similar to this:


click Install this driver software anyway.

The driver is being installed. When this process is complete, the following page of the wizard is displayed:


8. Click Close.

In the Computer Management dialog, Android Composite ADB Interface (ADB stands for Android Debug Bridge) is shown under Android Phone which means that the driver has been successfully installed, and your PC can now properly communicate with your Android device.


9. Close the Computer Management dialog.

Running the application

Now, to run the application:

1. Select the run configuration HelloWorldD.


2. Click Run File:I12RunIcon.png (SHIFT+F10).

A set of messages is displayed describing the application installation process (creating an Android package, checking for the previous installed version of the application and uninstalling it, if found, and so on). When the installation process is complete, the following is shown in the lower-left corner of the workspace:


At the same time, the starting screen of the application is shown on your device.

3. To check if everything is fine with the application, tap Say Hello and then Back when the second of the screens is shown.

File:HomeScreenOnDeviceRE1.png   File:HelloScreenOnDeviceRE1.png

Uninstalling the application (optional)

Optionally, uninstall the application:

1. Go to Settings | Applications | Manage applications.

2. Tap HelloWorld, and then tap Uninstall. Confirm your intention to uninstall the application by tapping OK.

File:I12FlPriorToDeinstalling.png   File:I12FlDeinstall.png   File:ConfirmUninstall.png

Packaging the application

Once your AIR mobile Android application is tested and ready, you can package it for distribution. This is how you do that in IntelliJ IDEA:

1. Select Package AIR Application from the Build menu.


2. In the Package AIR Application dialog that opens, select the necessary options for your Android package and click Package. (Click Help (F1) to see a detailed description of this dialog.)


Wait while IntelliJ IDEA is packaging your application. When the process is complete, the following message appears in the upper-right part of your workspace:


Exploring the output folder

To open the output folder in your file manager (e.g. Windows Explorer), click the HelloWorld.apk link under AIR application created (see the picture above). As a result, you may see something similar to this:


By now, the output folder (<project_folder>\out\production\<module_name>) contains the following files:

  • HelloWorld.apk is your Android application package.
  • HelloWorld.swf is your application file.
  • HelloWorld-app.xml is your template-based AIR application descriptor.

At this step our exercises are complete, and we hope that you now have a general idea of how to develop AIR mobile applications in IntelliJ IDEA. Special thanks to the app development company for assistance.

Personal tools