The following example demonstrates how you can add embedded icons to a Flex Accordion container.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/27/adding-icons-to-a-flex-accordion-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/bulletCheck.png")]
private var BulletCheck:Class;
[Bindable]
[Embed(source="assets/bulletWarning.png")]
private var BulletWarning:Class;
[Bindable]
[Embed(source="assets/bulletCritical.png")]
private var BulletCritical:Class;
]]>
</mx:Script>
<mx:XML id="itemsXML">
<items>
<item label="Item 1" status="warning" />
<item label="Item 2" status="critical" />
<item label="Item 3" status="critical" />
<item label="Item 4" status="check" />
<item label="Item 5" status="warning" />
<item label="Item 6" status="check" />
<item label="Item 7" status="check" />
<item label="Item 8" status="critical" />
</items>
</mx:XML>
<mx:ApplicationControlBar dock="true">
<mx:Label text="selectedIndex: {accordion.selectedIndex}" />
<mx:Spacer width="100" />
<mx:Label text="label: {accordion.getHeaderAt(accordion.selectedIndex).label}" />
</mx:ApplicationControlBar>
<mx:Accordion id="accordion"
width="400"
height="200">
<mx:VBox label="Success"
icon="{BulletCheck}"
width="100%"
height="100%">
<mx:DataGrid id="successGrid"
dataProvider="{itemsXML.item.(@status == 'check')}"
width="100%"
height="100%">
</mx:DataGrid>
</mx:VBox>
<mx:VBox label="Warning"
icon="{BulletWarning}"
width="100%"
height="100%">
<mx:DataGrid id="warningGrid"
dataProvider="{itemsXML.item.(@status == 'warning')}"
width="100%"
height="100%">
</mx:DataGrid>
</mx:VBox>
<mx:VBox label="Critical"
icon="{BulletCritical}"
width="100%"
height="100%">
<mx:DataGrid id="criticalGrid"
dataProvider="{itemsXML.item.(@status == 'critical')}"
width="100%"
height="100%">
</mx:DataGrid>
</mx:VBox>
</mx:Accordion>
</mx:Application>
View source is enabled in the following example.



{ 1 comment… read it below or add one }
hei
i am in the situation in which i want to add an icon that is a preview of what happen in the content of accordion tab.
so i need to add something more that a class name, i want to have control to instance for add listeners and treat it like a view, in the same way i treat content of accordion.
how can i do??