3 May 2011
|User level||Required products
|Flash Builder 4.7 Premium (Download trial)||ex1_01_solution.zip|
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.
Figure 1. Preview the tutorial application.
In this exercise you will learn how to:
Explore the default Flash Builder workspace
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.
Figure 2. View the default workspace.
You will use these Flash Builder views and many other features throughout this series.
Using the provided exercise file as a Flash Builder project
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.
- 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).
Figure 3. Select File > Import Flex Project (FXP).
- 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
Scriptblock, which contains comments for
importstatements, variables, setters and getters, helper methods, and event handlers. The
Scriptblock is where you add your ActionScript business logic within an MXML file.
- Click the Run button to run the application (see Figure 4).
Figure 4. Click the Run button to run the application.
- 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).
Figure 5. Note the URL of the Flex application.
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.
Figure 6. Expand the bin-debug folder to see the ex1_01_solution.html and ex1_01_solution.swf files.
Using the day project ZIP file as a Flash Builder workspace
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.
Figure 7. Click the Day 1 project files link.
- 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.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.
- 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 not see any projects in the workspace.
- Select File > Import (see Figure 8).
Figure 8. Select File > Import from the menu.
10. In the Import dialog dox, select General > Existing Projects into Workspace (see Figure 9).
Figure 9. The Import dialog box.
- Click Next.
- 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.
- Click Open.You should see all of the project files listed in the Projects section of the dialog (see Figure 10).
Figure 10. The Import Projects dialog box.
- Click Finish.In the Package Explorer view, you should see all of the Day 1 project files imported into your workspace (see Figure 11).
Figure 11. View the Day 1 projects in the Package Explorer view.
Creating a new project
In this section you will learn how to create a new Flex project in Flash Builder.
- Select File > New > Flex Project (see Figure 12).
Figure 12. Select File > New > Flex Project.
- In the New Flex Project wizard, for the Project name, type EmployeeDirectory (see Figure 13).
Figure 13. Type EmployeeDirectory for the Project name.
- On the Configure Server Settings page, note the Output folder is automatically set to the bin-debug folder (see Figure 14).
Figure 14. Note the Output folder name.
- 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).
Figure 15. The Main application file is named EmployeeDirectory.
- 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).
Figure 16. Click Finish to see the EmployeeDirectory project in the Package Explorer view and the EmployeeDirectory.mxml file open in the tabbed Editor view on the right.
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.