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.

Tagged as: headerRenderer