Creating a simple Flex Accordion inline header renderer

The following example shows how you can create a simple, inline header renderer in Flex which uses the Button control for a Flex Accordion header.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?><!-- http://blog.flexexamples.com/2007/09/24/creating-a-simple-flex-accordion-inline-header-renderer/ --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"        layout="vertical"        verticalAlign="middle"        backgroundColor="white">    <mx: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;        ]]>    </mx:Script>    <mx:Accordion id="accordion" backgroundAlpha="0.0"            height="100%"            width="100%"            headerHeight="32"            borderStyle="none"            historyManagementEnabled="false">        <mx:headerRenderer>            <mx:Component>                <mx:Button fontWeight="normal"                        labelPlacement="left"                        textAlign="left"                        cornerRadius="{outerDocument.accordion.getStyle('headerHeight')/2}" />            </mx: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></mx:Application>

View source is enabled in the following example.

 

 

文章引用：http://blog.flexexamples.com/2007/09/24/creating-a-simple-flex-accordion-inline-header-renderer/