Create an ActionScript item renderer as a subclass of the LabelItemRenderer class

The following example shows a view component for a mobile application:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\ListColor.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    title="Colors">
    <s:layout>
        <s:VerticalLayout paddingTop="10"/>
    </s:layout>
    
    <s:Label text="Favorites"/>
    <s:SkinnableDataContainer
        itemRenderer="myComponents.MySimpleColorRenderer"> 
        <mx:ArrayList>
            <fx:String>red</fx:String> 
            <fx:String>green</fx:String>
            <fx:String>blue</fx:String>
        </mx:ArrayList>  
    </s:SkinnableDataContainer> 
</s:View>

In this example, the SkinnableDataContainer contains three data items corresponding to three colors. In this example, you define an item renderer in the file MySimpleColorRenderer.as. Your custom item renderer displays the text of the data item and changes the background color of the data item to match the text.

Because this is a mobile application, for optimal performance create the item renderer as a subclass of the LabelItemRenderer class. This example does not change the way the data item is layed out in the container, only its background color. Therefore, you only override the LabelItemRenderer.drawBackground() method, and not the LabelItemRenderer.layoutContent() method.

The MySimpleColorRenderer.as item renderer is shown below:
package myComponents
{
    // containers\mobile\myComponents\MySimpleColorRenderer .as
    import spark.components.LabelItemRenderer;
    
    public class MySimpleColorRenderer extends LabelItemRenderer
    {
        public function MySimpleColorRenderer() {
            super();
        }
        
        // Use the value of the myColor property to draw 
        // the background color of the item in the list. 
        override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void {
            // Define a var to hold the color.
            var myColor:uint;

            // Determine the RGB color value from the label property.
            if (data == "red")
                myColor = 0xFF0000;
            if (data == "green")
                myColor = 0x00FF00;
            if (data == "blue")
                myColor = 0x0000FF;

            graphics.beginFill(myColor, 1);
            graphics.drawRect(0, 0, unscaledWidth, unscaledHeight); 
            
        }
    }
}

This item renderer accesses the LabelItemRenderer.data property in the override of the drawbackground() method to determine the background color of the item. The label property contains the String value to display in the item renderer.