3 Replies Latest reply on Sep 5, 2010 10:31 PM by Shongrunden

    tabbar spark, states

    matthieuj

      In a component that has multiple states, I use a spark TabBar based on a ViewStack
      containing a list of Navigator Content.
      The number of tabs changes when the component states
      changes.
      The TabBar works, but sometimes there are some bugs: after a state change, it can
      have multiple tabs selected.

      Bug1:
      Select in state three (using the comboBox)
      then I select the last tab
      then I select the state two (using the comboBox).
      Result: the onglet3 and 4 are selected.

      Bug2:
        I want to force the selection of the first tab after a change
      state (idViewStack.selectedIndex = 0;)
      Result: multiple tabs are selected.

       

       

       

      code:

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

      <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"

                    xmlns:s="library://ns.adobe.com/flex/spark"

                    xmlns:ns="library://ns.adobe.com/flex/mx"

                    xmlns:tabbarNavigation="tabbarNavigation.*"

                    xmlns:views="views.*"

                    width="1000" height="800"

                    creationComplete="application1_creationCompleteHandler(event)" xmlns:tabbarNavigation2="tabbarNavigation2.*" xmlns:tabBarNavigation="tabBarNavigation.*">

           

            <fx:Script>

                  <![CDATA[

                        import mx.collections.ArrayCollection;

                        import mx.controls.Alert;

                        import mx.events.FlexEvent;

                       

                        import spark.events.IndexChangeEvent;

                       

                        [Bindable()]

                        public var dataproviderStatesChoise:ArrayCollection = new ArrayCollection();

                       

                        protected function application1_creationCompleteHandler(event:FlexEvent):void

                        {

                              dataproviderStatesChoise.addItem("state1");

                              dataproviderStatesChoise.addItem("state2");

                              dataproviderStatesChoise.addItem("state3");

                              statesChoise.selectedIndex=0;

                        }                

                        protected function changeHandler(event:IndexChangeEvent):void

                        {

                              if(event.newIndex==0){

                                   currentState="state1";

                              }else if(event.newIndex==1){

                                   currentState="state2";

                              }else {

                                   currentState="state3";

                              }

                        }

                  ]]>

            </fx:Script>

           

            <s:states>

                  <s:State name="state1"/>

                  <s:State name="state2"/>

                  <s:State name="state3"/>

            </s:states>

           

            <s:ComboBox id="statesChoise" dataProvider="{dataproviderStatesChoise}" change="changeHandler(event)"/>

           

            <s:TabBar dataProvider="{idViewStack}" id="idTabBar"  />

           

            <ns:ViewStack id="idViewStack" width="95%" height="85%" left="8" y="23" >

                 

                  <s:NavigatorContent label="Tab1"  width="100%" height="100%" includeIn="state3">

                        <s:Label text="Tab1" />

                  </s:NavigatorContent>

                 

                  <s:NavigatorContent label="Tab2"  width="100%" height="100%" includeIn="state2,state3">

                        <s:Label text="Tab2" />

                  </s:NavigatorContent>

                 

                  <s:NavigatorContent label="Tab3"  width="100%" height="100%" >

                        <s:Label text="Tab3" />

                  </s:NavigatorContent>

                 

                  <s:NavigatorContent label="tab4 "  width="100%" height="100%">

                        <s:Label text="Tab4" />

                  </s:NavigatorContent>

                 

            </ns:ViewStack>

           

      </s:VGroup>

        • 1. Re: tabbar spark, states
          Shongrunden Adobe Employee

          It looks like bug1 and bug2 is the same issue.  Here is a reduced test case that demonstrates the bug:

           

          <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">
             
              <s:states>
                  <s:State name="state1"/>
                  <s:State name="state2"/>
                  <s:State name="state3"/>
              </s:states>
             
              <s:controlBarContent>
                  <s:Button label="1. go to state2" click="currentState='state2'" />
                  <s:Button label="2. go to state3" click="currentState='state3'" />
              </s:controlBarContent>
             
              <s:TabBar dataProvider="{vs}" />
             
              <mx:ViewStack id="vs" y="25">
                 
                  <s:NavigatorContent label="Tab1" includeIn="state3">
                      <s:Label text="Tab1" />
                  </s:NavigatorContent>
                 
                  <s:NavigatorContent label="Tab2" includeIn="state2,state3">
                      <s:Label text="Tab2" />
                  </s:NavigatorContent>
                 
                  <s:NavigatorContent label="Tab3">
                      <s:Label text="Tab3" />
                  </s:NavigatorContent>
                 
              </mx:ViewStack>
             
          </s:Application>

           

          Steps to reproduce:

           

          1. Compile and run above MXML

          2. Click "1. go to state2"

          3. Click "2. go to state3"

          4. Notice two tabs show as selected

           

          Can you please file a bug at http://bugs.adobe.com/flex and post the link here?  Let me know if you would rather that I file it.

          • 2. Re: tabbar spark, states
            Raklar

            Did anything ever come of this as I'm still notcing this problem in flex now.

            • 3. Re: tabbar spark, states
              Shongrunden Adobe Employee

              I couldn't find this issue in the bug base so I assume matthieuj didn't file it.  I filed it here: http://bugs.adobe.com/jira/browse/SDK-27755