In this exercise you use Flash Builder to create and produce the desktop application shown in Figure 1. You will also package it as an AIR application installer.

Figure 1. Your task is to create this desktop application.

In this exercise, you will learn how to:

• Create a Flash Builder Flex project for an AIR application
• Convert a Flex application to an AIR application
• Modify the application settings
• Produce an AIR application

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Download
• Learn more

Exercise files:

• ex5_08_starter.zip (ZIP, 2 MB)
• ex5_08_solution.zip (ZIP, 2.2 MB)

Prerequisite knowledge

• Exercise 1.1: Creating and skinning an application
• Exercise 5.7: Creating a Flex application and production build

Creating a Flash Builder Flex project for an AIR application

In this section, you will explore the contents of a Flash Builder projects bin-debug folder.

1. If you have not already, download and install Adobe AIR.
2. Download the ex5_08_starter.zip file if you haven't done so already and extract the file ex5_08_starter folder to your computer.
3. Open Flash Builder.

4. Select File > New > Flex Project (see Figure 2).

   

   Figure 2. Create a new Flex project.

5. In the New Project dialog box, type EmployeePortalDesktop for the project name.
6. Clear the Use default location check box.
7. Click the Browse button located next to the Folder field.

8. In the Select Project Location dialog box, navigate to the ex5_08_starter folder you extracted in Step 1 (see Figure 3).

   

   Figure 3. Select the folder extracted from the exercise files.

9. Click OK.

10. For the Application type, click the check box next to Desktop (see Figure 4).

    

    Figure 4. Configure the New Flex Project dialog box.

11. Click Next.
12. In the Output folder section of the New Project dialog box, click Next.
13. In the Create a Flex project section, to the right of the Main application file name field, click the Browse button.

14. In the Select Main Application File dialog box, select the EmployeePortal.mxml file (see Figure 5).

    

    Figure 5. Select the EmployeePortal.mxml file as the main application file.

15. Click OK.
16. In the New Flex Project dialog box, note the warning message at the top about the ID value.

17. At the bottom of the dialog box, in the ApplicationID text field, change the value to com.fiaw.EmployeePortalDesktop (see Figure 6).

    

    Figure 6. Set the Application ID value to com.fiaw.EmployeePortalDesktop.

18. Click Finish.

You should see the EmployeePortal.mxml file open in the editor view.

Converting a Flex application to an AIR application

In this section, you will learn how to convert a Flex application so that it may be published to the desktop.

1. In the EmployeePortal.mxml file, change the opening and closing Application tags to WindowedApplication tags:

   <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark"   
       xmlns:mx="library://ns.adobe.com/flex/halo" 
          width="980" height="690"
       xmlns:components="components.*" 
          skinClass="skins.ApplicationContainerSkin">
   ...
    
   </s:WindowedApplication>

2. Save the file and run the application.

   You should see the Adobe AIR dialog box open and display the error: Undefined state 'normalAndInactive' (see Figure 7).

   

   Figure 7. View the error message.

3. Click the Dismiss All button in the dialog box.

   You should see the EmployeePortal Air application open (see Figure 8).

   

   Figure 8. Preview the EmployeePortal desktop application.

4. Close the EmployeePortal AIR application.
5. Return to Flash Builder.
6. In the Package Explorer view, open the skins/ApplicationContainerSkin.mxml file.
7. Below the Properties of the parent comment, locate the states block.

8. Change the second state from disabled to normalAndInactive:

   <s:states>
       <s:State name="normal"/>
       <s:State name="normalAndInactive"
   />
   </s:states>

9. Save the file and run the application.

   You should see the application runs without errors.

10. Close the EmployeePortal desktop application.

Modifying the application settings

In this section, you will modify the way the desktop application will be displayed.

1. Return to Flash Builder.
2. From the Package Explorer view, open the EmployeePortal-app.xml file.
3. Locate and uncomment the systemChrome node on line 46.

4. Within the systemChrome tag set, enter the value none:

   <systemChrome>none</systemChrome>

5. Locate and uncomment the transparent node on line 49.

6. Between the transparent tags, enter the value true:

   <transparent>true</transparent>

7. Save the file.
8. Open the ApplicationContainerSkin.mxml file.

9. Below the UI components comment, locate and comment out the Rect primitive tag block:

   <!--<s:Rect width="973" height="636" x="0" y="0">
      <s:stroke>      
         <s:LinearGradientStroke weight="1"/>
      </s:stroke> 
   </s:Rect>-->

10. Save the file and run the application.

You should see the EmployeePortal application contains no border and has a transparent background (see Figure 9).

Figure 9. Run the application to see the change in the application.

Producing an AIR application

In this section, you will create a production build of the EmployeePortal Air application.

1. Return Flash Builder.

2. Select Project > Export Release Build (see Figure 10).

   

   Figure 10. Select Project > Export Release Build.

3. In the Export Release Build dialog box leave the default settings (see Figure 11).

   

   Figure 11. Leave the default settings.

4. Click Next.
5. In the Digital Signature section of the Export Release Build dialog box, click the Create button located to the right of the Certificate field.

6. In the Create Self-Signed Digital Certificate dialog box, enter epd (employee portal desktop) for the Publisher name, epd for the password, and epd for the Save as value (see Figure 12).

   

   Figure 12. Type epd for the Publisher name, password and Save as name.

7. Click OK.
8. Click Finish.

9. In the Package Explorer view, locate the EmployeePortal.air file (see Figure 13).

   

   Figure 13. View the EmployeePortal.air file in the Package Explorer view.

10. Double-click the file to run the installer and install the EmployeePortal desktop application.

Test your knowledge

In this exercise, you learned how to create an AIR application from a Flex application. You also learned how to create production builds for AIR applications.

What container tag is used for AIR applications within Flash Builder?

The WindowedApplication container tag.

What AIR property defines transparency for the AIR player?

The transparency property.

What AIR property must be set to none in order for the transparency property to take effect?

The systemChrome property.

About the author