[Flex] Accordion系列-Header的运用

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/Accordion.png")]
            private var AccordionIcon:Class;

            [Bindable]
            [Embed(source="assets/ApplicationControlBar.png")]
            private var ApplicationControlBarIcon:Class;

            [Bindable]
            [Embed(source="assets/Box.png")]
            private var BoxIcon:Class;

            [Bindable]
            [Embed(source="assets/Canvas.png")]
            private var CanvasIcon:Class;

            [Bindable]
            [Embed(source="assets/ControlBar.png")]
            private var ControlBarIcon:Class;

        ]]>
    </fx:Script>
    <mx:Accordion id="accordion" backgroundAlpha="0" height="100%" width="100%" headerHeight="32" historyManagementEnabled="false" openDuration="250">
        <mx:headerRenderer>
            <fx:Component>
                <mx:Button fontWeight="normal" labelPlacement="left" textAlign="left" cornerRadius="{outerDocument.accordion.getStyle('headerHeight')/2}" />
            </fx:Component>
        </mx:headerRenderer>
        <mx:VBox label="Accordion" icon="{AccordionIcon}">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

        <mx:VBox label="ApplicationControlBar" icon="{ApplicationControlBarIcon}">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

        <mx:VBox label="Box" icon="{BoxIcon}">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

        <mx:VBox label="Canvas" icon="{CanvasIcon}">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

        <mx:VBox label="ControlBar" icon="{ControlBarIcon}">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>
    </mx:Accordion>
</s:Application>