[flex4] custom Spark item renderer

http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9-23c04461124bbeca597-8000.html#WSCE72ECF5-4631-436f-A821-D70693559F93


css에서 list에 컬러 적용할때 alternatingItemColors="#fFF0000, #00FF00"; 처럼 사용하는데
skin으로 사용할때 랜더러안에서 alternatingItemColors처럼 컬러가 교차로 나오게 하기위함..

랜더러 에서 스킨을 디자인할때 중요한 autoDrawBackground는 기본값이 true이기 때문에
랜더러 안에서 스킨을 사용할때는 반드시 autoDrawBackground="false" 줘야하고(false를 주지않으면 Background가 지워지지않음)
true일때는 css로 컬러 조정함~

contentBackgroundColor = 0xFFFFFF;

rollOverColor = 0xCEDBEF;

selectionColor = 0xA8C6EE; 


<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\myComponents\MyAlternatingItemRenderer.mxml -->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    autoDrawBackground="false">
   
    <fx:Script>
        <![CDATA[
           
            // Make the default background color white.
            [Bindable]
            public var myBGColor:int = 0xFFFFFF;
           
            // Override the itemIndex set function to draw a
            // white background behind even number items,
            // and a green background behind odd numbered items.
            override public function set itemIndex(value:int):void {
                if ((value%2) == 0) {
                    myBGColor= 0xFFFFFF;
                }
                if ((value%2) == 1) {
                    myBGColor= 0xCCFF66;
                }
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
    </s:states>

    <s:Rect id="myRect"
        left="0" right="0" top="0" bottom="0"
        alpha="1.0">
        <s:stroke>
            <s:SolidColorStroke
                color="0xA8C6EE"
                weight="1"/>
        </s:stroke>
        <s:fill>
            <!-- Bind the myBGColor property to the fill color. -->
            <s:SolidColor
                color="{myBGColor}"/>
        </s:fill>
    </s:Rect>    
   
    <s:Label id="labelDisplay"
        verticalCenter="0"
        left="3" right="3" top="6" bottom="4"
        fontSize.hovered='14' fontStyle.hovered="italic"/>
</s:ItemRenderer>