Adobe Flex 3 Help

Creating your first Flex AIR application in Flex Builder

For a quick, hands-on illustration of how Adobe® AIR™ works, use these instructions to create and package a simple SWF file-based AIR "Hello World" application using Adobe Flex Builder 3.

If you haven't already done so, download and install Flex Builder 3. For more information, see Setting up the Flex 3 SDK.

Contents

Run Flex Builder and create an AIR project

Flex Builder 3 includes the tools you need to develop and package AIR applications. You begin to create AIR applications in Flex Builder in the same way that you create other Flex-based application projects, by defining a new project.

Create the project in Flex Builder

  1. Open Flex Builder 3.
  2. Select File > New > Flex Project.
  3. Enter the project name as AIRHelloWorld.
  4. In Flex, AIR applications are considered an application type. You have two type options: a Flex application that runs on the Web in Flash Player and an AIR application that runs on the desktop in the Adobe AIR runtime. Select Desktop Application as the application type.
  5. You won't be using a server technology, so select None, and then click Next.
  6. Select the folder in which you want place your compiled application. The default is the bin folder. Click Finish to create the project.

AIR projects initially consist of two files: the main MXML file and an application XML file (referred to as the application descriptor file). The latter file specifies parameters for identifying, installing, and launching AIR applications. There will be occasions when you will want to manually edit this file. For now, be aware that it exists.

Write the AIR application code

To write the "Hello World" application code, you edit the application MXML file (AIRHelloWorld.mxml), which is open in the editor. If it isn't, use the Project Navigator to open the file.

Flex AIR applications are contained within the MXML WindowedApplication tag. The MXML WindowedApplication tag creates a simple window that includes basic window controls such as a title bar and close button.

Add the code

  1. Add a title attribute to the WindowedApplication component, and assign it the value "Hello World":
    <?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">
    
</mx:WindowedApplication>
  2. Add a Label component to the application (place it inside the WindowedApplication tag), set the text property of the Label component to "Hello AIR", and set the layout constraints to keep it centered, as shown here:
    <?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">
    <mx:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/>
</mx:WindowedApplication>
  3. Add the following style block immediately after the opening WindowedApplication tag and before the label component tag you just entered:
    <mx:Style>
    WindowedApplication
    {
        background-color:"0x999999";
        background-alpha:"0.5";
    }
</mx:Style>

These style settings apply to the entire application and render the window background a slightly transparent gray.

The application code now looks like the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">
    <mx:Style>
        WIndowedApplication
        {
            background-color:"0x999999";
            background-alpha:"0.5";
        }
    </mx:Style>
    <mx:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/>
</mx:WindowedApplication>

Test the AIR application

To test the application code that you've written, run it in debug mode.

  1. Click the Debug button in the main Flex Builder toolbar.

    You can also select the Run > Debug > AIRHelloWorld command.

    The resulting AIR application should look like the following example (the green background is the desktop):

  2. Using the horizontalCenter and verrticalCenter properties of the Label control, the text is placed in the center of the window. Move or resize the window as you would any other desktop application.

Note: If the application does not compile, fix any syntax or spelling errors that you inadvertently entered into the code. Errors and warnings are displayed in the Problems view in Flex Builder.

Package, sign, and run your AIR application

You are now ready to use Flex Builder to package the "Hello World" application into an AIR file for distribution. An AIR file is an archive file that contains the application files, which are all of the files contained in the project's bin folder. In this simple example, those files are the SWF and application XML files. You distribute the AIR package to users who then use it to install the application. A required step in this process is to digitally sign it.

Packaging an AIR application

  1. Ensure that the application has no compilation errors and runs as expected.
  2. Select Project > Export Release Version.
  3. If you have multiple projects and applications open in Flex Builder, you must select the specific AIR project you want to package.
  4. Select the Export and Sign an AIR File with a Digital Certificate option.
  5. If you have an existing digital certificate, click Browse to locate and select it.
  6. If you must create a new self-signed digital certificate, select Create.
  7. Enter the required information and click OK.
  8. Click Finish to generate the AIR package, which is named AIRHelloWorld.air.

You can now run the application from the Project Navigator in Flex Builder or from the file system by double-clicking the AIR file.

See also