Adding icons to a Flex Accordion control (redux)

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>

8 thoughts on “Adding icons to a Flex Accordion control (redux)

  1. All your examples have been really helpful on improving my flex knowledge base…so thank you but I have one unFlex question… What plug-in are you using for wordpress for you code snippets?? I’m new to the wordpress world!

    Thanks!
    JoSh

  2. JoSh,

    The code snippets are just using the defalt <pre> tag for this theme, “Redoable”.
    It’s a pretty good theme, but I don’t think it it compatible with newer versions of WordPress.
    I’ve been considering a site redesign with a new theme, but honestly I just can’t be bothered.

    Peter

  3. Hi, you can help me and you give me a example .
    Load da from data(MySql) and show in frond end :

    Entry 1
    Name :
    Age:
    Email:
    Content:

    Entry 2
    Name :
    Age:
    Email:
    Content:

    Entry 3
    Name :
    Age:
    Email:
    Content:

    …..

    Entry
    Name :
    Age:
    Email:
    Content:

    And pagination 25 record in page.

    You help me :)

    Thanks.

Comments are closed.