2 May 2011
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 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.
You should see that the archive contains the ex1_01_solution.fxp file.
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.
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.
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.
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.
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.
Flash Builder will close and re-open. You should not see any projects in the workspace.
Point to the location of the Day1.zip file in the project archive file you saved to your computer.
You should see all of the project files listed in the Projects section of the dialog (see Figure 10).
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.
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).
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.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.