- Requirements
Prerequisite knowledge Required products Sample files
 
Flash Builder 4.7 Premium (Download trial)
User level    
Beginning    

 

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.
 
Review your task for this exercise.
Figure 1. Review your task for this exercise.
In this exercise you will learn how to:
 

 
Use the SkinnableDataContainer component

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.
     
Run the application.
Figure 2. Run the application.
  1. Return to the ex5_09_starter.mxml file in Flash Builder.
  2. Below the UI components comment, locate the DataGroup container.
  3. Change the DataGroup container into a SkinnableDataContainer component.
<s:SkinnableDataContainer dataProvider="{employeeList}" itemRenderer="components.EmployeeItemRenderer"/>
  1. Save the file and run the application.
You should see no change in the application.
 

 
Apply a skin to the SkinnableDataContainer component

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).
Click the Create Skin option in the Properties view.
Figure 3. Click the Create Skin option in the Properties view.
  1. In the New MXML Skin dialog box, type skins for the Package and type BackgroundSkin for the Name.
Fill out the New MXML Skin dialog box.
Figure 4. Fill out the New MXML Skin dialog box.
  1. Click Finish.
    You should see the BackgroundSkin.mxml file open in the Editor view.
     
  2. 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.
     
  3. Below the states block, create a Rect primitive block.
<s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <s:Rect> </s:Rect>
  1. 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.
<s:Rect height="100%" width="120" radiusX="4" radiusY="4"> </s:Rect>
  1. Within the Rect block, create a fill block.
<s:Rect height="100%" width="120" radiusX="4" radiusY="4"> <s:fill> </s:fill> </s:Rect>
  1. 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.
<s:Rect height="100%" width="120" radiusX="4" radiusY="4"> <s:fill> <s:SolidColor alpha=".4" color="0x000000"/> </s:fill> </s:Rect>
  1. Save the file.
  2. Return to the ex5_09_starter.mxml file and switch to Source mode.
  3. In the SkinnableDataContainer container, note that the skinClass property has been added with a value of skins.BackgroundSkin.
<s:SkinnableDataContainer dataProvider="{employeeList}" itemRenderer="components.EmployeeItemRenderer" skinClass="skins.BackgroundSkin"/>
  1. 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.
     
Run the application to sthe skinned SkinnableDataContainer component.
Figure 5. Run the application to sthe skinned SkinnableDataContainer component.
  1. Return to the BackgroundSkin.mxml file in Flash Builder.
  2. To the DataGroup container, add the horizontalCenter property with a value of 0.
<s:DataGroup id="dataGroup" ... horizontalCenter="0"> ... </s:DataGroup>
  1. From the DataGroup container, remove the left, right, and top properties.
  2. To the DataGroup container, reassign the bottom property with a value of 5.
  3. 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.
 
Run the application to see the data centered in the skin.
Figure 6. Run the application to see the data centered in the skin.

 
Create the hover state

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.
<s:DataGroup id="dataGroup" top="5" bottom="5" minWidth="0" minHeight="0" horizontalCenter="0">
  1. Save the file and run the application.
  2. Mouse over an employee.
    Note that the rectangle you saw before is now gone.
     
  3. Return to the EmployeeItemRenderer.mxml file.
  4. Locate the states block.
  5. Below the normal State tag, add another instance of the State tag and add the name property with a value of hovered.
<s:states> <s:State name="normal"/> <s:State name="hovered"/> </s:states>
  1. Locate the BorderContainer block. This container draws the background for each item renderer and also displays the employee data.
  2. 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.
<s:Rect height="100%" width="100%"> </s:Rect>
  1. Within the Rect block, create a fill property tag block.
  2. 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.
<s:fill> <s:SolidColor color="#FFFFFF"/> </s:fill>
  1. To the SolidColor instance, add the alpha property with a value of .2. This will make the highlight transparent.
<s:fill> <s:SolidColor color="#FFFFFF" alpha=".2"/> </s:fill>
  1. 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.
<s:Rect height="100%" width="100%" includeIn="hovered">
  1. 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.
<s:fill> <s:SolidColor color.hovered="#FFFFFF" alpha=".2"/> </s:fill>
  1. Save the file and run the application.
  2. Mouse over one of the employees.
You should see the employee is highlighted with a transparent white box (see Figure 7).
 
The employee data is highlighted when you mouse over it.
Figure 7. The employee data is highlighted when you mouse over it.
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.
 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.