This code is the TourDeFlex State example expanded. There is a
ViewStack1 with 2 "panes", the second pane has ViewStack2 on it with 2
"panes". Added to the "Register" state
<!-- Set properties of ViewStack1 to Pane 2 -->
<mx:SetProperty target="{viewstack1}"
name="selectedIndex" value="1"/>
<!-- Set properties of ViewStack2 to Pane 2 -->
<mx:SetProperty target="{viewstack2}"
name="selectedIndex" value="1"/>
wants to change to ViewStack1:pane2 where ViewStack2 exists, and then
ViewStack2:pane2. ViewStack has a createCompleteHandler with message.
The "Need To Register?" button makes the State change.
The "Property selectedIndex not found on StateTest and there is no
default value" error is thrown because apparently Flex has has not
instantiated ViewStack2 at the moment the parent State change wants to
manipulate a property of this child - the creationComplete message
appears _after_ the state change is attempted.
This means that State changes cannot be used to configure gui
components that are on different event bubbling chains - which I was
experimenting with. Curious to know if there is a way to make this
work? Going to try the excellent suggestion of using a set method
bound to the model locator variable that the commands manipulate, but
wondered about the above. Not sure how code turns out when pasted in.
Thanks, Mic
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="vertical" verticalAlign="middle"
horizontalAlign="center"
backgroundGradientColors="[0x000000,0x323232]"
viewSourceURL="srcview/index.html">
<!-- The Application class states property defines the view states.-->
<mx:states>
<mx:State name="Register">
<!-- Add a TextInput control to the form. -->
<mx:AddChild relativeTo="{loginForm}"
position="lastChild">
<mx:FormItem id="confirm" label="Confirm:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<!-- Set properties on the Panel container and Button
control.-->
<mx:SetProperty target="{loginPanel}"
name="title" value="Register"/>
<mx:SetProperty target="{loginButton}"
name="label" value="Register"/>
<!-- Set properties of ViewStack1 to Pane 2 -->
<mx:SetProperty target="{viewstack1}"
name="selectedIndex" value="1"/>
<!-- Set properties of ViewStack2 to Pane 2 -->
<mx:SetProperty target="{viewstack2}"
name="selectedIndex" value="1"/>
<!-- Remove the existing LinkButton control.-->
<mx:RemoveChild target="{registerLink}"/>
<!-- Add a new LinkButton control to change view state
back to the login form.-->
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="Return to Login"
click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function onCreationComplete():void{
mx.controls.Alert.show("CreationComplete from
ViewStack2");
}
]]>
</mx:Script>
<mx:Panel id="loginPanel"
title="Login" color="0xffffff" borderAlpha="0.15"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
width="50%" height="50%">
<mx:VBox width="100%" height="100%" borderStyle="solid"
borderThickness="2" borderColor="#F6E808" backgroundColor="#B7B1B1">
<mx:VBox width="100%" height="100%" borderStyle="solid"
borderThickness="2" borderColor="#F70606">
<mx:ViewStack id="viewstack1"
width="100%" height="100%">
<mx:Canvas id="canvas1_1"
label="View 1" width="100%" height="100%"
borderStyle="solid" borderThickness="2" borderColor="#2509F9">
<mx:Text y="0" text="ViewStack1:Panel1"
width="100%" height="50%"/>
</mx:Canvas>
<mx:VBox id="vbox1_2">
<mx:Text y="0" text="ViewStack1:Panel2"
width="100%" height="10%"/>
<mx:ViewStack id="viewstack2"
creationComplete="onCreationComplete()"
width="100%" height="100%"
borderStyle="solid"
borderThickness="3" borderColor="#C50BFA">
<mx:Canvas>
<mx:Text y="0" text="ViewStack2:Panel1"
width="100%" height="50%"/>
</mx:Canvas>
<mx:Canvas>
<mx:Text y="0" text="ViewStack2:Panel2"
width="100%" height="50%"/>
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
<mx:Form id="loginForm" color="0x323232" width="100%"
height="30%">
<mx:FormItem label="Username:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar width="100%" height="10%">
<!-- Use the LinkButton to change to the Register view
state.-->
<mx:LinkButton id="registerLink"
label="Need to Register?"
click="currentState='Register'" color="#F30B0B"
enabled="true"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="Login" id="loginButton" color="#070707"/>
</mx:ControlBar>
</mx:VBox>
</mx:Panel>
</mx:Application>
