8 Replies Latest reply on Nov 1, 2007 5:02 AM by PKDylan

    can't change TabNavigator TabBar selectedIndex

    Craig Grummitt Level 3
      Here's another to add to the list of seemingly simple tasks that are causing me to lose my hair... i've stripped back the code to its most basic so that you can see yourself.(see below - finger's crossed formatting is included - why is there no add source option in this forum?)

      so here's the problem(compile and run the code below to see what i mean):
      i have a button that removes all tabs from a tabnavigator, and adds several tabs. this seems to work okay, but see what happens if you do the following:
      - press the plus button.
      - select another tab - say tab 3.
      - press the plus button.

      notice that the content for tab is visible, which is good, but tab 3 is still active!

      so to attempt to get around this strange problem, i've tried to manually set selectedIndex, which didn't seem to work. i've tried callLater, and all sorts of event handlers on the tabnavigator, even setting the index on a buttonclick and nothing seems to effect the tab bar option being displayed.

      any ideas ?
      cheers
      Craig

      ------------------------------------------------------------------------------------------ --------------------------------------------------------------

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="600" height="600" xmlns="*">

      <mx:Script>
      <![CDATA[
      import mx.controls.Text;
      import mx.containers.Canvas;

      private function add():void {
      tn.removeAllChildren();
      for (var i:int=0;i<=4;i++) {
      var newText:Text=new Text();
      newText.text="Tab "+String(i+1);
      var newCanvas:Canvas=new Canvas();
      newCanvas.label="Tab "+String(i+1);
      newCanvas.addChild(newText);
      tn.addChild(newCanvas);
      }
      //the following line doesn't do a thing!
      tn.selectedIndex=0;
      }


      ]]>
      </mx:Script>

      <mx:TabNavigator id="tn" x="34" y="18" width="280" height="277">

      </mx:TabNavigator>
      <mx:Button label="+" click="add()"/>
      </mx:Application>
        • 1. Re: can't change TabNavigator TabBar selectedIndex
          Craig Grummitt Level 3
          sorry to do a bump, but three days later i'm still struggling with this problem... anyone out there with any ideas on solutions for this strange problem?
          • 2. can't change TabNavigator TabBar selectedIndex
            Craig Grummitt Level 3
            okay for anyone interested i've taken a different tact with positive results. the TabNavigator wasn't working out for me, but i found if i separate out the TabBar and ViewStack which is essentially what the TabNavigator is, i am able to reference the TabBar and ViewStacks and change their indexes directly. i still don't know how to resolve this problem within the framework of a tabNavigator, but using the TabBar and ViewStack to emulate a TabNavigator should be sufficient for my needs. see below for modified code.
            ------------------------------------------------------------------------------------------ ----------------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="600" height="600" xmlns="*">

            <mx:Script>
            <![CDATA[
            import mx.events.ItemClickEvent;
            import mx.controls.Text;
            import mx.containers.Canvas;
            [Bindable]
            private var tabBarTitles:Array;
            private function add():void {
            tn.removeAllChildren();
            tabBarTitles=new Array();
            for (var i:int=0;i<=4;i++) {
            var newText:Text=new Text();
            newText.text="Tab "+String(i+1);
            var newCanvas:Canvas=new Canvas();
            newCanvas.addChild(newText);
            tn.addChild(newCanvas);
            tabBarTitles.push("Tab "+String(i+1))
            }
            resetIndex();
            }
            private function resetIndex():void {
            tn.selectedIndex=tb.selectedIndex=0;
            }
            private function changeTab(event:ItemClickEvent):void {
            tn.selectedIndex=tb.selectedIndex;
            }
            ]]>
            </mx:Script>
            <mx:TabBar id="tb" x="34" y="0" dataProvider="{tabBarTitles}" itemClick="changeTab(event)" />
            <mx:ViewStack id="tn" x="34" y="18" width="280" height="277"/>
            <mx:Button label="+" click="add()"/>
            </mx:Application>
            • 3. Re: can't change TabNavigator TabBar selectedIndex
              Camus Miu Level 1
              tried to read the debug mode.

              private function add():void {
              trace(tn.selectedIndex);
              tn.removeAllChildren();
              trace(tn.selectedIndex);
              for (var i:int=0;i<=4;i++) {
              var newText:Text=new Text();
              newText.text="Tab "+String(i+1);
              var newCanvas:Canvas=new Canvas();
              newCanvas.label="Tab "+String(i+1);
              newCanvas.addChild(newText);
              tn.addChild(newCanvas);
              }
              //the following line doesn't do a thing!
              trace(tn.selectedIndex);
              tn.selectedIndex=1;
              trace(tn.selectedIndex);
              }

              Display:
              2
              -1
              0
              1

              the selectedIndex is 1 but the selected tab is 3...
              so the selected tab doesn't updated according to the selectedIndex???
              • 4. Re: can't change TabNavigator TabBar selectedIndex
                dougmccune Level 1
                This is clearly not the desired functionality, but here's a workaround that would get your original code to work. Basically the key was setting the selectedIndex to something other than 0 or -1, then using callLater to set the selectedIndex to 0. Obviously this shouldn't be the way it works, I haven't taken a real close look into TabNavigator, TabBar, or ViewStack to figure out why this issue exists, but in case you really wanted a solution using TabNavigator, here you go:


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

                <mx:Script>
                <![CDATA[
                import mx.controls.Text;
                import mx.containers.Canvas;

                private function add():void {
                tn.removeAllChildren();

                for (var i:int=0;i<=4;i++) {
                var newText:Text=new Text();
                newText.text="Tab "+String(i+1);
                var newCanvas:Canvas=new Canvas();
                newCanvas.label="Tab "+String(i+1);
                newCanvas.addChild(newText);
                tn.addChild(newCanvas);
                }

                tn.selectedIndex=1;

                callLater(setIndexToZero);
                }

                private function setIndexToZero():void {
                tn.selectedIndex=0;
                }


                ]]>
                </mx:Script>

                <mx:TabNavigator id="tn" x="34" y="18" width="280" height="277">

                </mx:TabNavigator>
                <mx:Button label="+" click="add()"/>
                </mx:Application>
                • 5. Re: can't change TabNavigator TabBar selectedIndex
                  Craig Grummitt Level 3
                  nice one doug! i thought i'd attempted all combinations of calllater and setting indexes but obviously not. That definitely does the trick. good to hear that i'm not going completely crazy and there's some agreement out there that it shouldn't be working like this...
                  • 6. Re: can't change TabNavigator TabBar selectedIndex
                    Yeah.... Thanks Doug,
                    I've just wasted half a day on the same problem til I found this solution..... :o(
                    • 7. Re: can't change TabNavigator TabBar selectedIndex
                      andrew76rocks Level 1
                      Thanks Doug!!! You saved my project from this tab oddity and now i can go to bed on time tonight since last night i stayed up 4 hours with no luck figuring this issue out! :) Really appreciate your time to post.
                      • 8. Re: can't change TabNavigator TabBar selectedIndex
                        PKDylan
                        Hi,

                        I have a situation where the selectedIndex of a tabNavigator is bound to a variable. In an action script file I set the variable. However, as others have commented, the setting does not work on the selectedIndex property. I can't use callLater in my case because this method is only available in objects that inherit from the UIComponent class

                        Thanks for any advice.