1 Reply Latest reply on May 16, 2011 12:07 PM by hbllproductionunit

    Coding selectedIndexes in a ViewStack

    hbllproductionunit

      I'm trying to create something like the below, but using AS3 in a loop.

       

      [CODE]

      <mx:ViewStack id="buttonImage" x="0" y="0"
                                      selectedIndex.up="0" selectedIndex.down="1" selectedIndex.disabled="2"
                                      selectedIndex.up2="3" selectedIndex.down2="4" selectedIndex.disabled2="5"
                                      selectedIndex.up3="6" selectedIndex.down3="7">
              <!-- Index 0 -->
              <s:NavigatorContent id="upState">
                  <mx:Image source="assets/{upButtonPath}" />
              </s:NavigatorContent>
              <!-- Index 1 -->
              <s:NavigatorContent id="downState">
                  <mx:Image source="assets/{downButtonPath}" />
              </s:NavigatorContent>
              <!-- Index 2 -->
              <s:NavigatorContent id="disabledState">
                  <mx:Image source="assets/{disabledButtonPath}" />
              </s:NavigatorContent>
              <!-- Index 3 -->
              <s:NavigatorContent id="up2State">
                  <mx:Image source="assets/{up2ButtonPath}" />
              </s:NavigatorContent>
              <!-- Index 4 -->
              <s:NavigatorContent id="down2State">
                  <mx:Image source="assets/{down2ButtonPath}" />
              </s:NavigatorContent>
              <!-- Index 5 -->
              <s:NavigatorContent id="disabled2State">
                  <mx:Image source="assets/{disabled2ButtonPath}" />
              </s:NavigatorContent>
              <!-- Index 6 -->
              <s:NavigatorContent id="up3State">
                  <mx:Image source="assets/{up3ButtonPath}" />
              </s:NavigatorContent>
              <!-- Index 7 -->
              <s:NavigatorContent id="down3State">
                  <mx:Image source="assets/{down3ButtonPath}" />
              </s:NavigatorContent>
          </mx:ViewStack>

      [/CODE]

       

      My code currently looks like this:

       

      [CODE]

      <fx:Script>

          private function buildNavigator():void

          {

              var navContent:NavigatorContent;
              var image:Image;
              for(var i:int=0; i<states.length; i++)
              {
                  navContent = new NavigatorContent();
                  image = new Image();
                  navContent.id = String(i);
                  image.source = "assets/volumebars_" + i + ".png";
                  // attach the needed selectedIndex.stateAtThisIndex=i
              }
          }

      </fx:Script>

       

      <mx:ViewStack id="volumeIndicator">
             
      </mx:ViewStack>

       

      [/CODE]

       

      Anyway, does anybody know how to do this? Thanks!

        • 1. Re: Coding selectedIndexes in a ViewStack
          hbllproductionunit Level 1

          Instead, I wound up dynamically building my states array. I set imageRootString and imageExtension, which hold strings for my image file paths (parts of them). I then call this code below.  I also have to loop through the different states, because otherwise the  images wouldn't be loaded or cached by Flex (as far as I can tell). Finally, I change the "state" by manually setting the selectedIndex using a variable passed through from this thing's parent element:

           

          [CODE]

                  private function buildNavigator():void
                   {
                       var navContent:NavigatorContent;
                       var image:Image;
                       for(var i:int=0; i<states.length; i++)
                       {
                           navContent = new NavigatorContent();
                           navContent.id = String(i);
                           image = new Image();
                           image.source = "assets/" + imageRootString + i + "." + imageExtension;
                           navContent.addElement(image);
                           volumeIndicator.addChild(navContent);
                           volumeIndicator.selectedIndex = i;
                       }
                       volumeMaxImg = new Image();
                       volumeMinImg = new Image();
                       volumeMaxImg.source = "assets/" + imageRootString + "max." + imageExtension;
                       volumeMinImg.source = "assets/" + imageRootString + "min." + imageExtension;
                       graphicHolder.addElement(volumeMaxImg);
                       graphicHolder.addElement(volumeMinImg);
                       connectImagesTimer = new Timer(500, 1);
                       connectImagesTimer.addEventListener(TimerEvent.TIMER_COMPLETE, loopThroughStates);
                       connectImagesTimer.start();
                   }

           

                  private function loopThroughStates(event:TimerEvent):void
                  {
                      volumeIndicator.selectedIndex = currentStateInLoop;
                      currentStateInLoop = currentStateInLoop + 1;
                      if(currentStateInLoop == 0)
                      {
                          volumeMaxImg.visible = true;
                          volumeMinImg.visible = true;
                      }
                      if(currentStateInLoop<states.length)
                      {
                          connectImagesTimer.start();
                      } else {
                          volumeMaxImg.visible = false;
                          volumeMinImg.visible = false;
                          connectImagesTimer.removeEventListener(TimerEvent.TIMER_COMPLETE, loopThroughStates);
                          volumeIndicator.selectedIndex = 0;
                      }

           

                  public function setVolumeState(volumeIndexToShow:int):void
                  {
                      volumeIndicator.selectedIndex = volumeIndexToShow;
                  }

          [/CODE]

           

          I also have this for my MXML:

           

              <s:Group id="graphicHolder">
                  <mx:ViewStack id="volumeIndicator">
                     
                  </mx:ViewStack>
              </s:Group>

           

          Anyway, that works just fine for what I need. Hopefully, this can help somebody else out, too!