Changing state TextArea.setText not work in a navigator, null reference

Question

I am designing a chat application, and decided to use the states.

But after switching to another state, TextArea.setText not work inside a navigatorContent, (null reference to object).

Out of the navigatorContent, the code works fine.

(The first stage simulates the login window, the second state the message area of client / server.)

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="304" height="283">
    <fx:Script>
        <![CDATA[


            protected function changeState(event:MouseEvent):void{

                // change state
                setCurrentState("State2");

                // set text
                appendText("Hello world");
            }

            private function appendText(msg:String):void{
                textArea1.text = msg;
            }

        ]]>
    </fx:Script>
    <s:states>
        <s:State name="State1"/>
        <s:State name="State2"/>
    </s:states>

    <s:Button includeIn="State1" label="State 2" click="changeState(event)" horizontalCenter="0"
              verticalCenter="0"/>
    <mx:TabNavigator includeIn="State2" x="0" y="0" width="100%" height="100%">
        <s:NavigatorContent width="100%" height="100%" label="Tab 1">
            <s:TextArea id="textArea1" x="0" y="0" width="100%" height="100%"/>
        </s:NavigatorContent>
    </mx:TabNavigator>
</s:WindowedApplication>

Answer 1

This worked, set the creationPolicy property on the TabNavigator to "all".