0 Replies Latest reply on Sep 30, 2009 8:17 PM by Danimall

    Dynamically draw Shapes/Graphics as icons for Accordian Headers

    Danimall

      Hello,

       

      I have an example below of how to dynamically set the icons of the Accordian headers using embedd image classes.  What I would like to do is instead of using a pre-created image, I would like to somehow use the graphics classes to draw the icon dynamically.  For instance, for each one below I want to have the Icons be a simple square shape, containing the First letter of the label field, alternating the fill color.

       

      What would be a good way to do this?  Although I've been using flex for awhile, I'm very new to the graphics api.  Thanks in advance.

       

       

       

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