In this exercise you will change the DataGroup container to a SkinnableDataContainer so that you can apply a skin to both the container and the individual item renderers (see Figure 1).

Figure 1. Preview the application.

In this exercise, you will learn how to:

1. Use the SkinnableDataContainer component
2. Apply a skin to the SkinnableDataContainer component
3. Display skinned data
4. Skin the data items

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Download
• Learn more

Exercise files:

• ex5_03_starter.zip (ZIP, 55 KB)
• ex5_03_solution.zip (ZIP, 55 KB)

Prerequisite knowledge:

• Exercise 1.1: Creating and skinning an application
• Exercise 3.1: Creating and applying skins
• Exercise 5.1: Passing data to item renderers for display
• Exercise 5.2: Displaying dynamic data in a custom item renderer

Using the SkinnableDataContainer component

In this section, you will create a SkinnableDataContainer instance to display the employee data.

1. Download the ex5_03_starter.zip file if you haven't already and extract the file ex5_03_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_03_starter.fxp file.
4. Open EmployeeDirectory.mxml.
5. Below the UI components comment, locate the DataGroup container.

6. Change the DataGroup container into a SkinnableDataContainer component.

   <s:SkinnableDataContainer dataProvider="{employeeList}" 
         itemRenderer="components.EmployeeItemRenderer">
         <s:layout>
              <s:VerticalLayout />
         </s:layout>
   </s:SkinnableDataContainer>

   If you run the application now, you will not see any difference in the display.

Applying a skin to the SkinnableDataContainer component

In this section, you will apply the provided skin to add a background skin to the employee data.

1. From the Package Explorer view, open the BackgroundSkin.mxml file located in the skins folder.

2. Note that the file is configured with the SkinnableDataContainer class as its host component class, and contains a states block with two nested State tags and a Rect block with a fill property defined:

   <fx:Metadata>
       [HostComponent("spark.components.SkinnableDataContainer")]
   </fx:Metadata>
       
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled"/>
   </s:states>
       
   <s:Rect left="0" right="0" 
       top="0" bottom="0"
       height="100%" width="100%"
       radiusX="4" radiusY="4">
       <s:fill>
           <s:SolidColor id="fillColor" 
               alpha=".5" 
               color="0xDCDCDC"/>
       </s:fill>
   </s:Rect>

   You learned how to create skins in the Skinning Spark components section of Day 3 of this training series.

3. Open the EmployeeDirectory.mxml file.
4. Locate the SkinnableDataContainer component.

5. To the SkinnableDataContainer component, assign skins.BackgroundSkin as the skinClass:

   <s:SkinnableDataContainer dataProvider="{employeeList}" 
       itemRenderer="components.EmployeeItemRenderer" 
       skinClass="skins.BackgroundSkin">

6. Save the file and run the application.

   You should see the skin displayed, but not the content (see Figure 2).

   

   Figure 2. Run the application to see the skinned SkinnableDataContainer component.

Displaying skinned data

In this section you will apply the skin part that will allow data to be displayed on top of the skin.

1. Return to Flash Builder and open the BackgroundSkin.mxml file.

2. Below the Rect tag block, create a DataGroup component tag set:

   ...     
            </s:fill>
       </s:Rect>
   
   <s:DataGroup>
           
   </s:DataGroup>

3. To the DataGroup component, assign dataGroup as the id property:

   <s:DataGroup id="dataGroup">
           
   </s:DataGroup>

   You learned in the Skinning Spark components section of Day 3 of this training series that containers like the Group, Application, and Panel have a skin part named contentGroup. For the DataGroup container, the skin part is named dataGroup.

4. Save the file and run the application.

   You should see the employee data is displayed over the skin (see Figure 3).

   

   Figure 3. Run the application to see the skinned employee data displayed.

Skinning the data items

In this section, you will apply a skin to each employee item renderer that changes color when the user mouses over it.

1. Return to Flash Builder.
2. Open the EmployeeDirectory.mxml file.
3. Locate the SkinnableDataContainer component tag set.

4. Between the nested layout property tags, to the VerticalLayout class instance, assign 15 as the gap and 20 as the paddingTop, paddingBottom, paddingRight, and paddingLeft:

   <s:SkinnableDataContainer dataProvider="{employeeList}" 
       itemRenderer="components.EmployeeItemRenderer" 
       skinClass="skins.BackgroundSkin">
       <s:layout>
           <s:VerticalLayout gap="15"
               paddingLeft="20" paddingRight="20"
               paddingBottom="20" paddingTop="20"/>
       </s:layout>
   </s:SkinnableDataContainer>

5. Save the file.
6. Open the EmployeeItemRenderer.mxml file.
7. Locate the states block.

8. Within the states block, below the State tag, create another instance of the State class:

   <s:states>
       <s:State name="normal"/>
       <s:State/>
   </s:states>

9. Assign hovered as the new State class instance name:

   <s:states>
       <s:State name="normal"/>
       <s:State name="hovered"/>
   </s:states>

10. Locate the UI components comment.

11. Between the comment and the HGroup container, create a Rect primitive tag set:

    <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        
    <s:Rect>
        
    </s:Rect>
        
    <s:HGroup gap="15" 
        top="20" bottom="20"

12. To the Rect primitive, assign 100% as the height, 250 as the width and 10 as the radiusX and radiusY:

    <s:Rect height="100%" width="250"
        radiusX="10" radiusY="10">
      
    </s:Rect>

13. Between the Rect tags, create a fill property tag set:

    <s:Rect height="100%" width="100%"
        radiusX="10" radiusY="10">
        <s:fill>
                
        </s:fill>
    </s:Rect>

14. Between the fill property tags, create an instance of the SolidColor class:

    <s:Rect height="100%" width="100%"
        radiusX="10" radiusY="10">
        <s:fill>
            <s:SolidColor/>
        </s:fill>
    </s:Rect>
    

15. To the Stroke class instance, assign .5 as the alpha and 0xE36906 as the color.hovered:

    <s:Rect height="100%" width="100%" 
        radiusX="10" radiusY="10">
        <s:fill>
            <s:SolidColor alpha=".5" 
                color.hovered="0xE36906"/>
        </s:fill>
    </s:Rect>

16. Save the file and run the application.

    You should see that each set of employee data has a background (see Figure 4).

    

    Figure 4. Run the application to see each set of employee information has a rectangle background.

17. With the mouse, hover over one of the employees (see Figure 5).

    You should see the employee item background color change.

    

    Figure 5. Mouse over an employee to see the background color change.

Test your knowledge

In this exercise, you learned how to use the SkinnableDataContainer component and a skin component to apply a skin to a group of data.

What component is used if you want to apply a skin to a group of data?

The SkinnableDataContainer component.

In a skin component file, what must the DataGroup component's id be assigned to in order to display data?

The id must be dataGroup.

About the author