Creating a linear gradient background fill on a Spark List control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/25/creating-a-linear-gradient-background-fill-on-a-spark-list-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_background_LinearGradient_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:List id="list"
            skinClass="skins.CustomListSkin"
            horizontalCenter="0"
            verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>The</fx:String>
                <fx:String>Quick</fx:String>
                <fx:String>Brown</fx:String>
                <fx:String>Fox</fx:String>
                <fx:String>Jumps</fx:String>
                <fx:String>Over</fx:String>
                <fx:String>The</fx:String>
                <fx:String>Lazy</fx:String>
                <fx:String>Dog</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/25/creating-a-linear-gradient-background-fill-on-a-spark-list-control-in-flex-gumbo/ -->
<s:SparkSkin name="CustomListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="112" minHeight="112"
        alpha.disabled="0.5"
        blendMode="normal"> 
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.List")]
    ]]>
    </fx:Metadata>
 
    <fx:Script>
        /* Define the skin elements that should not be colorized.
           For list, the skin itself is colorized but the individual parts are not. */
        static private const exclusions:Array = ["scroller", "background"];
 
        override public function get colorizeExclusions():Array {return exclusions;}
 
        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = [];
 
        override public function get contentItems():Array {return contentFill};
    </fx:Script>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="0x686868" weight="1"/>
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the background appearance of the list-based component. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <s:LinearGradient id="bgFill" rotation="90">
                <s:GradientEntry color="red" />
                <s:GradientEntry color="white" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!--- The Scroller component to add scroll bars to the list. -->
    <s:Scroller id="scroller"
            left="0" top="0" right="0" bottom="0"
            minViewportInset="1"
            focusEnabled="false">
        <!--- The container for the data items. -->
        <s:DataGroup id="dataGroup" itemRenderer="skins.CustomDefaultItemRenderer">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="5" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
 
</s:SparkSkin>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/25/creating-a-linear-gradient-background-fill-on-a-spark-list-control-in-flex-gumbo/ -->
<s:ItemRenderer name="CustomDefaultItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        focusEnabled="false">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret"/>
        <s:State name="hoveredAndShowsCaret"/>
        <s:State name="selectedAndShowsCaret"/>
    </s:states>
 
    <fx:Script>
        <![CDATA[
            override public function set label(value:String):void {
                super.label = value;
                labelDisplay.text = label; 
            }
        ]]>
    </fx:Script>
 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke.normalAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}"
                    weight="1"/>
        </s:stroke.normalAndShowsCaret>
        <s:stroke.hoveredAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}"
                    weight="1"/>
        </s:stroke.hoveredAndShowsCaret>
        <s:stroke.selectedAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}"
                    weight="1"/>
        </s:stroke.selectedAndShowsCaret>
        <s:fill>
            <s:SolidColor color.normal="{contentBackgroundColor}" alpha.normal="0"
                    color.normalAndShowsCaret="{contentBackgroundColor}"
                    color.hovered="{rollOverColor}"
                    color.hoveredAndShowsCaret="{rollOverColor}"
                    color.selected="{selectionColor}"
                    color.selectedAndShowsCaret="{selectionColor}" />
        </s:fill>
    </s:Rect>
 
    <s:SimpleText id="labelDisplay"
            verticalCenter="0"
            left="3" right="3" top="6" bottom="4"/>
 
</s:ItemRenderer>