Requirements

 

Prerequisite knowledge
Required products
Flash Builder 4.7 Premium (Download trial)

 

Exercise files

 

User level
All
 
 
In this exercise you use Flash Builder to create a production build of the Flash application shown in Figure 1.
 
You create a production build of this application.
Figure 1. You create a production build of this application.
 
In this exercise, you will learn how to:
 

 
Create 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_11_starter.zip file provided in the Exercise files section and extract the ex5_11_starter folder to your computer.
  3. Open Flash Builder.
  4. Import the ex5_11_starter.fxp file.
  5. Run the application.
    You should see the application shown in Figure 2.
 
Run the application.
Figure 2. Run the application.
 
  1. Select File > New > Flex Project.
 
  1. In the New Project dialog box, type ex5_11_desktop for the project name.
  2. Uncheck the Use default location check box.
  3. For the Application type, select the Desktop option.
    Your New Flex Project dialog box should appear as shown in Figure 3.
 
Configure the New Flex Project dialog box.
Figure 3. Configure the New Flex Project dialog box.
 
  1. Click Next.
  2. Within the Configure Server Settings section of the New Project dialog box, click Next.
  3. Within the Create a Flex project section, click the Source path tab (see Figure 4).
 
Click the Source path tab.
Figure 4. Click the Source path tab.
 
  1. Within the Source path tab, click the Add Folder button.
 
  1. In the Add Folder dialog box, click the Browse button.
  2. In the Browse for Folder dialog box, navigate to the directory for your current workspace and select the .../ex5_11_starter/src folder (see Figure 5).
 
 Navigate to the ex5_11_starter project's src folder.
Figure 5. Navigate to the ex5_11_starter project's src folder.
 
  1. Click OK (Windows) or Open (Mac).
  2. In the Add Folder dialog box, click OK.
  3. Click the Library path tab.
  4. For the Application ID, type com.fiaw.employeeDesktop (see Figure 6).
 
Set the Application ID.
Figure 6. Set the Application ID.
 
  1. Click Finish
    You should see the ex5_11_desktop.mxml file open in the editor view.
  2. Within the Package Explorer view, expand the ex5_11_desktop project and drill down into the [source path]src > (default package) package.
    You should see the ex5_11_starter.mxml file (see Figure 7). By including the src folder from the ex5_11_starter project, you will be able to create a desktop application that uses the same resources as the ex5_11_starter application.
 
Expand the ex5_11_desktop project to reveal the included directory.
Figure 7. Expand the ex5_11_desktop project to reveal the included directory.
 

 
Convert 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. Open the ex5_11_starter.mxml file.
  2. Copy the contents of the file.
  3. Open the ex5_11_desktop.mxml file and overwrite the existing code with the code copied from the ex5_11_starter.mxml file.
  4. Within the ex5_11_desktop.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:components="components.*" skinClass="skins.ApplicationContainerSkin" viewSourceURL="srcview/index.html"> ... </s:WindowedApplication>
  1. Within the Package Explorer view, from the skins package, open the ApplicationContainerSkin.mxml file.
  2. Below the Properties of the parent comment, locate the states block.
  3. Within the states block, below the disabled state, create a State instance and add the name property with a value of normalAndInactive.
    The normalAndInactive state is required in a skin for the WindowedApplication container.
 
<s:states> <s:State name="normal"/> <s:State name="disabled"/> <s:State name="normalAndInactive"/> </s:states>
  1. Save the file and run the application.
    You should see the ex5_11_desktop application in a window as shown in Figure 8. Note that the window is not big enough for the application.
 
Run the AIR application.
Figure 8. Run the AIR application.
 
  1. Close the ex5_11_desktop application.
  2. Return to the ex5_11_starter.mxml file in Flash Builder.
  3. To the opening WindowedApplication tag, add a minWidth property with a value of 880 and a minHeight property with a value of 650.
You should be able to see the entire application, as shown in Figure 9.
 
Figure 9. The entire application is displayed.
Figure 9. The entire application is displayed.
 
  1. Close the ex5_11_desktop application.
 

 
Modify the application settings

In this section, you will modify the container style for the desktop application.
  1. Return to Flash Builder.
  2. From the Package Explorer view, open the ex5_11_desktop-app.xml file, and switch to Source mode.
    Note: The Source and Design mode tabs are located at the bottom of the Editor view for XML files.
  3. Locate and uncomment the systemChrome node located near line 55.
  4. Within the systemChrome tag set, type the value none.
 
<systemChrome>none</systemChrome>
  1. Locate and uncomment the transparent node located near line 58.
  2. Between the transparent tags, type the value true.
 
<transparent>true</transparent>
  1. Save the file.
  2. Open the ApplicationContainerSkin.mxml file.
  3. Below the UI components comment, locate and comment out the Rect primitive tag block.
 
<!--<s:Rect left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10"> <s:fill> <s:SolidColor color="#CCCCCC"/> </s:fill> </s:Rect>-->
  1. Save the file and run the application.
Note that the AIR application contains no border and has a transparent background (see Figure 10).
 
Run the application to see the change in the application.
Figure 10. Run the application to see the change in the application.
 
  1. Close the ex5_11_desktop application.
 

 
Produce an AIR application

In this section, you will create a production build of the ex5_11_desktop AIR application.
  1. Return Flash Builder.
  2. Select Project > Export Release Build (see Figure 11).
 
 Select Project > Export Release Build.
Figure 11. Select Project > Export Release Build.
 
  1. In the Export Release Build dialog box leave the default settings (see Figure 12).
 
 Leave the default settings.
Figure 12. Leave the default settings.
 
  1. Click Next.
  2. Within the Digital Signature section of the Export Release Build dialog box, click the Create button located to the right of the Certificate field.
  3. In the Create Self-Signed Digital Certificate dialog box, type your initials for the Publisher name, 123 for the password and ex5_11_cert for the Save as value (see Figure 13).
 
 Fill in the Create Self-Signed Digital Certificate dialog box.
Figure 13. Fill in the Create Self-Signed Digital Certificate dialog box.
 
  1. Click OK.
  2. Click Finish.
  3. Within the Package Explorer view, locate the ex5_11_desktop.air file (see Figure 14).
 
View the ex5_11_desktop.air file in the Package Explorer view.
Figure 14. View the ex5_11_desktop.air file in the Package Explorer view.
 
  1. Double-click the file to run the installer and install the ex5_11_desktop application.
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.