Exercise 5.12: Importing a Flash Catalyst FXP file in Flash Builder

Additional Requirements

Flash Catalyst (optional)

• Try
• Buy

Adobe Flash Catalyst is an interaction design tool that you can use to wireframe, storyboard, prototype, and design an application. Whether you are a designer or developer, you can create a Flex project in Flash Catalyst that can be imported into Flash Builder, where you can add dynamic data using any of the techniques that you have learned in this training series.

In this exercise, you will import a Flash Catalyst project in Flash Builder. You will first review the generated code and then use the Flash Builder Data/Services tools to add dynamic data to the application. Lastly, you will learn how to import a Flash Catalyst Flex Library Package (FXPL) into Flash Builder and apply a custom skin to the horizontal scroll bar in the application (see Figure 1).

In this exercise, you will learn how to:

• Import a Flash Catalyst FXP file in Flash Builder
• Apply dynamic XML data to the application
• Import an FXPL and use it to skin a component

Create a Flash Builder project from a Flash Catalyst FXP file

In this section you will use an FXP file created using Flash Catalyst to create a project in Flash Builder.

1. Open Flash Builder.
2. Select File > Import Flex Project (FXP).
3. In the Import Flex Project dialog box, browse to the ex5_12_starter.fxp file and click Open.
4. Click Finish.
5. In the Package Explorer view, expand the ex5_12_starter project folder to reveal the src > (default package) contents (see Figure 2).

6. Double-click Main.mxml to open the file.

Compile and run the project

In this section you will run the application to see it function.

1. Click the Run button to run the application.
2. Scroll the horizontal List to view employees. You should see the items are slightly different when hovered over with the mouse and selected (see Figure 3).

Explore the imported project

In this section you will review the code generated by Flash Catalyst.

1. Return to Flash Builder.
2. Locate the List control. Note the skinClass property value is components.EmployeeOfTheMonthListSkin.
3. In the Package Explorer view open the components package and double-click EmployeeOfTheMonthListSkin.mxml to open it. You should see that the opening and closing tags for the file are <s:Skin> tags and that the HostComponent is set to the spark.components.List component (see Figure 4).

4. Locate the DataGroup block and note the value for the itemRenderer property is set to components.RepeatedItem1.
5. In the Package Explorer view, open the RepeatedItem1.mxml file and review the code.
6. Rename the RepeatedItem1.mxml file as EmployeeOfTheMonthRepeatedItem.mxml.

Connect to XML data

In this section you will use an external XML file and the Flash builder Data / Services view to add dynamic data to the application.

1. In a browser navigate to the URL http://www.adobetes.com/f4iaw100/employees.xml. Note the repeating node is the employeeOfTheMonth node (see Figure 5).

2. Return to Flash Builder.
3. Select Data > Connect to XML (see Figure 6).

4. Fill out the Configure XML Service dialog box as follows (see Figure 7):
   • XML Source: URL
   • URL: http://www.adobetes.com/f4iaw100/employees.xml

5. Click Invoke.

   You should see the Select node drop-down menu, Service Name, Service Data and Service Package fields populate as shown in Figure 8.

6. Open the Select node drop down to see the structure of the returned data (see Figure 9). You are selecting the repeating node of the XML file.

   Note the three properties of the EmployeeOfTheMonth node.

7. Click Finish.

   In the Data/Services view you should see the Employees service that contains the getData() operation (see Figure 10). Note the getData() operation is data-typed to the EmployeeOfTheMonth[] type as specified in the Configure XML Service dialog box.

Bind data to the application

In this section you will use the data service created in the previous section to populate the List control with dynamic data.

1. Return to the Main.mxml file in Flash Builder.
2. Switch to Design mode.
3. From the Data/Services view, drag the getEmployees(): Object operation and drop it on the List control (see Figure 11).

You should see the Bind Operation dialog box open and display a message stating the component is already bound to data.

4. Click OK.
5. In the Bind To Data dialog box, from the Label field drop-down menu select the blank option (see Figure 12). The repeated item in the List control displays more than just one field.

6. Click OK.
7. In the Package Explorer view open the components package and then open EmployeeOfTheMonthRepeatedItem.mxml.
8. Click the RichText control above the image to select it.
9. In the Properties view change the value of the text property to reference the month value in the data (see Figure 13).

10. Right-click the RichText control and select Apply Current Property to All States.
11. Select the Image control and use the Properties view to change the Source binding to {data.image} (see Figure 14).

12. Click the Refresh button next to the Source and Design mode button to refresh Design mode.
13. Right-click the Image control and select Apply Current Property to All States.
14. Switch to the hovered state.
15. Select the RichText control below the image and use the Properties view to change the Text binding to {data.name} (see Figure 15).

16. Right-click the RichText control and select Apply Current Property to All States.
17. With the RichText control selected switch to Source mode.
18. To the RichText control add the visible.normal property with a value of false and the color.selected property with a value of yellow (#FFF000).

19. Save the file and run the application.

    You should see the employee information is now dynamically populated in the List control and the application functions as it did at the beginning of the exercise (see Figure 16).

Import an FXPL and use it to skin a component

In this section you will learn how to import a Flex Library Package file (FXPL) as a project in Flash Builder and how to make access classes from it in your primary project.

1. Return to Flash Builder.
2. Select File > Import Flex Project (FXP).
3. In the Import Flex Project dialog box, browse to the scrollbar.fxpl file and click Open.
4. Click Finish.

   You should see the scrollbar project listed in the Package Explorer view.

5. Open the scrollbar project and review its contents. Note the files in the components package, specifically the CustomScrollbar.mxml file. This is the file that will be referenced from the Flex library package as the name of the skin. The other MXML files represent the skin parts for the scrollbar (see Figure 17).

6. In the Package Explorer view select the ex5_12_starter project and then select Project > Properties.
7. In the Properties for ex5_12_starter dialog box click the Flex Build Path from the options on the left (see Figure 18).

8. Click the Add Project button.
9. In the Add Library Project dialog box select the scrollbar project and click OK.

   You should see the scrollbar library is now listed in the Build path libraries (see Figure 19).

10. Click OK.

Apply the Library to a component

In this section you will learn how to apply an imported FXPL as a component skin.

1. Open EmployeeOfTheMonthListSkin.mxml.
2. Switch to Design mode and select the scrollbar component.
3. In the Properties panel change the Skin value to components.CustomScrollbar (see Figure 20).

4. Save the file and run the application.

   You should see the scroll bar for the application is now skinned based on the imported FXPL (see Figure 21).

Test your knowledge

In this exercise, you learned how to create a data model using typed data.

What file type is use to represent both Flash Catalyst and Flash Builder projects?

The FXP file type.

What step must first be done to be able to use an FXPL to skin an existing component?

The FXPL must first be imported as a Flex project. Then the library may be added to the Build path libraries and applied as a skin.