Exercise 5.6: Creating custom skin properties

In this exercise you will create a custom skin property and reuse it to style a Panel container skin with differently colored highlights (see Figure 1).

In this exercise, you will learn how to:

• Create a custom skin property
• Pass a value to a custom skin property

In this section, you will change the color of the title bar for each of the Panel containers within the Employee Portal application.

1. Download the ex5_06_starter.zip file if you haven't done so already and extract the ex5_06_starter.fxp file to your computer.
2. Open Flash Builder.
3. Import the ex5_06_starter.fxp file.
4. Open the ex5_06_starter.mxml file.
5. Locate the four panel instances in the components namespace and comment them out.
   
6. Save the file.
7. In the Package Explorer, right-click the components package and select New > MXML Component.
8. Name the MXML component EmployeePortalPanel.
9. Click the Browse button next to the Based on field.
10. In the Based on dialog box, type Panel and select the Spark Panel container (see Figure 2).

11. Click OK.
12. In the New MXML Component dialog box, type 250 for the Width value and 475 for the Height value (see Figure 3).

13. Click Finish.

    The EmployePortalPanel.mxml file will open in the Flash Builder Editor view.

14. Delete the Declaration tag block and create a Script block.
15. Within the Script block, type panelTitleColor and press CTRL+1 to invoke the quick assist tool. Select the Create instance variable option. This will create a private variable named panelTitleColor data typed to the Object class.
16. Change the variable's access modifier to public and modify the data type to the uint class.
    

17. Save the file.
18. Open the ex5_06_starter.mxml file.
19. After the four Panel instances that you commented out, create an EmployeePortalPanel component tag block.
    
20. To the EmployeePortalPanel component opening tag, assign the title property value to EMPLOYEE OF THE MONTH.
21. Use the content assist tool to add the panelTitleColor property to the EmployeePortalPanel tag and give it a value of #64BC48 (green).
22. Within the EmployeePortalPanel component tag set, add an instance of the EmployeeOfTheMonth component.

23. Save the file and run the application.

    You will see only one panel that is not properly positioned. You will fix that later. However, note that there are two panel title areas for the Employee of the Month panel (see Figure 4). This occurs because each component is based on the Panel container.

24. Return to Flash Builder and open the EmployeeOfTheMonth.mxml component.
25. Change the component's Panel container to a Group container.
26. In the opening Group container tag, reassign the width and height properties to a value of 100%.

27. Save the file.
28. Repeat steps 23-26 for the Cafeteria.mxml and MonthlyEvents.mxml components.
29. Return to the ex5_06_starter file.
30. From the commented EmployeeOfTheMonth component instance, copy the x, y, and skinClass properties and their values and paste them into the opening EmployeePortalPanel component instance.
31. To the opening EmployeePortalPanel component instance, add the height property with a value of 295.

32. Save the file and run the application.

    You should see that only the Employee of the Month panel is displayed and the color block of the panel's title bar has not changed (see Figure 5).

In this section you will create a function to handle the passing of the panelTitleColor property value from the main application file to the custom component.

1. Return to Flash Builder and open the PanelContainerSkin.mxml file from the skins package.
2. Locate the nested fill property within the Rect tag block that follows the PanelSkin instance.
3. From the nested SolidColor tag, remove the color property value:

4. To the SolidColor tag, assign the id property to headerSkinColor:

5. Locate the MetaData tags.
6. Within the HostComponent() function, change the value to reference the EmployeePortalPanel component:

7. Locate the Script comment and add a Script block below it:

8. Within the Script block, create a private function named initTitleSkin that returns a void data type:

9. Within the initTitleSkin() function, assign the color property of the headerSkinColor SolidColor fill to the hostComponent.panelTitleColor property value:

10. To the opening SparkSkin tag, assign the creationComplete property value to call the initTitleSkin() function:

11. Save the file and run the application.

    You should see that the color block in the Employee of the Month panel is now green (see Figure 6).

12. Return to the ex5_06_starter.mxml file in Flash Builder.
13. Copy the EmployeePortalPanel component and paste two instances below the first.

14. To the second instance of the EmployeePortalPanel component, reassign the title property to CAFETERIA SPECIAL, the panelTitleColor property value to #F05123 (orange), and the x property value to 275.
15. Remove the height property and and change the nested component to the Cafeteria component.

16. To the third instance of the EmployeePortalPanel component, reassign the title property to MONTHLY EVENTS, the panelTitleColor property value to #0D86B8 (blue), and the x property value to 550.
17. Remove the height property and change the nested component to the MonthlyEvents component.

18. Locate the commented EmployeeDirectory component instance.
19. Copy the EmployeeDirectory component instance and paste it below the third instance of the EmployeePortalPanel component.

    Since the EmployeeDirectory component does not use the PanelContainerSkin, you do not need to nest it within an EmployeePortalPanel component instance.

20. Save the file and run the application.

    You should see the Employee of the Month, Cafeteria Special, and MonthlyEvents panels have different colored headers (see Figure 7). Also note that the text in the Monthly Events panel is blue.

21. Return to Flash Builder and open the ex5_06_starter.css file.
22. Locate the MonthlyEvents selector and comment out the color property.
23. Save the file and run the application.

You should see that the text within the Monthly Events panel is now black (see Figure 8).

In this exercise you created a custom skin property and reused it to style a Panel container skin with different colored highlights. In the next exercise you will learn how to use a skin to make the Panel container title bar vertical.