I have lately contributed an example to a discussion on the "Adobe Flex Developers" LinkedIn Group. As the example seemed to have success among the participants, I'm publishing it here so that more people can benefit from it (I hope).
The example shows how to customze the look of the Accordion component, especially the accordion headers. The starting point was an posted by the user who started the discussion to show the desired design. From this image, we can deduce the following characteristics:
- Special headers that are different for the open and closed states of the tabs
- A gap between the children of the accordion
- No background
- No border
- Header and corresponding child have the same width
To create our own skin for the headers, we can use the headerRenderer property of the component. This must be set to a factory that creates the desired object for the header. According to the documentation, the created object must be a subclass of Button and implement the mx.core.IDataRenderer interface. The Button control already implements this interface and our case is simple enough to simply use a Button and skin it according to our needs. So all that remains to do is to create the skins in Flash and skin our Button taking care of skinning for both selected (open) and not selected (closed) states. The simplest way to assign this button to the headerRenderer property is inline using the Component MXML tag:
<mx:Accordion
width="200" height="400"
verticalGap="5"
backgroundAlpha="0"
borderStyle="none"
paddingLeft="0" paddingRight="0"
creationPolicy="all"
>
<mx:headerRenderer>
<mx:Component>
<mx:Button
height="24"
textAlign="left"
upSkin="@Embed(source='../assets/accordion.swf', symbol='AccordionHeaderClosed')"
overSkin="@Embed(source='../assets/accordion.swf', symbol='AccordionHeaderClosed')"
downSkin="@Embed(source='../assets/accordion.swf', symbol='AccordionHeaderClosed')"
selectedUpSkin="@Embed(source='../assets/accordion.swf', symbol='AccordionHeaderOpen')"
selectedOverSkin="@Embed(source='../assets/accordion.swf', symbol='AccordionHeaderOpen')"
selectedDownSkin="@Embed(source='../assets/accordion.swf', symbol='AccordionHeaderOpen')"
/>
</mx:Component>
</mx:headerRenderer>
</mx:Accordion>
For the other properties, it's just a matter of setting some styles of the component. More specifically, we can set the gap with verticalGap, remove the background by setting backgroundAlpha="0", remove the border by setting borderStyle="none" and make the headers and children the same width by removing the paddings with paddingLeft="0" and paddingRight="0".
Check the along with all the source and assets available through source view (right-click / "View Source").
Enjoy!