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.

4 thoughts on “Adding icons to a Flex Accordion control

  1. I really like this simple example of adding icons to an Accordion.
    Very helpful!

    Would you know how to change the behavior of an Accordion?
    I am trying to figure out a way to customize an Accordion so that the VBoxes inside will remain open unless I click a triangle icon that I place on the VBox.
    Perhaps an Accordian is not what I really want to use, but so far, it seems like an Accordion has everything I want, except that it only allows one page, or VBox, to be open at a time.
    Do you have any ideas on how to override the behavior of an Accordion so that it only opens and closes each section when I call that event? (Also, what event would I call?)

    Thanks in advanced!
    L. Jay Adams

  2. If I want to add icon into rows of AdvancedDataGrid, then what I must do? Can you instruct me. Thanks much.

    chary

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

  4. is it possible to add clickable icon/button to the right of accordion’s each header?
    visibility of those icon/button is depend on accordion child’s content selection.

    if this is possible…how can i implement?

Comments are closed.