Exercise 5.11: Deploying to the desktop

In this exercise you use Flash Builder to create a production build of the Flash application shown in Figure 1.

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

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.

6. Select File > New > Flex Project.

7. In the New Project dialog box, type ex5_11_desktop for the project name.
8. Uncheck the Use default location check box.
9. For the Application type, select the Desktop option.

   Your New Flex Project dialog box should appear as shown in Figure 3.

10. Click Next.
11. Within the Configure Server Settings section of the New Project dialog box, click Next.
12. Within the Create a Flex project section, click the Source path tab (see Figure 4).

13. Within the Source path tab, click the Add Folder button.

14. In the Add Folder dialog box, click the Browse button.
15. 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).

16. Click OK (Windows) or Open (Mac).
17. In the Add Folder dialog box, click OK.
18. Click the Library path tab.
19. For the Application ID, type com.fiaw.employeeDesktop (see Figure 6).

20. Click Finish

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

21. 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.

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.

5. Within the Package Explorer view, from the skins package, open the ApplicationContainerSkin.mxml file.
6. Below the Properties of the parent comment, locate the states block.
7. 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.

8. 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.
   

9. Close the ex5_11_desktop application.
10. Return to the ex5_11_starter.mxml file in Flash Builder.
11. 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.

13. Close the ex5_11_desktop application.

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.

5. Locate and uncomment the transparent node located near line 58.
6. Between the transparent tags, type the value true.

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.

10. Save the file and run the application.

Note that the AIR application contains no border and has a transparent background (see Figure 10).

11. Close the ex5_11_desktop 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).

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

4. Click Next.
5. Within 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, type your initials for the Publisher name, 123 for the password and ex5_11_cert for the Save as value (see Figure 13).

7. Click OK.
8. Click Finish.
9. Within the Package Explorer view, locate the ex5_11_desktop.air file (see Figure 14).

10. 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.