Flex 4 Skin with ItemRenderer for a Spark List Control

This is an example of a Flex 4 skin which provides a Spark List control with a completely customized appearance. This example has a border with rounded corners, a custom background color and different colors chosen for the rollover and selected colors. A custom ItemRenderer was included in order to get the desired rollover & selected colors along with other visual characteristics.

Spark List Control Skin

The skin is based on the standard ListSkin that you get when you create a new skin and choose the “Create as a copy of” checkbox in Flash Builder. The unnecessary code has been removed so that just the code that’s essential for this example remains. Here’s the essential code for this List skin:

<!-- border around entire list -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border" 
        topLeftRadiusX="10" topLeftRadiusY="10" 
        topRightRadiusX="10" topRightRadiusY="10" 
        bottomLeftRadiusX="10" bottomLeftRadiusY="10" 
        bottomRightRadiusX="10" bottomRightRadiusY="10"
        >
    <s:fill>
        <s:SolidColor id="bgFill" color="0xf9efe0" alpha="1"  />
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke id="borderStroke" color="0x793321" weight="4"/>
    </s:stroke>
</s:Rect>
 
<!--- The Scroller component to add scroll bars to the list. -->
<!-- left/right values are adjusted here to prevent the 
      rolloverColor/selectionColor from overlapping onto the border.  -->
<s:Scroller left="4" top="10" right="4" bottom="10" id="scroller" 
	minViewportInset="1" hasFocusableChildren="false">
    <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="contentJustify" 
            	requestedMinRowCount="5" />
        </s:layout>
    </s:DataGroup>
</s:Scroller>

The Rect draws the rounded rectangle border around the List and fills it with the tan color.

Next comes the Scroller and DataGroup which contains the List’s data items. Since there is no layout specified the Scroller with DataGroup is displayed right on top of the background Rect. I’m specifying 10 pixels for the top and bottom properties so that the rollover and selected highlights don’t overlap the rounded corners. Similarly, the left and right properties make sure that the rollover and selected hightlights don’t overlap the left/right borders. The remaining parameters use the default values.

ListItemRenderer

In order to get the desired appearance for this List it was also necessary to create an ItemRenderer. The rollOverColor and selectionColor are the Label’s background colors while the mouse is over the label and when the list item is selected. Those styles are applied here with a snippet of code on creationComplete:

private function init():void
{
    setStyle("rollOverColor", 0x6f534b);
    setStyle("selectionColor", 0xd0998a);
}

Note that rollOverColor and selectionColor are styles of the List control to which this ItemRenderer will be applied. Instead of ActionScript these styles could also be applied with CSS. This would allow the colors to be changed without recompiling the SWF. See the Flex SDK docs for more info on skin styles.

In addition to the background colors, the text colors are set in the Label tag:

<s:Label id="labell" text="{data}" paddingBottom="4" paddingTop="4" 
		 paddingLeft="15" paddingRight="15"  width="85" 
		 color.hovered="0xffffff" color.selected="0x000000"  />

The state notation is used to set the hovered and selected text colors.

Top & bottom padding is applied to provide some vertical spacing between list items. Finally, some left & right padding is applied to prevent the text from touching the list border.

Testing the Skinned List

Some test data is created on applicationComplete:

[Bindable]
public var _dataProvider:ArrayCollection;
 
public function init():void
{
    _dataProvider = new ArrayCollection(["one", "two", "three", "four", "five","six"]);
}

and the list is instantiated:

<s:List dataProvider="{_dataProvider}" skinClass="ListSkinSample"
         itemRenderer="ListItemRenderer"  />

Download the Flex 4 project (FXP file).

Tagged as: Item Renderers, Skinning