Exercise 5.9: Skinning the SkinnableDataContainer container

In Day 4 you created a Spark item renderer, which you applied to the repeated data elements in the DataGroup container. You added some visual enhancements to the item renderer but not to the DataGroup container itself.

In this exercise you will change the DataGroup container to a SkinnableDataContainer container so that you can apply a skin to it (see Figure 1). It is the gray rounded rectangle around all of the employee data elements.

You will also create a new hover state display for the items.

In this exercise you will learn how to:

• Use the SkinnableDataContainer component
  
• Create and apply a skin to the SkinnableDataContainer component
• Create the hover state

In this section you will change the DataGroup container (used in Exercises 4.1 and 4.2) to a SkinnableDataContainer container so that you can apply a skin to it.

1. Download the ex5_09_starter.zip file provided in the Exercise files section and extract the ex5_09_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_09_starter.fxp file.
4. Open ex5_09_starter.mxml.
5. Run the application.

   You should see the application appears as shown in Figure 2. The item renderer used for the data in this application was created in Exercise 4.2: Displaying dynamic data in a custom item renderer.

6. Return to the ex5_09_starter.mxml file in Flash Builder.
7. Below the UI components comment, locate the DataGroup container.
8. Change the DataGroup container into a SkinnableDataContainer component.

9. Save the file and run the application.

You should see no change in the application.

In this section, you will create a skin and apply it to the SkinnableDataGroup container.

1. Return to the ex5_09_starter.mxml file in Flash Builder.
2. Highlight the opening SkinnableDataContainer tag and switch to Design mode.
3. In the Properties view for the SkinnableDataContainer, locate the Skin field in the Style segment.
4. Click the icon to the right of the Skin field and select Create Skin (see Figure 3).

5. In the New MXML Skin dialog box, type skins for the Package and type BackgroundSkin for the Name.

6. Click Finish.

   You should see the BackgroundSkin.mxml file open in the Editor view.

7. Note that the file is configured with the SkinnableDataContainer class as its host component class. It also contains a states block with the required State tags and a DataGroup container.

   Remember that containers like the Group, Application, and Panel container have a skin part named contentGroup. For the DataGroup container, the skin part is named dataGroup.

8. Below the states block, create a Rect primitive block.

9. To the Rect primitive, add the height property with a value of 100%, the width property with a value of 120 and the radiusX and radiusY properties, both with a value of 4.

10. Within the Rect block, create a fill block.

11. Within the fill block, create a SolidColor graphic and add the alpha property with a value of .4 and the color property with a value of 0x000000.

12. Save the file.
13. Return to the ex5_09_starter.mxml file and switch to Source mode.
14. In the SkinnableDataContainer container, note that the skinClass property has been added with a value of skins.BackgroundSkin.

15. Save the file and run the application.

    You should see the skin applied to the SkinnableDataGroup container (see Figure 5). Note that the content is not centered within the skin.

16. Return to the BackgroundSkin.mxml file in Flash Builder.
17. To the DataGroup container, add the horizontalCenter property with a value of 0.

18. From the DataGroup container, remove the left, right, and top properties.
19. To the DataGroup container, reassign the bottom property with a value of 5.
20. Save the file and run the application.

The data is now centered within the skin (see Figure 6). Note that when you mouse over an employee there is a small rectangle that indicates you are hovering over an item. This occurs because you have set the top property in the BorderContainer of the EmployeeItemRenderer class. Next, you will modify the hovered state of the item renderer.

In this section you will create the hover state for the content in the DataGroup container.

1. Return to Flash Builder and open the EmployeeItemRenderer.mxml file from the components package.
2. Locate the BorderContainer and cut the top property from the opening tag.
3. Save the file.
4. Open the BackgroundSkin.mxml file and paste the top property into the opening tag from the DataGroup container.
5. Change the value of the bottom property to 5.

6. Save the file and run the application.
7. Mouse over an employee.

   Note that the rectangle you saw before is now gone.

8. Return to the EmployeeItemRenderer.mxml file.
9. Locate the states block.
10. Below the normal State tag, add another instance of the State tag and add the name property with a value of hovered.

11. Locate the BorderContainer block. This container draws the background for each item renderer and also displays the employee data.
12. Below the BorderContainer instance, create a Rect instance with a height value of 100% and a width value of 100%. This will create a rectangle that will completely overlay the item renderer.

13. Within the Rect block, create a fill property tag block.
14. Within the fill property, create a SolidColor instance and give it a color property with a value of #FFFFFF (white). This adds a highlight color when you hover over the item.

15. To the SolidColor instance, add the alpha property with a value of .2. This will make the highlight transparent.

16. To the opening Rect tag, add the includeIn property with a value of hovered. Without the includeIn property, the rectangle would display all the time. Now you have made sure that it only displays in the hovered state.

17. Locate the SolidColor instance within the fill block. To the color property add .hovered to make sure the color only appears in the hovered state.

18. Save the file and run the application.
19. Mouse over one of the employees.

You should see the employee is highlighted with a transparent white box (see Figure 7).

In this exercise you changed the DataGroup container to a SkinnableDataContainer container so that you can apply a skin to it. In the next exercise you use Flash Builder to create a production build of the Flash application.