Mixing generated with mxml code

The problem this example tries to solve is the following: you have a Container component (Accordion, TabNavigator, etc.) and you wish it’s content to be generated dynamically but inside this generated content to use some content which is defined in the mxml, inside the Container. For those with Tapestry experience this behaviour is similar to the @RenderBody component.

<my:CustomWrapper ...>
    <mx:VBox> ... </mx:VBox>
</my:CustomWrapper>

This is very similar to a Container definition but the VBox will not end as a child of CustomWrapper but further down in the hierarchy.

Actually the main trick is to rewrite the DefaultProperty to something else than: childDescriptors since the childDescriptors property is used to create the children of the component (look inside Container.as if curious).

Your component will look similar to:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Metadata>
 [DefaultProperty("children")]
 </mx:Metadata>
 <mx:Script>
 <![CDATA[

 private var _children:VBox;

 public function set children( value:* ):void{
 _children = value as VBox;
 invalidateProperties();
 }

 public function get defaultSearch():VBox{
 return _children;
 }

 override protected function createChildren():void {
 super.createChildren();
 //add the _children somewhere else in the hierarchy
 }

 ]]>
 </mx:Script>
 <mx:HBox>
... other components here,
 </mx:HBox>
</mx:VBox>

Some other interesting links on this subject: