flex/flashbuilder 4 gumbo states are sometimes blank

Question

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>

Answer 1

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>

Answer 2

Seems that you use old / pre-release version of Flex 4 SDK. It might be a good idea to update to 4.1.0 - last stable version.

P.S: Writing this.setCurrentState('step1',true) is not the best idea. I suggest to use currentState = 'step1' - it is the official way of state changing.