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/