3 May 2011
In this exercise you will learn how to:
- Download the ex1_01_solution.zip file if you haven't done so already.
- Extract the archive file to any location on your computer.You should see that the archive contains the ex1_01_solution.fxp file.
- In Flash Builder, select File > Import Flex Project (FXP) (see Figure 3).
- Next to the File field, click the Browse button.
- Navigate to the ex1_01_solution.fxp file and click Open.
- Click Finish.
- 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.
- 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.
- Click the Run button to run the application (see Figure 4)
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.
- Return to Flash Builder.
- In the Package Explorer view, within the ex1_01_solution project, expand the bin-debug folder.
- 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.
- In a browser, navigate to the Flex in a Week home page.
- 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.
- Extract the contents of the FiaW_Day1_ProjectArchive.zip file to any location on your computer.
- Explore the contents of the FiaW_Day1_ProjectArchive folder.
Note: There are project folders as well as some video transcripts and a ReadMe text file in the project archive folders.
- In Flash Builder, select File > Switch Workspace > Other.
- Click the Browse button and navigate to the FiaW_Day1_ProjectArchive folder.
- Click the OK button (Windows) or Open button (Mac OS X).
- Click OK.
Flash Builder will close and re-open. You should see all of the provided exercise files for Day 1 of this training series in the Package Explorer view (see Figure 8).
In this section you will learn how to create a new Flex project in Flash Builder.
- Select File > New > Flex Project (see Figure 9).
- In the New Flex Project wizard, for the Project name, type EmployeeDirectory (see Figure 10).
- On the Configure Server Settings page, note the Output folder is automatically set to the bin-debug folder (see Figure 11).
- 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 12).
- 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 13).