<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" width="350" viewSourceURL="srcview/index.html">
    
    <s:Group top="10" left="10">
        
        <s:Label text="Task" fontWeight="bold" y="15" />
        <s:Label text="Status" fontWeight="bold" fontSize="10" y="5" x="233" />
        
        <s:Ellipse width="10" height="10" x="220" y="20" alpha="0.5">
            <s:fill>
                <s:SolidColor color="green" />
            </s:fill>
        </s:Ellipse>
        
        <s:Ellipse width="10" height="10" x="243" y="20" alpha="0.5">
            <s:fill>
                <s:SolidColor color="yellow" />
            </s:fill>
        </s:Ellipse>
        
        <s:Ellipse width="10" height="10" x="268" y="20" alpha="0.5">
            <s:fill>
                <s:SolidColor color="red" />
            </s:fill>
        </s:Ellipse>
        
        <s:List width="300" height="200" y="35">
            <s:dataProvider>
                <s:ArrayList>
                    <fx:Object text="Task one" />
                    <fx:Object text="Task two" />
                    <fx:Object text="Task three" />
                    <fx:Object text="Task four" />
                    <fx:Object text="Task five" />
                    <fx:Object text="Task six" />
                    <fx:Object text="Task seven" />
                    <fx:Object text="Task eight" />
                    <fx:Object text="Task nine" />
                    <fx:Object text="Task ten" />
                    <fx:Object text="Task eleven" />
                    <fx:Object text="Task twelve" />
                    <fx:Object text="Task thirteen" />
                    <fx:Object text="Task fourteen" />
                    <fx:Object text="Task fifteen" />
                    <fx:Object text="Task sixteen" />
                </s:ArrayList>
            </s:dataProvider>
            <s:itemRenderer>
                <fx:Component>
                    <s:DataRenderer>
                        <fx:Script>
                            <![CDATA[
                                
                                /**
                                 * Update the renderer for this data item
                                 */
                                override public function set data(value:Object):void {
                                    super.data = value;
                                    if (data == null)
                                        return;
                                    
                                    // update the Label
                                    lbl.text = data.text;
                                    
                                    // update the currentState
                                    currentState = data.currentState;
                                    
                                    // update the selected radio button
                                    rbg.selectedValue = data.currentState;
                                    
                                    // unselect all radio buttons if one hasn't been selected yet
                                    if (data.currentState == "undefined" || data.currentState == null)
                                        rbg.selection = null;
                                }
                                
                                /**
                                 * Update the state of the renderer when the selected radio button changes
                                 */
                                private function updateState():void {
                                    // update the currentState
                                    currentState = String(rbg.selectedValue);
                                    
                                    // store the value of the currentState in the data item for this renderer
                                    // this will allow us to use virtual layout
                                    data.currentState = currentState;
                                }
                            ]]>
                        </fx:Script>
                        <fx:Declarations>
                            <s:RadioButtonGroup id="rbg" change="updateState()" />
                        </fx:Declarations>
                        <s:states>
                            <s:State name="defaultState" />
                            <s:State name="state1" />
                            <s:State name="state2" />
                            <s:State name="state3" />
                        </s:states>
                        
                        <s:Rect width="100%" height="100%" alpha="0.5">
                            <s:fill>
                                <s:SolidColor color="0xFFFFFF" color.state1="green" color.state2="yellow" color.state3="red" />
                            </s:fill>
                        </s:Rect>
                        
                        <s:Label id="lbl" verticalCenter="0" left="4" top="6" bottom="6" />
                        
                        <s:HGroup right="0" verticalCenter="0">
                            <s:RadioButton group="{rbg}" value="state1" />
                            <s:RadioButton group="{rbg}" value="state2" />
                            <s:RadioButton group="{rbg}" value="state3" />
                        </s:HGroup>
                        
                    </s:DataRenderer>
                </fx:Component>
            </s:itemRenderer>
        </s:List>
    </s:Group>
    
</s:Application>