Flex 4 States: includeIn and component creationComplete

Question

I have a component that, once it's all ready, I need to set the state based on a variable I'm reading in from XML. I tried doing it with creationComplete, but it's apparently not ready, as the state isn't being set with elements rendering properly, but the states & rendering work fine if I do a subsequent state change with a click action on some element.

What should I do in this situation to make sure the state gets set at the right time & elements that should appear due to includeIn exist so they can be rendered? initialize instead of creationComplete doesn't seem to do the trick for the first time the component is created. Any successive calls to the component are fine.

Answer 1

FYI, it's no surprise that initialize didn't work, it's fired before the child elements are created, and creationComplete then fires. Since creationComplete is the last event in the init lifecycle to fire.

Sometimes you need to change child component state from the parent container, if the creationComplete event for the component is fired prematurely.

creationComplete for any component fires after all of it's child components have fired their creationComplete.

Have a look at Adobe's documentation for the component instantiation life cycle

creationPolicy

You may also need to set the creationPolicy attribute for your app, to all. (I think it's default is auto)

enterState

You can hook an event handler on enterState in a state declaration, once that runs the objects within the state should be available.

visible.state properties.

Ultimately you can set the containers for your state based objects to be invisible / not included in the layout (visible and includeInLayout properties.) On occassion you won't have any other method of reaching an object through code, because it won't exist. However, enterState should only execute when a view state has been entered, so objects within that state should be fully available.

Answer 2

I think you can just force the stateful components that you need to access by setting their itemCreationPolicy=immediate. Then they would exist on creationComplete.

<s:states>
<s:State name="normal" />
<s:State name="special" />
</s:states>

<s:Label text="normal" includeIn="normal" /> //is available creationComplete
<s:Label text="special1" includeIn="special" itemCreationPolicy="immediate" /> //is available creationComplete
<s:Label text="special2" includeIn="special" /> //not available creationComplete

Answer 3

I had the same situation, though I had to check reset the screen each time a state was displayed. The initial answer was what I needed, but it took me a bit to sort it out. This was the key bit:

You can hook an event handler on enterState in a state declaration... [emphasis added]

... which looks like:

protected function state1_enterStateHandler(event:FlexEvent):void
{
    myComponent.reset();
}

<s:states>
    <s:State id="state1" name="state1" enterState="state1_enterStateHandler(event)" />
    <s:State name="state2" />
</s:states>

<views:MyComponent id="myComponent" includeIn="state1" />

I had been trying to add the event handler to myComponent without success. I'd rather have it there, but this seemed to be the only way to update each time the state was enabled again.

This calls reset each time state1 becomes currentState and all components are ready and properties have been set.