Creating a linear gradient roll over background on a Spark List in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/24/creating-a-linear-gradient-roll-over-background-on-a-spark-list-in-flex-gumbo/ -->
<s:Application name="Spark_List_itemRenderer_rollOverColor_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">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="rollOverColor:">
                <mx:ColorPicker id="colorPicker1" selectedColor="red" />
            </mx:FormItem>
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker2" selectedColor="purple" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:List id="list"
            itemRenderer="skins.CustomDefaultItemRenderer"
            rollOverColor="{colorPicker1.selectedColor}"
            contentBackgroundColor="{colorPicker2.selectedColor}"
            horizontalCenter="0"
            verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/24/creating-a-linear-gradient-roll-over-background-on-a-spark-list-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}"
                    color.normalAndShowsCaret="{contentBackgroundColor}"
                    color.hoveredAndShowsCaret="{rollOverColor}"
                    color.selected="{selectionColor}"
                    color.selectedAndShowsCaret="{selectionColor}" />
        </s:fill>
        <s:fill.hovered>
            <s:LinearGradient>
                <s:GradientEntry color="{rollOverColor}" />
                <s:GradientEntry color="{contentBackgroundColor}" />
            </s:LinearGradient>
        </s:fill.hovered>
    </s:Rect>
 
    <s:SimpleText id="labelDisplay"
            verticalCenter="0"
            left="3" right="3" top="6" bottom="4" />
 
</s:ItemRenderer>