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

Question

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>

Answer 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>