Exercise 1.6: Creating MXML custom components with ActionScript properties

In this exercise you will use Flash Builder to create an MXML class and reuse the class to display employee information (see Figure 1).

In this exercise you will learn how to:

• Design an application
• Create and use an MXML component
• Create a class property

In this section you will add Flex controls to the application.

1. Download the ex1_06_starter.zip file if you haven't already, and extract the file ex1_06_starter.fxp to your computer.
2. Return to Flash Builder and import the file ex1_06_starter.fxp.
3. Open the ex1_06_starter.mxml file.
4. Switch to Design mode.
5. From the Components view Controls branch, drag a Label control and drop it into the Design area (see Figure 2).

6. Use the Properties view to assign the Label control a text property with a value of Employee Portal.
7. Return to Source mode.
8. Locate the Styles comment and add a Style tag to your code.
9. Set the source property's value to Styles.css.

10. To the Employee Portal Label control, add a height property with a value of 40, a width property with a value of 300, and a styleName property with a value of titleHeader.

11. Save the file and run the application.

    You should see the style applied to the Label control (see Figure 3).

12. Return to Flash Builder and switch to Design mode.
13. From the Controls branch, drag an Image control and drop it into the editor (see Figure 4).

14. Use the Properties view to assign the Image control Source property a value of images/aparker.jpg (see Figure 5).

15. From the Components view Controls branch, drag a Label control and drop it below the Image control (see Figure 6).

16. Use the Properties view to assign the Text property a value of Athena Parker.
17. Save the file.
18. Run the application.

    The application should look as shown in Figure 7.

19. Return to Flash Builder and switch to Source mode.
20. Locate the Image control and change it from Image to BitmapImage.

Note: It is a best practice to only use the Image control if you need to skin an image (for instance, with a background or border).To just display an image, use BitmapImage.

21. Save the file and run the application.

Note that your application has not changed.

In this section you create a custom component to use in place of the controls added to the application in the last section.

1. Return to Flash Builder.
2. In the Package Explorer, select the src folder then select File > New > Folder.
3. Name the Folder components (see Figure 8).

4. Click Finish.
5. In the Package Explorer, select the components folder and then select File > New > MXML Component.
6. Name the component EmployeeDisplay.
7. Base the component on the Spark Group container.
8. Delete the Width and Height values.

   The New MXML Component dialog box should look as shown in Figure 9.

9. Click Finish.
10. Open ex1_06_starter.mxml and switch to Source mode.
11. Cut the BitmapImage and Label controls that are used for the employee's name and paste them into the EmployeeDisplay.mxml below the Declarations block.

Note: You are only cutting the BitmapImage and Label controls that are specific to the employee. Do not cut the Employee Portal Label control.

12. From the BitmapImage control, delete the x and y properties:

13. Change the value of the Label control's x property to 0 and y property to 80:

14. Save the file.
15. Return to ex1_06_starter.mxml.
16. Below the UI components comment, add an instance of the custom component by typing the characters <Empl and then pressing Enter when the content assist tool displays the custom component (see Figure 10).

17. Within the opening Application tag, ensure the xml namespace components has been generated. If not, add the namespace assigned to the contents of the components directory.

18. To the EmployeeDisplay component, add the x property with a value of 10 and the y property with a value of 60.

18. Switch to Design mode.
19. From the Components view Custom branch, drag another EmployeeDisplay component and drop it into the Design area next to the first (see Figure 11).

21. In the properties view, go to the Size and Position segment and change the x property value to 105 and make sure the y property value is 60.
22. Save the file and run the application.

    You should see that the application contains two EmployeeDisplay components, as shown in Figure 12.

23. Return to Flash Builder and switch to Source mode.
24. Locate the second EmployeeDisplay component and notice that it is presented as a tag block.
25. Remove the closing EmployeeDisplay tag and modify the opening tag so that it becomes a single instance of the component.

26. Save the file.

In this section, you will create two class properties and use them to display data.

1. Open the EmployeeDisplay.mxml file.
2. Below the opening Group container tag, create a Script block.

3. In the Script block, type imageFile and use the quick assist tool, by pressing CTRL+1, to create a variable. Make the variable public and data typed to the String class.
4. Make the new imageFile variable Bindable by typing [B above the variable to invoke the content assist tool and click enter when Bindable is displayed.

5. Declare another Bindable public variable named fullName data typed to the String class by using the content assist and quick assist tools.

6. In the source property of the BitmapImage control, replace the hard-coded employee image file name with the value of the imageFile variable.

7. To the Label control, bind the value of the text property to the value of the fullName variable.

8. Save the file.
9. Open ex1_06_starter.mxml.
10. In Source mode, to the first custom component tag, add the imageFile property with a value of aparker.jpg.

11. To the same component, add the fullName variable set to the value of Athena Parker.

12. To the other custom component tag, add the imageFile property set to stucker.jpg and the fullName property set to Saul Tucker.

13. Save the file.
14. Run the application.

    The custom component now displays two different employees (see Figure 13).

In this exercise you learned to use Flash Builder to create an MXML class and reuse the class to display data. In the next exercise, you will use inline ActionScript to display the date selected from a DateChooser control. You will then use a function to achieve the same result as the inline ActionScript.