4 Replies Latest reply on Apr 21, 2010 7:22 AM by DotNetJon

    tabNavigator.selectedIndex problem

    DotNetJon

      What I'm trying to do, is some data validation before allowing a user to change tabs, so I put some code in the change handler on the tabNavigator, which fires when a user clicks another tab. If the validation fails, then the code sets the selectedIndex back to the index of the previous tab.

       

      This all works fine, but for some reason, the tab which was clicked on becomes a "dead" tab, and no longer fires a change event when clicked on. Anyone know what is happening here, or a way to correct this issue?

       

      I've tried tabNavigator.validateNow(), but that didn't seem to do much.

       

      Many thanks!

        • 1. Re: tabNavigator.selectedIndex problem
          David_F57 Level 5

          hi,

           

          This is one of those questions that is nearly impossible to answer without seeing the logic that was applied to 'break' the component.

           

          I would think that validation should occur and then enable the ability to change tabs rather than tricking the tabs into acting as some sort of validation.

           

          The code below allows tab changes but will happily go back to a specific tab becuase a 'validation' failed, its not good practice but it doesn't try to play with the navigators change events which is possibly the cuase of your issues.

           

          Ideally tabs would only be enabled if they were permitted to be accessed, this is better workflow. In the meantime posting your code for the change event may enable someone to see why it broke the component and offer a solution.

           

          David.

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">

          <mx:Script>

          <![CDATA[

          import mx.events.FlexEvent;

          import mx.events.IndexChangedEvent;

           

          protected function canvas1_showHandler(event:FlexEvent):void

          {

          if (cb.selected==false) tn.selectedIndex=0;

          }

          ]]>

          </mx:Script>

          <mx:TabNavigator id="tn" x="257" y="171" width="816" height="386" creationPolicy="all">

          <mx:Canvas label="Tab 1" width="100%" height="100%">

          <mx:CheckBox id="cb" x="209" y="105" label="CheckBox" width="240" selected="true"/>

          </mx:Canvas>

          <mx:Canvas label="Tab 2" width="100%" height="100%" show="canvas1_showHandler(event)">

          </mx:Canvas>

          <mx:Canvas label="Tab 3" width="100%" height="100%" show="canvas1_showHandler(event)">

          </mx:Canvas>

          </mx:TabNavigator>

           

          </mx:Application>

          1 person found this helpful
          • 2. Re: tabNavigator.selectedIndex problem
            DotNetJon Level 1

            Thanks for your input David. Basically, the client wants the app to check to make sure a user has entered certain data before allowing them to leave the current tab. The action the user takes, will be clicking on another tab, so the change event seems like the only place I can capture this action and alert the user they need to do something.

             

            Here is an example of what the code looks like:

             

             

            <?xml version="1.0" encoding="utf-8"?>

            <mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml">

                 <mx:Script>

                      <![CDATA[

                      import  mx.events.FlexEvent;

                      import  mx.events.IndexChangedEvent;

             

                      protected function handleTnChange(e:Event):void

                      {

                           var failed:Boolean = true;

             

                           //Assume validation failed for test

             

                           if (failed) {

                                tn.selectedIndex = _tnSelectedIndex; //tnSelectedIndex holds the previous selected tab index before the user click

                           }

                           else{

                                //Proceed to the selected tab

                           }

             

                      }

                 ]]>

                 </mx:Script>

             

                 <mx:TabNavigator  id="tn" change="handleTnChange(event)">

                      <mx:Canvas label="Tab 1"  width="100%" height="100%">

                      </mx:Canvas>

                      <mx:Canvas label="Tab 2" width="100%" height="100%">

                      </mx:Canvas>

                      <mx:Canvas label="Tab 3" width="100%" height="100%">

                      </mx:Canvas>

                 </mx:TabNavigator>

             

            </mx:Application>

             

            So, assuming the user is on Tab 1, and clicks Tab 2, what is happening is the selectedIndex gets changed back to Tab 1 in the change function, but Tab 2 seems to become "dead", so that when the user clicks on Tab 2 again, it doesn't fire a change event.

             

            Something I noticed while trying to figure out the problem, is that on the mouse down event when clicking a tab, the change fires, and the tab changes, but on the mouse up, the tabNavigator seems to come back, at least the tab itself, to the tab that was originally clicked before the selectedIndex was changed.

             

            Anyway, hope this clears up what I'm trying to do.

             

            Thanks!

            • 3. Re: tabNavigator.selectedIndex problem
              David_F57 Level 5

              hi,

               

              You can place validations against the required input components and as long as they don't fulfil the requirements the tabs are disabled,

               

              If you look at the code I provided it lets you tab but then sees a component that has the incorrect value and then switches back, its more effect than the change event as the change event is really a 'changed' event.

               

              You could use the change event in conjunction with individual show events by storing the old index and new index values that the change event contains.

               

              protected function tabnavigator1_changeHandler(event:IndexChangedEvent):void

              {

              prevInd = event.oldIndex;

              currInd = event.newIndex

              }

               

              David.

              1 person found this helpful
              • 4. Re: tabNavigator.selectedIndex problem
                DotNetJon Level 1

                Ok, thanks David. I appreciate the help, and will give your suggestions a try!