Exercise 1.1: Setting up your project files

The Flex in a Week training series consists of videos and exercises to teach experienced programmers how to program using the Flex 4.5 framework and Flash Builder 4.5. To gain the most from this series, watch the videos and complete the exercises in the order in which they are listed.

Each exercise includes associated exercise files, such as the ex1_01_solution.zip in the Exercise files section above. If you would rather download all the exercises for an entire day of the Flex in a Week series, you can find the respective project ZIP file on the Flex in a Week home page.

This exercise will step you through the process of importing the individual exercise files as Flash Builder 4.5 projects. You will also learn how to use the project ZIP file for individual days as a Flash Builder 4.5 workspace.

After you import the exercise project, you will compile and run a Flex application, shown in Figure 1, and see the generated SWF and HTML wrapper files in the bin-debug directory. You will learn how to create the application and populate it with data in the upcoming exercises.

In this exercise you will learn how to:

• View the default workspace
• Use a Flex in a Week exercise ZIP file as a Flash Builder project
• Use the Flex in a Week day ZIP file as a Flash Builder workspace
• Create a new Flash Builder project

In this section you will view the default Flash Builder workspace.

Open Flash Builder.

If this is the first time you have opened Flash Builder, your environment should resemble the one shown in Figure 2. Note that the Flash Builder start page is open in the Editor view and various views surround it. These views can be opened and closed or moved within the user interface to create a custom development environment. More views may be opened by selecting them from the Window menu.

You will use these Flash Builder views and many other features throughout this series.

Each exercise ZIP file provided at the beginning of the exercises in this series includes an FXP file, which is a Flash Builder project archive. In this section you will import an FXP file into Flash Builder and compile the application to view it in a browser.

1. Download the ex1_01_solution.zip file if you haven't done so already.
2. Extract the archive file to any location on your computer.

   You should see that the archive contains the ex1_01_solution.fxp file.

3. In Flash Builder, select File > Import Flex Project (FXP) (see Figure 3).

4. Next to the File field, click the Browse button.
5. Navigate to the ex1_01_solution.fxp file and click Open.
6. Click Finish.
7. In the Package Explorer, expand the src folder and the default package folder and double-click the ex1_01_solution.mxml file to open it.
8. In the Editor view, review the MXML code for the application.

   Note the MXML comments that define sections for code placement. The headers are: Properties of the parent, Metadata, Styles, Script, Declarations, and UI Components. You will use these comments throughout the Flex in a Week training series to keep your code organized.

   Note also the Script block, which contains comments for import statements, variables, setters and getters, helper methods, and event handlers. The Script block is where you add your ActionScript business logic within an MXML file.

9. Click the Run button to run the application (see Figure 4).

10. Note the browser URL path points to the file .../Adobe Flash Builder 4.5/ex1_01_solution/bin-debug/ex1_01_solution.html (see Figure 5).

Note: The Adobe Flash Builder 4.5 directory you see here is not the program install directory. This is the default folder that Flash Builder creates in your user directory (on both Windows and Mac computers) to hold your project files.

11. Return to Flash Builder.
12. In the Package Explorer view, within the ex1_01_solution project, expand the bin-debug folder.
13. Locate the ex1_01_solution.swf and ex1_01_solution.html files shown in Figure 6. The SWF file is the compiled Flex application and the HTML file is the wrapper file that you access in a browser.

You learned earlier that the Flash Builder 4.5 directory created in the system's user directory is the default location where your project files are created. This location is more accurately called a workspace and you can create as many workspaces in Flash Builder as you would like to keep your projects logically organized.

In this section you will download the Flex in a Week Day 1 project ZIP file and access it as a new workspace in Flash Builder 4.5.

1. In a browser, navigate to the Flex in a Week home page.
2. Below the heading for Day 1, click the Day 1 project files link (see Figure 7) and save the file to your computer.

Note: You can download project files for each day of training. Each project zip is named FiaW_DayX_ProjectArchive.zip, with the appropriate number for that day of the course.

3. Extract the contents of the FiaW_Day1_ProjectArchive.zip file to any location on your computer.
4. Explore the contents of the FiaW_Day1_ProjectArchive folder.

   You should see another zip file named Day1.zip as well as some video transcripts and a ReadMe text file within the project archive folder.

5. In Flash Builder, select File > Switch Workspace > Other.
6. Click the Browse button and navigate to the FiaW_Day1_ProjectArchive folder.
7. Click the OK button (Windows) or Open button (Mac OS X).
8. Click OK.

   Flash Builder will close and re-open. You should not see any projects in the workspace.

9. Select File > Import (see Figure 8).

10. In the Import dialog dox, select General > Existing Projects into Workspace (see Figure 9).

11. Click Next.
12. In the Import Projects dialog box, choose the Select archive file option and click Browse.

    Point to the location of the Day1.zip file in the project archive file you saved to your computer.

13. Click Open.

    You should see all of the project files listed in the Projects section of the dialog (see Figure 10).

14. Click Finish.

    In the Package Explorer view, you should see all of the Day 1 project files imported into your workspace (see Figure 11).

In this section you will learn how to create a new Flex project in Flash Builder.

1. Select File > New > Flex Project (see Figure 12).

2. In the New Flex Project wizard, for the Project name, type EmployeeDirectory (see Figure 13).

3. On the Configure Server Settings page, note the Output folder is automatically set to the bin-debug folder (see Figure 14).

4. Click Next.

   Note that you can choose if your project contains an MX + Spark, Spark only, or MX only component set. Also note that the Main application file is automatically named the same as the project name. In this case, the file is EmployeeDirectory.mxml (see Figure 15).

5. Keep the default settings and click Finish.

You should see the EmployeeDirectory project in the Package Explorer view and the EmployeeDirectory.mxml file open in the tabbed Editor view on the right (see Figure 16).

In this exercise you learned how to import projects, compile an application, use a provided workspace and create a new project in Flash Builder 4.5. In the next excercise you will use Flash Builder to create the application user interface for a fictitious company's Employee Portal.