O'Reilly logo

Developing Android Applications with Flex 4.5 by Rich Tretola

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 1. Hello World

This section will walk you through building your first AIR on Android application using Adobe Flash Builder 4.5. If you don’t have Flash Builder 4.5, you can get a trial version from Adobe at http://www.adobe.com/products/flashbuilder/.

Now that you have Flash Builder 4.5 installed, open it, and let’s get started.

Create a Flex Mobile Project

Create a new Flex Mobile Project by choosing File→New→Flex Mobile Project, as shown in Figure 1-1.

Creating a Flex Mobile Project
Figure 1-1. Creating a Flex Mobile Project

This will open the New Flex Mobile Project wizard, which will walk you through the rest of the project creation process. The first screen you are presented with will allow you to set the project name, location, and Flex SDK. Enter the name HelloWorld as the project name, and leave the other settings on their defaults. Click Next, as shown in Figure 1-2.

Establishing a project name and location
Figure 1-2. Establishing a project name and location

The second screen in the new project wizard is where you can select settings specific to the target platform. Unless you have installed a plug-in to add additional platforms, you will only have one option—Google Android, which is already selected as the target platform. Google Android gives you the option of three different application types, which are Blank, View-Based Application, or Tabbed Application. For this first project, please select View-Based Application, as shown in Figure 1-3, and leave the other settings on their defaults.

Selecting an application template
Figure 1-3. Selecting an application template

Next, click on the Permissions tab. Within this tab, you will be able to select the permissions that your application will need in order to interact with the native Android APIs. Please be sure to only select the permissions that apply to your application, as once your application is uploaded to the Android Market, these permissions will be used to filter the devices that will be able to install your application. For example, if you select Camera as a required permission and your application doesn’t actually use a camera, any Android device that doesn’t have a camera will never be able to install your application. For the purposes of this exercise, leave only the INTERNET permission selected, as shown in Figure 1-4. Click Next.

Setting Android permissions
Figure 1-4. Setting Android permissions

The next screen allows for the configuration of an application server and output folder. For this project we will not be using an application server, so leave it set to None/Other, and click Next as shown in Figure 1-5.

The Server Settings screen
Figure 1-5. The Server Settings screen

The last screen that you will see in the wizard is the Build Paths screen, where you will be able to set your Application ID. This setting is very important, as Google uses this to identify your application in the Android Market. To ensure that your application has a unique identifier, the reverse domain naming convention works best. Figure 1-6 shows the value of com.domain.mobile.HelloWorld as the application ID. By replacing the word domain with a domain that you own, you can ensure that your application ID is unique. Complete this step and click Finish.

Adding an Application ID
Figure 1-6. Adding an Application ID

Flash Builder will now create your new project, and by default, HelloWorldHomeView.mxml will be created and opened in the workspace along with the HelloWorld.mxml main application file. This is shown in Figure 1-7.

A new project has been created
Figure 1-7. A new project has been created

Let’s update the contents of HelloWorldHomeView.mxml by adding a Label:

<?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="HomeView">
    <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Label text="Hello World" fontSize="24"
               horizontalCenter="0" verticalCenter="0"/>

</s:View>

Now we can run the application. To do this, right-click on the HelloWorld.mxml file within the Package Explorer and select Run As→Mobile Application, as shown in Figure 1-8. Since this is our first time running this application, the Run Configurations window will open. To run this using the Flash builder emulator, select “On desktop” as the Launch method and select a device from the drop-down menu, as shown in Figure 1-9.

Note

If you have an Android device, you can plug it into a USB port and select “On device” to run the Hello World application on your phone.

Now click Apply, and then click Run—you will see the Hello World application launch within the desktop simulator or on the device. Figure 1-10 shows Hello World running on a device.

Congratulations: you have just created your first AIR on Android application with Adobe Flex 4.5.

Running an application on a mobile device
Figure 1-8. Running an application on a mobile device
The Run Configurations window
Figure 1-9. The Run Configurations window
The Hello World application in action
Figure 1-10. The Hello World application in action

Debug a Flex Mobile Project

Now that you have created your Hello World application and ran it using the Run Configurations window, you may wish to debug your application. Fortunately for you, the workflow for debugging a Flex Mobile application is the same as debugging any other Adobe Flex or Adobe AIR application.

Update the HelloWorld.mxml file to include a creationComplete handler as shown here:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplicationxmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        firstView="views.HelloWorldHomeView"
        creationComplete="viewnavigatorapplication1_creationCompleteHandler(event)">
    <fx:Script>
          <![CDATA[
               importmx.events.FlexEvent;

               protectedfunction viewnavigatorapplication1_creationCompleteHandler
                           (event:FlexEvent):void
               {
                     // TODO Auto-generated method stub
                     trace("hello world");
               }

          ]]>
    </fx:Script>
    <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
</s:ViewNavigatorApplication>

We now need to toggle a breakpoint within the application on line 14, to demonstrate a debugging session. To do this, right-click on line 14 within Flash Builder and select Toggle Breakpoint from the context menu. Figure 1-11 shows this process. A small blue dot will appear in the gutter, showing that the break point is enabled.

Toggling a breakpoint
Figure 1-11. Toggling a breakpoint

We are now ready to debug this application. To do this, right-click on the HelloWorld.mxml file within Package Explorer and select Debug As→Mobile Application, as shown in Figure 1-12. Since this is our first time debugging this application, the Debug Configurations window will open. To debug this using the Flash builder emulator, select “On desktop” as the Launch method and select a device from the drop-down menu, as shown in Figure 1-13.

Debugging an application on a mobile device
Figure 1-12. Debugging an application on a mobile device

Note

As mentioned earlier, if you have an Android device, you can plug it into your USB port and select “On device” to debug the Hello World application on your phone.

When asked if you would like to switch to the Flash Builder debug perspective, select “Yes” (see Figure 1-14). Figure 1-15 shows the application paused on line 14 within Flash Builder’s debug perspective. You can see the trace message within the console panel. To allow the application to complete, click the Resume button.

Congratulations: you have just completed your first Flash Builder debug session for a Flex Mobile application.

The Debug Configurations window
Figure 1-13. The Debug Configurations window
Confirming the switch to debug perspective
Figure 1-14. Confirming the switch to debug perspective
The Hello World application paused on line 14
Figure 1-15. The Hello World application paused on line 14

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required