Custom Flex 3 Container

Question

I'd like to create a custom Container in Flex 3. I want this container to have an inner container which is either a TabNavigator or a VBox, depending on some flag the user sets. This flag won't change once the page is rendered, so I don't need to "dynamically" move from one component to another.

So far, I have this code:

public class AccNavigator extends Container {
public var container:Container;

public function AccNavigator() {
    if (GlobalSettings.Vertical) { // This is the said variable
        container = new VBox();
    }
    else {
        container = new TabNavigator();
    }
    container.percentHeight = 100;
    container.percentWidth = 100;
}

override protected function createChildren():void {
    super.createChildren();
    this.addChild(container);
}

override public function addChild(c:DisplayObject):DisplayObject {
    if (c == container) {
        // MessageAlert is the same as an Alert but with custom code
        MessageAlert.show("addChild: Adding Container");
        super.addChild(c);
    } else {
        MessageAlert.show("addChild: " + c.toString());
        container.addChild(c);
    }
    return c;
}

override protected function initializationComplete():void {
    // used for bebugging purposes
    MessageAlert.show("container is visible: " + container.visible.toString());
    MessageAlert.show("this is visible: " + visible.toString());
    MessageAlert.show("container children: " + container.numChildren);
    MessageAlert.show("this children: "+ this.numChildren);
}
}

I am using this custom container in mxml like this:

<AccNavigator>
   <HBox>
      <more things...>
   </HBox>
   <HBox>
      <more things...>
   </HBox>
</AccNavigator>

But when I run the application, none of the components are visible. When the initializationComplete code is executed I see the following:

container is visible: true
this is visible: true
container children: 2
this children: 1

I have spent some time reading this http://www.developmentarc.com/site/sites/default/files/understanding_the_flex_3_lifecycle_v1.0.pdf to understand the component lifecycle but still I can't make sense of what is missing in my code.

Can someone please help me and tell me what am I missing?

Thanks.

Ivan Salazar Ivan Salazar · Accepted Answer · 2012-11-07T21:39:18

The problem was that I shouldn't have extended Container. So, the class declaration looks like:

public class AccNavigator extends VBox {
....
}

Everything else is correct.

Custom Flex 3 Container

2 Answers