[Flex] Accordion系列 - Header背景图的设置

<?xml version="1.0" encoding="utf-8"?>
<!--Flex中如何通过getHeaderAt()函数以及selectedUpIcon,selectedOverIcon和selectedDownIcon样式给Accordion头部设置一个分割用图标的例子-->
<s:Application name="Accordion_getHeaderAt_selectedUpIcon_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.controls.Button;
            
            [Embed("assets/bullet_red.png")]
            private const RedIcon:Class;
            
            [Embed("assets/bullet_orange.png")]
            private const OrangeIcon:Class;
            
            [Embed("assets/bullet_yellow.png")]
            private const YellowIcon:Class;
            
            [Embed("assets/bullet_green.png")]
            private const GreenIcon:Class;
            
            [Embed("assets/bullet_blue.png")]
            private const BlueIcon:Class;
            
            [Embed("assets/bullet_star.png")]
            private const StarIcon:Class;

            protected function accordion_creationCompleteHandler(event:FlexEvent):void
            {
                var idx:uint;
                var len:uint = accordion.numChildren;
                var btn:Button;
                for (idx=0; idx<len; idx++) {
                    btn = accordion.getHeaderAt(idx);
                    btn.useHandCursor = true;
                    btn.buttonMode = true;
                    btn.setStyle("selectedUpIcon", StarIcon);
                    btn.setStyle("selectedOverIcon", StarIcon);
                    btn.setStyle("selectedDownIcon", StarIcon);
                }

            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <mx:Accordion id="accordion" openDuration="250" width="100%"  height="100%" creationComplete="accordion_creationCompleteHandler(event)">
        <mx:VBox id="redVbox" label="Red" icon="{RedIcon}" />
        <mx:VBox id="orangeVbox" label="Orange" icon="{OrangeIcon}" />
        <mx:VBox id="yellowVbox" label="Yellow" icon="{YellowIcon}" />
        <mx:VBox id="greenVbox"     label="Green" icon="{GreenIcon}" />
        <mx:VBox id="blueVbox" label="Blue" icon="{BlueIcon}" />
    </mx:Accordion>
</s:Application>