setting content area in custom flex component

Question

I am trying to define the content area of a custom component that extends mx:VBox. The component has predefined headers and footers (visual children) and I want to set the area in the middle for adding children to the component. The component will be used like this:

<custom_component>
     <mx:button/>
</custom_component>

How would I set this content area?

Answer 1

Try using a canvas?

Answer 2

In your custom component, add the DefaultProperty metadata tag:

[DefaultProperty("nameOfDefaultProperty")]

Then you would also define a setter for that property:

public function set nameOfDefaultProperty(value:UIComponent):void
{
    if (value != null)
    {
        // add "value" to the display list here
    }
}

Answer 3

There's actually a few steps to it.

1. Your custom component needs to set its DefaultProperty metadata so the children don't collide with the ones within the custom component itself.
2. Then you need to stow them away in an instance var to add to your content area later, because the properties will be set before the components children are created.
3. Lastly, if multiple children are specified your DefaultProperty will be handed an Array object (rather than a single UIComponent instance.)

So your custom component would look something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Metadata>
     [DefaultProperty("content")]
    </mx:Metadata>

    <mx:HBox id="headerBox"/>
    <mx:VBox id="contentBox"/>
    <mx:HBox id="footerBox"/>

    <mx:Script>
     <![CDATA[
      import mx.core.UIComponent;
      private var _contentChildren:Array;

      public function set content(c:*) : void {
       // Allow 1 or more children to be specified
       _contentChildren = (c as Array) || [c];
      }

      override protected function createChildren() : void {
       // Call super so contentBox gets created first
       super.createChildren();

       for each (var child:UIComponent in _contentChildren) {
        contentBox.addChild(child);
       }
      }
     ]]>
    </mx:Script>
</mx:VBox>