4 Replies Latest reply on Aug 3, 2007 8:15 AM by dimival

    Tab Navigator

    adams222
      I am creating a Wizard using a TabNavigator.
      The tabs work fine, but I am adding Back and Next buttons to each page so a user can easily navigate through the wizard.
      I'm trying to figure out how to get the Next button to take me to the next VBox.
      My guess is that I need to modify my Event Handler, but I'm new to using Flex so I have no clue what I need to do.

      Any suggestions?
        • 1. Re: Tab Navigator
          dimival Level 1
          I think you can do this inside the function of your Next button:

          myTabName.selectedIndex++;

          Try it out
          • 2. Re: Tab Navigator
            Rajesh.Gowdety's
            for forward direction you can try using myTabNavigator.selectedIndex++ and dont use for last tab.
            for backward direction you can try using myTabNavigator.selectedIndex- - and dont use for first tab.
            • 3. Re: Tab Navigator
              adams222 Level 1
              Thank you!
              Yes, incrementing and decrementing the selectedIndex worked great.
              I also realized that I had to disable the Back and Next buttons, depending on which tab I was on, and I had to handle the mouseDown events on the TabNavigator and VBox. That way, if a user clicks on the tabs, instead of using the buttons, the buttons will still get enabled and disabled properly.
              Here are the functions:

              private function activateNextVBox():void
              {
              NAVIGATOR.selectedIndex = NAVIGATOR.selectedIndex + 1;
              enableDisableNavButtons();
              }

              private function activateLastVBox():void
              {
              NAVIGATOR.selectedIndex = NAVIGATOR.selectedIndex - 1;
              enableDisableNavButtons();
              }

              private function enableDisableNavButtons():void
              {
              if (NAVIGATOR.selectedIndex == 0)
              BackButton.enabled = false;
              else
              BackButton.enabled = true;
              if (NAVIGATOR.selectedIndex >= (NAVIGATOR.numChildren-1))
              NextButton.enabled = false;
              else
              NextButton.enabled = true;
              }

              And here is my TabNavigator, VBox, and buttons:
              <mx:TabNavigator id="NAVIGATOR" width="640" height="500" mouseDown="enableDisableNavButtons()" activate="enableDisableNavButtons()">
              <mx:VBox id="WelcomeContainer" label="Welcome" mouseDown="enableDisableNavButtons()" verticalAlign="middle" horizontalAlign="center">
              <mx:Button id="BackButton" enabled="false"
              label="Back"
              click="activateLastVBox()">
              </mx:Button>
              <mx:Button id="NextButton"
              label="Next"
              click="activateNextVBox()">
              </mx:Button>
              • 4. Re: Tab Navigator
                dimival Level 1
                Glad to hear you managed to make it work, don't forget to close the topic marking a post as an answer.