Container Flex Class

The Container class implements much of the behavior of the containers in the Flex Framework. This article is broken into sections to deal with each of the pieces of functionality individually.

The contentPane of Container

The contentPane property of the Container class allows Container to turn its children into grandchildren and therefore allow them to render separately from other children (such as scrollbars) which may need to live alongside them.

The Container class may or may not move its children into the contentPane. Whether it does this is based on a number of complicated (and likely to change) rules. The most obvious rule, as seen in the private function createContentPaneAndScrollbarsIfNeeded() is to handle scrollbars properly. The contentPane property stands in opposition to the rawChildren property which allows direct access to children of the Container which may be part of the chrome of the display (such as the border of a Panel).

One problem this can cause is the unhelpful firing of the removedFromStage or removed event for components which are children of a Container. Of course, nearly every Flex project has some Containers in its hierarchy. When the Container determines it must create the contentPane, it calls the mx_internal function createContentPane():void. The contentPane that is created is a FlexSprite:

  1.         var newPane:Sprite = new FlexSprite();
  2.         newPane.name = "contentPane";
  3.         newPane.tabChildren = true;

Then Container goes through its children one-by-one and moves them into the contentPane. This is where the removedFromStage event is dispatched to the child components. Calling addChild(child:DisplayObject) forces the child to be removed from its current parent first. The child will receive the removed event and, if the parent is on the display list, it will also receive the removedFromStage event.

  1.         for (var i:int = 0; i < n; i++)
  2.         {
  3.             // use super because contentPane now exists and messes up getChildAt();
  4.             var child:IUIComponent =
  5.                 IUIComponent(super.getChildAt(_firstChildIndex));
  6.             newPane.addChild(DisplayObject(child));
  7.             child.parentChanged(newPane);
  8.             _numChildren--; // required
  9.         }

This can be problematic if your component assumes that its lifetime is over when it is removed from the stage, because it will be instantly added back to the Stage in this case. In general, you have to assume that your component may be added to and removed from the Stage and the display list at any time and it should recover gracefully from such treatment. Unfortunately, at least one class in the Flex 3 Framework does not: PopUpButton.