Question

I’m new to flex and actionscript. I’m trying to create a small flex app that has multiple states, but if I have nested containers, it looks like some of the objects are not getting initialized when I expected them to be, even when I have the creationPolicy set to “all.”

I’ve reduced the issue to a small example, with a commented block showing when it does work.

Using the existing code, I get this error: “TypeError: Error #1009: Cannot access a property or method of a null object reference at main/init()” and the event handlers are not installed.

If I instead use the commented block, which has the Panel and VBox elements removed, it does work.

I know I could add a click attribute to the mxml elements, but this is just a simplified example, and I’m more interested knowing why the objects are not initialized when the app loads.

<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml"
  applicationComplete="init();"
  currentState="start">

<mx:Script>
  private function mainButtonHandler(event:Event):void{
    currentState = "start"
  }

  private function startButtonHandler(event:Event):void {
    currentState = "main";
  }

  public function init():void{
    mainButton.addEventListener(MouseEvent.CLICK, mainButtonHandler);
    startButton.addEventListener(MouseEvent.CLICK, startButtonHandler);
  }
</mx:Script>

<!-- this does not work -->
<mx:states>
  <mx:State name="main"> 
    <mx:AddChild creationPolicy="all">
      <mx:Panel creationPolicy="all">
        <mx:VBox creationPolicy="all">
          <mx:Button id="mainButton" label="Change to Start State"/>
        </mx:VBox>
      </mx:Panel>
    </mx:AddChild>
  </mx:State>

  <mx:State name="start"> 
    <mx:AddChild creationPolicy="all">
      <mx:Panel creationPolicy="all">
        <mx:VBox creationPolicy="all">
          <mx:Button id="startButton" label="Change to Main state"/>
        </mx:VBox>
      </mx:Panel>
    </mx:AddChild>
  </mx:State>
</mx:states>

<!-- this works -->
<!--
<mx:states>
  <mx:State name="main"> 
    <mx:AddChild creationPolicy="all">
      <mx:Button id="mainButton" label="Change to Start State"/>
    </mx:AddChild>
  </mx:State>

  <mx:State name="start"> 
    <mx:AddChild creationPolicy="all">
      <mx:Button id="startButton" label="Change to Main state"/>
    </mx:AddChild>
  </mx:State>
</mx:states>
-->

</mx:Application>

Thanks for any feedback.

Answer 1

What if you will make next thing:

 <mx:State name="main"> 
      <mx:Panel creationPolicy="all">
        <mx:VBox creationPolicy="all">
         <mx:AddChild creationPolicy="all">
          <mx:Button id="mainButton" label="Change to Start State"/>
         </mx:AddChild>
        </mx:VBox>
      </mx:Panel>    
  </mx:State>

if you dont like this, switch your Button to custom component Based on Panel with VBox and Button, so you will rewrite it to almost like commented code, but you will use a containers.

And if we will answer to question Why this weird stuff about access comes true:

because you use 3 containers: Panel VBox and Button, and events dispatching all is done to application/creation-Complete after only panel is completed, not its children.

Clear?