Trilemetry

Trilemetry, Inc.

Created

14 July 2000

Requirements
     
Prerequisite knowledge
Required products Exercise files: User level
Flash Builder 4 (Download trial)

ex5_12_starter.zip (98 KB)

ex5_12_solution.zip (108 KB)

Beginning

 
Additional Requirements

 
Flash Catalyst (optional)
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).
 
Preview the finished application.

Figure 1. Preview the finished application.

In this exercise, you will learn how to:
 
 
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).
View the main application file.

Figure 2. View the main application file.

  1. 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).
Run the application to explore it.

Figure 3. Run the application to explore it.

 
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).
Open the EmployeeOfTheMonthList.mxml file to see it is a skin file.

Figure 4. Open the EmployeeOfTheMonthList.mxml file to see it is a skin file.

  1. Locate the DataGroup block and note the value for the itemRenderer property is set to components.RepeatedItem1.
  2. In the Package Explorer view, open the RepeatedItem1.mxml file and review the code.
  3. 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).
View the XML data in a browser.

Figure 5. View the XML data in a browser.

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

Figure 6. Select Data > Connect to XML.

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

Figure 7. Enter the URL of the XML file.

  1. 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.
     
See the rest of the fields in the dialog box based on the XML file.

Figure 8. See the rest of the fields in the dialog box based on the XML file.

  1. 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.
     
 Note the selected node of the returned data.

Figure 9. Note the selected node of the returned data.

  1. 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.
     
View the service in the Data/Services view.

Figure 10. View the service in the Data/Services view.

 
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).
Drag the getData() operation and drop it on the List control.

Figure 11. Drag the getData() operation and drop it on the List control.

You should see the Bind Operation dialog box open and display a message stating the component is already bound to data.
 
  1. Click OK.
  2. 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.
Select the blank value for the Label field.

Figure 12. Select the blank value for the Label field.

  1. Click OK.
  2. In the Package Explorer view open the components package and then open EmployeeOfTheMonthRepeatedItem.mxml.
  3. Click the RichText control above the image to select it.
  4. In the Properties view change the value of the text property to reference the month value in the data (see Figure 13).
Change the RichText control's Text binding.

Figure 13. Change the RichText control's Text binding.

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

Figure 14. Change the Image control's Source binding.

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

Figure 15. Change the RichText control's Text binding.

  1. Right-click the RichText control and select Apply Current Property to All States.
  2. With the RichText control selected switch to Source mode.
  3. 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).
<s:RichText visible.normal="true" color.selected="#FFF000" ... />
  1. 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).
     
Run the application.

Figure 16. Run the application.

 
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).
View the scrollbar project in the Package Explorer view.

Figure 17. View the scrollbar project in the Package Explorer view.

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

Figure 18. Select Flex Build Path.

  1. Click the Add Project button.
  2. 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).
     
See the scrollbar package is now available in the Build path libraries.

Figure 19. See the scrollbar package is now available in the Build path libraries.

  1. 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).
Change the Skin package in the Properties panel.

Figure 20. Change the Skin package in the Properties panel.

  1. 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).
     
 Run the application to see the custom skin applied to the scroll bar.

Figure 21. Run the application to see the custom skin applied to the scroll bar.

 
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.