Below is a very simple example, randomly, if I click the step2 button the state will change but the Step 2 panel will not be there.
I suspect the children of the state are not getting created for some reason, which is why I set the itemCreationPolicy to "immediate", but it makes no difference
This is catastrophic for the application because the user is left in limbo and is forced to refresh
Any ideas, please?
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationPolicy="all" currentState="step1">
<s:states>
<s:State name="step1"/>
<s:State name="step2"/>
</s:states>
<s:BorderContainer includeIn="step1" itemCreationPolicy="immediate">
<s:Panel title="Step 1"/>
</s:BorderContainer>
<s:BorderContainer includeIn="step2" itemCreationPolicy="immediate">
<s:Panel title="Step 2"/>
</s:BorderContainer>
<s:Button title="step1" click="{this.setCurrentState('step1',true)}"/>
<s:Button title="step2" click="{this.setCurrentState('step2',true)}"/>
</s:BorderContainer>
I've just tested it with Flex SDK 4.1 and it works without changing the creation policy. Clicking "step 2" successfully changes the state.
BTW: You don't need the curly braces in you click event handler...
<?xml version="1.0" encoding="utf-8"?>
<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" currentState="step1">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:states>
<s:State name="step1"/>
<s:State name="step2"/>
</s:states>
<s:BorderContainer includeIn="step1">
<s:Panel title="Step 1"/>
</s:BorderContainer>
<s:BorderContainer includeIn="step2">
<s:Panel title="Step 2"/>
</s:BorderContainer>
<s:Button label="step1" click="setCurrentState('step1', true)"/>
<s:Button label="step2" click="setCurrentState('step2', true)"/>
</s:Application>