First Flex Mobile Project in Flash Builder 4.5 Tutorial

 

This beginners tutorial will teach you how to create your first Flex Mobile Project in Flash Builder 4.5. We will create a simple application that displays Hello World on the mobile screen. You do not need any prior knowledge of Flash, ActionScript 3.0 or Flex to follow along with this introduction to mobile development. You will learn how to create code that will run on both Android and iPhone / iPad devices.

This tutorial describes how to create a Flex Mobile Project in Flash Builder 4.5. If you are looking for an tutorial on how to create an ActionScript Mobile Project in Flash Builder then you can find that here.

First of you need the program Flash Builder 4.5 from Adobe. If you do not have this program on your computer then go get it from Adobes site. You can download a 60 days free trial to get started. Install and start the program.

Okay so you have the program up and running. Now it is time to create your very first Flex Mobile Project. You have a menu bar at the top left corner. Locate File and click on it. Select New in the drop down menu that opens and then select Flex Mobile Project in the menu that opens to the right of the drop down menu.

Flex menu tree

This will open the Create a Flex Mobile AIR Project wizard. Enter the name of your project in the first text field. I choose HelloWorldMobileFlex as a project name. We can leave the rest of the settings as they are. Click on Next at the bottom of the window.

Flex project wizard

This screen is new to Flash Builder 4.5 and it is here that you specify mobile specific settings. Fist of you got Target platforms. Here you can select witch mobile platforms that you like to target with your application. BlackBerry Table OS and Google Android are available in Flash Builder 4.5, If you are missing Apple iOS then you need to get the latest version of Flash Builder. Apple iOS became available in Flash Builder 4.5.1. I will leave all three selected so that we can target them all.

Next is Application Template. Here you can select to us a Blank template, View-Based Application template or a Tabbed Application template. I will leave it at its default, View-Based. For this template you get to specify the initial view title, i changed it to "Hello World View". This will be the title displayed in the first view of the app.

Next to the Application Template tab is two more tabs, Permissions and Platform Settings. We will not need to go in to them for this simple tutorial.

At the bottom of the page we find three checkboxes.

  • Automatically reorient. If this is checked then the application will automatically reorient itself between landscape and portrait when the user rotates the mobile device.
  • Full screen. If this is check then the app will launch in full screen mode and hide the status bar at the top of the mobile device.
  • Automatically scale application for different screen densities. Selecting this option automatically scales the application and handles density changes when targeting your application across multiple device types with varying screen densities.
  • To keep it simple we will leave them all at default. Click on Finish at the bottom right of the window.

    Flex project wizard mobile settings

    This will create the project and open two files for you. We will work in the second file named HelloWorldMobileFlexHellloWorldView.mxml, Flex has already created the following code for us:

    <?xml version="1.0" encoding="utf-8"?>
    <s:View 
    	title="Helllo World View"
    	xmlns:fx="http://ns.adobe.com/mxml/2009" 
    	xmlns:s="library://ns.adobe.com/flex/spark">
    	<fx:Declarations>
    		<!-- Place non-visual elements (e.g., services, value objects) here -->
    	</fx:Declarations>
    </s:View>

    Notice the line title="Hello World View" this is the title we specified in the wizard. If we would run the app now then we would only see title bar with Hello World View in it. Lets add something else before we test the application. Lets write "Hello World" on the screen! For this we need to add the following to the code:

    <s:Label text="Hello World" />

    So now the code is:

    <?xml version="1.0" encoding="utf-8"?>
    <s:View 
    	title="Helllo World View"
    	xmlns:fx="http://ns.adobe.com/mxml/2009" 
    	xmlns:s="library://ns.adobe.com/flex/spark">
    	<fx:Declarations>
    		<!-- Place non-visual elements (e.g., services, value objects) here -->
    	</fx:Declarations>
    	<s:Label text="Hello World" />
    </s:View>

    Now we are ready to test the application! Press the Run button Run button. This will open the Run Configurations because this is the first time that we run this app. We will start by running the app on the desktop on an simulated mobile device. I have selected Google Android as the target platform and Google Nexus One as the mobile device to simulate. This is all we have have to do. Now press Run to test the app on the simulated mobile device.

    Run Configurations

    Hopefully you will see the following window open on your computer.

    Running the app on desktop

    Now you have created you very fist mobile application for an Android Phone and tested it on the desktop. But the fun has only begun. Lets test it on a real Android mobile phone. For the next part you will need an real phone or pad with Android Froyo, version 2.2, or higher and also needs to have Adobe AIR installed on the phone / pad.

    Now you need to prepare your Android device before we can run the app on the phone, start by enabling USB debugging. You find it in the your Android phone under Settings > Applications > Development, make sure that USB debugging is selected here. Then connect your Android phone to your computer using a USB cable.

    In Flash Builder click on the black down arrow next to the run button Run button arrow. and select Run Configurations in the drop down menu that opens. (Do not just click on the run button like before).

    Change the launch method to On device in the Run Configurations window that opens. Then click on the Run button in the window to run the application on our real Android device.

    This is my result running the application on a Samsung Galaxy S2.

    Running the app on a device

    You also need to have the correct drivers installed on your computer to be able to connect to the phone. For more information on this click on Device Connection Help found in the Run Configurations window.

    That concludes this tutorial about how to create your first Flex Mobile Project in Flash Builder 4.5. Learn more about ActionScript 3.0, Flash Builder 4.5 and the Flex framework in our other tutorials on this site. I hope you found this guide to be helpful.