1 Reply Latest reply on Aug 2, 2007 11:01 AM by huych02

    How can I initialize all TabNavigator Tabs upon a state change?

    huych02
      Here's the basic goal. I want to provide two views to the user that display the same panels. I configured each view as a separate state but I am having trouble initializing each of the tab views since they are only created by Flex when the user first selects it. I need them all created when the user changes to that state so that I can insert my view objects. Does that make sense?

      Ok, how about an example program. I define three view objects in ActionScript which will be used in two different states. I use AddChild to put them in the proper layout location. The problem is with the Tab state. The AddChild operation only works for the first tab because it is visible. The other two tabs don't get setup properly. Can anyone help me resolve this?




      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical"
      creationComplete="onCreationComplete()">
      <mx:Script>
      <![CDATA[
      import mx.containers.VBox;
      import mx.controls.Label;
      [Bindable] public var view1:VBox;
      [Bindable] public var view2:VBox;
      [Bindable] public var view3:VBox;

      private function onCreationComplete():void
      {
      var label1:Label = new Label();
      var label2:Label = new Label();
      var label3:Label = new Label();

      label1.text = "This is view 1.";
      label2.text = "This is view 2.";
      label3.text = "This is view 3.";

      view1 = new VBox();
      view1.label = "View 1";
      view1.addChild(label1);
      view2 = new VBox();
      view2.label = "View 2";
      view2.addChild(label2);
      view3 = new VBox();
      view3.label = "View 3";
      view3.addChild(label3);

      currentState = "wizardState";
      }

      private function changeState():void
      {
      switch(stateBox.selectedItem.data)
      {
      case 0: currentState = 'wizardState'; break;
      case 1: currentState = 'tabState'; break;
      }
      }
      ]]>
      </mx:Script>

      <mx:Panel id="mainPanel" title="Tab View Bug" width="400" height="320"/>
      <mx:ComboBox id="stateBox" change="changeState()">
      <mx:dataProvider>
      <mx:Object label="Wizard" data="0"/>
      <mx:Object label="Tabbed" data="1"/>
      </mx:dataProvider>
      </mx:ComboBox>

      <mx:states>
      <mx:State name="wizardState">
      <mx:AddChild relativeTo="{mainPanel}" position="lastChild">
      <mx:HBox width="100%" height="100%" verticalAlign="top">
      <mx:ToggleButtonBar id="wizardButtonBar" width="20%"
      direction="vertical"
      dataProvider="{wizardViewStack}"/>
      <mx:ViewStack id="wizardViewStack" width="80%"
      selectedIndex="{wizardButtonBar.selectedIndex}"/>
      </mx:HBox>
      </mx:AddChild>
      <mx:AddChild target="{view1}" relativeTo="{wizardViewStack}" position="lastChild"/>
      <mx:AddChild target="{view2}" relativeTo="{wizardViewStack}" position="lastChild"/>
      <mx:AddChild target="{view3}" relativeTo="{wizardViewStack}" position="lastChild"/>
      </mx:State>
      <mx:State name="tabState">
      <mx:AddChild relativeTo="{mainPanel}" position="lastChild">
      <mx:TabNavigator id="tabViewStack" width="100%" height="100%">
      <mx:VBox label="Tab 1" id="tab1"/>
      <mx:VBox label="Tab 2" id="tab2"/>
      <mx:VBox label="Tab 3" id="tab3"/>
      </mx:TabNavigator>
      </mx:AddChild>
      <mx:AddChild target="{view1}" relativeTo="{tab1}" position="lastChild"/>
      <mx:AddChild target="{view2}" relativeTo="{tab2}" position="lastChild"/>
      <mx:AddChild target="{view3}" relativeTo="{tab3}" position="lastChild"/>
      </mx:State>
      </mx:states>
      </mx:Application>
        • 1. Re: How can I initialize all TabNavigator Tabs upon a state change?
          huych02 Level 1
          Ok, here is an even simpler scenario. I take each view from the default state and put them in the new tab view when the state changes. If you compile and run this example, the only view that makes it into the tabview is the one that was active when the state changed. Why is that?

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical">
          <mx:Script>
          <![CDATA[
          private function changeState():void
          {
          switch(stateBox.selectedItem.data)
          {
          case 0: currentState = ''; break;
          case 1: currentState = 'tabState'; break;
          }
          }
          ]]>
          </mx:Script>

          <mx:Panel id="mainPanel" title="Tab View Bug" width="400" height="320">
          <mx:HBox id="wizardView" width="100%" height="100%" verticalAlign="top">
          <mx:ToggleButtonBar id="wizardButtonBar" width="20%"
          direction="vertical"
          dataProvider="{wizardViewStack}"/>
          <mx:ViewStack id="wizardViewStack" width="80%"
          selectedIndex="{wizardButtonBar.selectedIndex}"
          creationPolicy="all">
          <mx:Canvas id="view1" label="Part 1" >
          <mx:TextInput text="This is view 1"/>
          </mx:Canvas>
          <mx:Canvas id="view2" label="Part 2">
          <mx:TextInput text="This is view 2"/>
          </mx:Canvas>
          <mx:Canvas id="view3" label="Part 3">
          <mx:TextInput text="This is view 3"/>
          </mx:Canvas>
          </mx:ViewStack>
          </mx:HBox>
          </mx:Panel>
          <mx:ComboBox id="stateBox" change="changeState()">
          <mx:dataProvider>
          <mx:Object label="Wizard" data="0"/>
          <mx:Object label="Tabbed" data="1"/>
          </mx:dataProvider>
          </mx:ComboBox>

          <mx:states>
          <mx:State name="tabState">
          <mx:AddChild relativeTo="{mainPanel}" position="lastChild">
          <mx:TabNavigator id="tabView" width="100%" height="100%"
          creationPolicy="all">
          <mx:Canvas label="Tab 1" id="tab1"/>
          <mx:Canvas label="Tab 2" id="tab2"/>
          <mx:Canvas label="Tab 3" id="tab3"/>
          </mx:TabNavigator>
          </mx:AddChild>
          <mx:RemoveChild target="{view1}"/>
          <mx:AddChild target="{view1}" relativeTo="{tab1}"/>
          <mx:RemoveChild target="{view2}"/>
          <mx:AddChild target="{view2}" relativeTo="{tab2}"/>
          <mx:RemoveChild target="{view3}"/>
          <mx:AddChild target="{view3}" relativeTo="{tab3}"/>
          <mx:RemoveChild target="{wizardView}"/>
          </mx:State>
          </mx:states>
          </mx:Application>