5 Replies Latest reply on Nov 2, 2009 10:04 PM by Subeesh Arakkan

    Trigger an event on creationComplete of TabBar

    Shivik

      Hello all

       

      I am using Flex 3.4 and in that I have created a TabBar which is getting its labels and data from an xml file. Now what I want to do is load some data on the creationComplete event of TabBar. For doing this I tried to use the following code...

       

       

      <mx:Script>
           <![CDATA[          import mx.events.FlexEvent;
                import mx.controls.Alert;
      
                private function showTab(event:FlexEvent):void
                {
                     var targetComp:TabBar = TabBar(event.currentTarget);
                     Alert.show(targetComp.dataProvider[event.index].label);
                }
           ]]>
      </mx:Script>
      <mx:TabBar id="dataTab" dataProvider="{myDataProvider}" labelField="label" creationComplete="showTab(event)"/>
      

       

      But this does not seem to work. How can I perform this task of showing the tab's label on the creationComplete event?

       

      Please help me out

       

      Thanks and Regards

      Shivik

        • 1. Re: Trigger an event on creationComplete of TabBar
          Subeesh Arakkan Level 4

          try

          private function showTab(event:FlexEvent):void

                    {

                         var targetComp:TabBar = TabBar(event.currentTarget);

                         Alert.show(targetComp.dataProvider[targetComp.selectedIndex].label);

                    }

          1 person found this helpful
          • 2. Re: Trigger an event on creationComplete of TabBar
            Shivik Level 1

            Hello Subeesh

             

            I tried doing this. But the error says "Cannot access a property or method of a null object reference".

            In this snippet, you have told me to make use of selectedIndex property. I want to set the selectedIndex property in the creationComplete event. This I asked in another one of my thread..... http://forums.adobe.com/thread/516764?tstart=0

             

            Here is what I am trying now...

             

            <mx:Script>
                 <![CDATA[          import mx.events.FlexEvent;
                      import mx.controls.Alert;

                      private function showTab(event:FlexEvent):void
                      {
                           var targetComp:TabBar = TabBar(event.currentTarget);
                           targetComp.selectedIndex = 0; // just testing here by using a literal
                           Alert.show(targetComp.dataProvider[targetComp.selectedIndex].label); // ERROR!!!
                      }
                 ]]>
            </mx:Script>
            <mx:TabBar id="dataTab" dataProvider="{myDataProvider}" labelField="label" creationComplete="showTab(event)"/>

             

            Thanks & Regards

            Shivik

            • 3. Re: Trigger an event on creationComplete of TabBar
              Subeesh Arakkan Level 4

              try calling showTabs method in the valueCommit event instead of creationComplete

              1 person found this helpful
              • 4. Re: Trigger an event on creationComplete of TabBar
                Shivik Level 1

                Hello Subeesh

                 

                I tried calling the showTabs on valueCommit event like this....

                 

                <mx:Script>
                     <![CDATA[
                          import mx.events.FlexEvent;
                          import mx.controls.Alert;

                          private function showTab(event:FlexEvent):void
                          {
                               var targetComp:TabBar = TabBar(event.currentTarget);
                               Alert.show(targetComp.dataProvider[targetComp.selectedIndex].label); // ERROR!!!
                          }
                     ]]>
                </mx:Script>
                <mx:TabBar id="dataTab" dataProvider="{myDataProvider}" labelField="label" valueCommit="showTab(event)"/>

                 

                This gives the same error... and after that a string of StackOverflow errors and "Error: Unknown property '-1'" and after I dismiss all errors then the shockwave flash plug-in crashes.

                 

                Then I tried the following code....

                 

                 

                <mx:Script>
                     <![CDATA[
                          import mx.events.FlexEvent;
                          import mx.controls.Alert;

                          private function showTab(event:FlexEvent):void
                          {
                               var targetComp:TabBar = TabBar(event.currentTarget);
                               Alert.show(targetComp.dataProvider[targetComp.selectedIndex].label); // ERROR in this line!!!
                          }

                          private function setDefaultTab(event:FlexEvent):void
                          {
                               var targetComp:TabBar = TabBar(event.currentTarget);
                               targetComp.selectedIndex = 0;
                          }
                     ]]>
                </mx:Script>
                <mx:TabBar id="dataTab" dataProvider="{myDataProvider}" labelField="label" creationComplete="setDefaultTab(event)" valueCommit="showTab(event)"/>

                 

                This still shows the error "Cannot access the property or method of a null object" but works if I dismiss the error. What could be going wrong?

                 

                Thanks and Regards

                Shivik

                • 5. Re: Trigger an event on creationComplete of TabBar
                  Subeesh Arakkan Level 4

                  valueCommit is dispatched whenever the dataProvider is changed.At first, your dataprovider is null, we need to check that condition. I have modified your code a little

                   

                    private function showTab(event:FlexEvent):void
                            {
                                    if(dataTab && dataTab.dataProvider && dataTab.dataProvider.length > 0 )
                                    {
                                     dataTab.selectedIndex = 0;
                                     if(dataTab.selectedIndex != -1)
                                         Alert.show(dataTab.dataProvider[dataTab.selectedIndex].label);
                                 }
                            }
                       ]]>
                  </mx:Script>
                  <mx:TabBar  id="dataTab" dataProvider="{dp}" labelField="label" updateComplete="showTab(event)"
                      />