Adding icons to a Flex Accordion control

The following example demonstrates how you can add embedded icons to a Flex Accordion container.

Full code after the jump.

View MXML

<?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.

Tagged as: getHeaderAt(), icon, selectedIndex