8 Replies Latest reply on Jan 21, 2011 9:27 AM by Subeesh Arakkan

    TabNavigator tab selection event

    superkatakam Level 1

      I've been trying to trigger an event when i click on the tab in a tabnavigator.

      The problem is that if i try to use the "change" event, the events for components inside the tab navigator are being fired and thats causing me problems. Could you suggest an alternative to "change" with a specific event that would enable me to fire a specific function only when i click on the tabs?

      I know the question is trivial but I couldnt find an answer anywhere.

      Thanks in advance

        • 1. Re: TabNavigator tab selection event
          Gaurav J Adobe Employee

          change event is the right way to go.

           

          On which component did you add the event listener for the change event ?

           

          -Gaurav

          http://www.gauravj.com/blog

          • 2. Re: TabNavigator tab selection event
            superkatakam Level 1

            well i had a pie chart and a datagrid inside the tab. so everytime i click on the pie chart or do something inside it, the change event for the tab gets fired.

            • 3. Re: TabNavigator tab selection event
              Subeesh Arakkan Level 4

              you can use a tabbar and viewstack in a vertical group and listen for the itemclick event of the tabbar.

              • 4. Re: TabNavigator tab selection event
                superkatakam Level 1

                could you please elaborate with some code?

                • 5. Re: TabNavigator tab selection event
                  Subeesh Arakkan Level 4

                  <s:VGroup>
                            <!-- Create a Spark ButtonBar control to navigate 
                            the ViewStack container. -->
                            <s:TabBar id="tabBar" dataProvider="{myViewStack}" change="tabbar1_changeHandler(event)"/>
                            
                            <!-- Define the ViewStack and the three child containers. -->
                            <mx:ViewStack id="myViewStack" 
                                             borderStyle="solid" 
                                             width="100%">
                                 
                                 <s:NavigatorContent id="search" label="Search">
                                      <s:Label text="Search Screen"/>
                                 </s:NavigatorContent>
                                 
                                 <s:NavigatorContent id="custInfo" label="Customer Info">
                                      <s:Label text="Customer Info"/>
                                 </s:NavigatorContent>
                                 
                                 <s:NavigatorContent id="accountInfo" label="Account Info">
                                      <s:Label text="Account Info"/>
                                 </s:NavigatorContent>
                            </mx:ViewStack>
                       </s:VGroup>
                  
                  
                  
                  protected function tabbar1_changeHandler(event:IndexChangeEvent):void
                  {
                       Alert.show(tabBar.selectedIndex.toString());
                  }
                  
                  
                  

                  • 6. Re: TabNavigator tab selection event
                    superkatakam Level 1

                    worked beautifully

                    Thank you very much for the answer Subeesh.

                    Just got another question. How do we handle the same issue with an accordion? We are currently looking at accordion and tabnavigator for the same behaviour. Could you please help me out on that too?

                     

                    Thanks in advance

                    • 7. Re: TabNavigator tab selection event
                      Subeesh Arakkan Level 4

                      I am not sure if this is the best approach, but it should work for you

                       

                      <mx:Accordion id="accordion" click="accordion_clickHandler(event)">
                      
                      
                      private var oldIndex:int;
                      
                      protected function accordion_clickHandler(event:MouseEvent):void
                      {
                           //only if the selected index is changed by clicking the accordion header
                           if( event.target is AccordionHeader && oldIndex != accordion.selectedIndex )
                           {
                                // todo
                                oldIndex = accordion.selectedIndex;
                           }
                      }
                      
                      
                      

                      • 8. Re: TabNavigator tab selection event
                        superkatakam Level 1

                        Thanks subeesh,

                        i'll give it a shot and post the result.

                        Thanks again for your help.

                         

                        -Nikhil