Setting the item roll over color on a Spark List in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/23/setting-the-item-roll-over-color-on-a-spark-list-in-flex-gumbo/ -->
<s:Application name="Spark_List_rollOverColor_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:Form>
        <mx:FormItem label="rollOverColor:">
            <mx:ColorPicker id="colorPicker"
                    selectedColor="red" />
        </mx:FormItem>
    </mx:Form>
 
    <s:List id="list"
            rollOverColor="{colorPicker.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/23/setting-the-item-roll-over-color-on-a-spark-list-in-flex-gumbo/ -->
<s:Application name="Spark_List_rollOverColor_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|List {
            rollOverColor: haloOrange;
        }
    </fx:Style>
 
    <s:List id="list"
            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/23/setting-the-item-roll-over-color-on-a-spark-list-in-flex-gumbo/ -->
<s:Application name="Spark_List_rollOverColor_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">
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_changeHandler(evt:ColorPickerEvent):void {
                list.setStyle("rollOverColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <mx:Form>
        <mx:FormItem label="rollOverColor:">
            <mx:ColorPicker id="colorPicker"
                    selectedColor="red"
                    change="colorPicker_changeHandler(event)" />
        </mx:FormItem>
    </mx:Form>
 
    <s:List id="list"
            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/23/setting-the-item-roll-over-color-on-a-spark-list-in-flex-gumbo/ -->
<s:Application name="Spark_List_rollOverColor_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ColorPicker;
            import mx.events.ColorPickerEvent;
            import spark.components.List;
 
            private var colorPicker:ColorPicker;
            private var list:List;
 
            private function init():void {
                colorPicker = new ColorPicker();
                colorPicker.selectedColor = 0xFF0000;
                colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_changeHandler);
 
                var formItem:FormItem = new FormItem();
                formItem.label = "rollOverColor:";
                formItem.addChild(colorPicker);
 
                var form:Form = new Form();
                form.addChild(formItem);
                addElement(form);
 
                var arr:Array = ["The", "Quick", "Brown", "Fox", "Jumps", "Over", "The", "Lazy", "Dog"];
 
                list = new List();
                list.dataProvider = new ArrayList(arr);
                list.horizontalCenter = 0;
                list.verticalCenter = 0;
                addElement(list);
            }
 
            protected function colorPicker_changeHandler(evt:ColorPickerEvent):void {
                list.setStyle("rollOverColor", evt.color);
            }
        ]]>
    </fx:Script>
 
</s:Application>