5 Replies Latest reply on May 10, 2010 7:49 AM by wwwcad

    Tab Navigator last selected item issue

    sandeep07

      I am using flex 4 and having issue with the tab navigator

       

      Steps to reproduce:
      1. Load the application given below. Select Tab 1 from tab  navigator
      2. It will show you  "I am in tab 1"
      3. Now click on remove tab link which is at the upper right corner.
      4. Click on "Add tabs" which at the left upper corner.
      5. Now you will see the focus is on "Tab 1" but the content related to  Tab 0 : which is "I am in Tab 0"

        
        Actual Results:
        Only focus  remains on the last selected tab but the actual contents  are of first child.
        
        Expected Results:
        By default the focus should be on first tab.

       

      My code :

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="1024" minHeight="768">
          <fx:Script>
              <![CDATA[
                  import mx.controls.Alert;
                  import mx.events.FlexEvent;
                 
                  import spark.components.Button;
                  import spark.components.Label;
                  import spark.components.NavigatorContent;
                 
                  private function addTabs(event:FlexEvent):void{
                      for(var i:int=0; i<2; i++){
                          var labelText:String = "Tab "+i;
                          var content:NavigatorContent = new NavigatorContent();
                          content.label = labelText;                   
                          var label:Label = new Label();
                          label.text = "I am in "+labelText;
                          content.addElement(label);                   
                          mainTabNavigator.addChild(content);
                      }           
                     
                  }
                 
                  private function add_clickHandler(event:MouseEvent):void{
                      addTabs(null);           
                  }
                  protected function remove_clickHandler(event:MouseEvent):void{               
                      mainTabNavigator.removeAll();
                     
                  }
                 
              ]]>
          </fx:Script>
             
          <mx:Canvas id="testCanvas"
                     xmlns:ui="*"
                     width="100%" height="100%"
                     backgroundColor="#CDEFFC" creationComplete="addTabs(event)">
             
              <mx:LinkButton
                  label="Add Tabs"
                  id="addButton"
                  left="60" top="10"
                  color="#004B8D" fontWeight="normal" textAlign="right" click="add_clickHandler(event)"/>
             
              <mx:LinkButton
                  label="Remove Tabs"
                  id="removeButton"
                  right="10" top="10"
                  color="#004B8D" fontWeight="normal" textAlign="right" click="remove_clickHandler(event)"/>
             
              <mx:TabNavigator
                  id="mainTabNavigator"
                  paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
                  left="0" top="40" right="0" bottom="0"
                  tabHeight="31"
                  tabOffset="240">   
              </mx:TabNavigator>
          </mx:Canvas>
      </s:Application>

       

      Please let me know how to get rid it.

      Thanks,

      Sandeep

        • 1. Re: Tab Navigator last selected item issue
          wwwcad

          Same problem here one hour ago, did you solve it already?

          I'm trying updating the properties selectedindex and tabindex but it's no working.

          • 2. Re: Tab Navigator last selected item issue
            wwwcad Level 1

            There is an unsolved bug in adobe.

             

            You have to solve it manually overriding the function:

             

            package
            {
                 import mx.containers.TabNavigator;
                
                 public class TabNavigatorFixed extends TabNavigator
                 {
                     public function TabNavigatorFixed()
                     {
                         super();
                     }
                    
                     override protected function  commitSelectedIndex(newIndex:int):void
                     {
                         super.commitSelectedIndex(newIndex);
                         if(tabBar.numChildren > 0){
                             // Select the corresponding Tab in the Tab Bar (this  fixes a bug in Flex)
                             tabBar.selectedIndex = newIndex;
                         }
                     }
                 }
                
                
            }

            • 3. Re: Tab Navigator last selected item issue
              wwwcad Level 1

              Ok, i apply a better solution, dispatch a click:


                                  mainTabNavigator.getTabAt(mainTabNavigator.selectedIndex).dispatchEvent(new MouseEvent(MouseEvent.CLICK,true,false));

               

               

              --

               

              http://www.imaginacolombia.com

              • 4. Re: Tab Navigator last selected item issue
                sandeep07 Level 1

                Hey Thank you very much for the solution...It works fine.

                 

                First I added that code just after add tab event

                But I was getting following error on applcaition load.

                " RangeError: Error #2006: The supplied index is out of bounds.
                    at flash.display::DisplayObjectContainer/getChildAt() ..... "

                 

                So kept this code on remove tabs event just before removing the children and modified "mainTabNavigator.selectedIndex to point at first item.

                 

                mainTabNavigator.getTabAt(0).dispatchEvent(new MouseEvent(MouseEvent.CLICK,true,false));

                 

                This is good workaround but it would be helpful if adobe fix these kind of issues.

                Thanks for help,

                Sandeep

                • 5. Re: Tab Navigator last selected item issue
                  wwwcad Level 1

                  Well, this solution didn't work with the Flex Lib SuperTabNavigator.

                   

                  But here is a better solution, i think it will work with your code too.

                   

                  mainTabNavigator.dispatchEvent(new IndexChangedEvent(IndexChangedEvent.CHANGE,true,false));

                   

                  Regards

                  --

                   

                  http://www.imaginacolombia.com