The following example shows how you can set a separate icon on an Accordion header when the header is selected by looping over each header [...]]]> In a previous example, “Adding icons to a Flex Accordion control”, we saw how you could add embedded icons to a Flex Accordion container by setting the icon style.

The following example shows how you can set a separate icon on an Accordion header when the header is selected by looping over each header using the getHeaderAt() method and setting the selectedUpIcon, selectedOverIcon, and selectedDownIcon styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/16/adding-icons-to-a-flex-accordion-control-redux/ -->
<mx:Application name="Accordion_getHeaderAt_selectedUpIcon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Button;

            [Embed("assets/bullet_red.png")]
            private const RedIcon:Class;

            [Embed("assets/bullet_orange.png")]
            private const OrangeIcon:Class;

            [Embed("assets/bullet_yellow.png")]
            private const YellowIcon:Class;

            [Embed("assets/bullet_green.png")]
            private const GreenIcon:Class;

            [Embed("assets/bullet_blue.png")]
            private const BlueIcon:Class;

            [Embed("assets/bullet_star.png")]
            private const StarIcon:Class;

            private function init():void {
                var idx:uint;
                var len:uint = accordion.numChildren;
                var btn:Button;
                for (idx=0; idx<len; idx++) {
                    btn = accordion.getHeaderAt(idx);
                    btn.useHandCursor = true;
                    btn.buttonMode = true;
                    btn.setStyle("selectedUpIcon", StarIcon);
                    btn.setStyle("selectedOverIcon", StarIcon);
                    btn.setStyle("selectedDownIcon", StarIcon);
                }
            }
        ]]>
    </mx:Script>

    <mx:Accordion id="accordion"
            openDuration="0"
            width="100%"
            height="100%"
            creationComplete="init();">
        <mx:VBox id="redVbox"
                label="Red"
                icon="{RedIcon}" />
        <mx:VBox id="orangeVbox"
                label="Orange"
                icon="{OrangeIcon}" />
        <mx:VBox id="yellowVbox"
                label="Yellow"
                icon="{YellowIcon}" />
        <mx:VBox id="greenVbox"
                label="Green"
                icon="{GreenIcon}" />
        <mx:VBox id="blueVbox"
                label="Blue"
                icon="{BlueIcon}" />
    </mx:Accordion>

</mx:Application>

 

Is it possible to color individual headers of the accordion?

Well, I played around with it briefly this evening and it seems that you can get individual accordion headings using the Accordion class’s getHeaderAt() method, then it is just a matter of saving that [...]]]> Loyal reader, Madhu, asked the following question the other day:

Is it possible to color individual headers of the accordion?

Well, I played around with it briefly this evening and it seems that you can get individual accordion headings using the Accordion class’s getHeaderAt() method, then it is just a matter of saving that reference in a variable, or applying a style directly to the returned Button reference.

The example itself is pretty simple, but I’m sure the same principles apply to other styles as well.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/30/setting-styles-on-individual-flex-accordion-headers/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        AccordionHeader {
            fillColors: black, black;
            fillAlphas: 1, 1;
            textRollOverColor: white;
            textSelectedColor: white;
            themeColor: black;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function init():void {
                accordion.getHeaderAt(0).setStyle("color", "red");
                accordion.getHeaderAt(1).setStyle("color", "haloOrange");
                accordion.getHeaderAt(2).setStyle("color", "yellow");
                accordion.getHeaderAt(3).setStyle("color", "haloGreen");
                accordion.getHeaderAt(4).setStyle("color", "haloBlue");
            }
        ]]>
    </mx:Script>

    <mx:Accordion id="accordion"
            width="300"
            height="200"
            creationComplete="init();">
        <mx:VBox label="Red" />
        <mx:VBox label="Orange" />
        <mx:VBox label="Yellow" />
        <mx:VBox label="Green" />
        <mx:VBox label="Blue" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML