mxmlで作ったカスタムコポーネンをコンテナにする

ウィンドウなどのベースとなるビューをmxmlを作った時に
それを継承したmxmlでボタンやラベルなどを追加したかったりは意外と多いと思う。

参考
http://www.memorycraft.jp/2008/04/mxml.html

base.mxml

<s:Group>
	<fx:Metadata>
		[DefaultProperty("children")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			private var customChildren:Array = [];
			private var customChildrenChanged:Boolean = false;

			public function set children(value:*):void{
				if(value is IVisualElement){
					customChildren = [value];
				}else{
					suctomChildren = value;
				}
				customChildrenChanged = true;
				invalidateProperties();
			}

			override protected function commitProperties():void{
				super.commitProperties();
				if(customChildrenChanged){
					for each(var child:IVisualElement in customChildren){
						contents.addElement(child);
					}
				}
			}
		]]>
	</fx:Script>
	<s:VGroup>
		<s:Group width="100%" height="40">
			<s:Label text="タイトル"/>
		</s:Group>
		<s:Group id="contents">
			<!-- 継承したmxmlでここにビューを追加 -->
		</s:Group>
	</s:VGroup>
</s:Group>

child.mxml

<base>
	<s:Label text="追加したよ"/>
</base>

こんな風に書けばいいらしい。

// 2014.01.15追記
こんなまどろっこしい方法を使わなくてもスキンを使えばいいことを知ったので追記

SampleSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:mx="library://ns.adobe.com/flex/mx" width="800" height="600">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.BorderContainer")]
	</fx:Metadata>

	<!-- states -->
	<s:states>
		<s:State name="disabled"/>
		<s:State name="normal"/>
	</s:states>

	<s:Rect width="100%" height="100%">
		<s:fill>
			<s:LinearGradient>
				<s:GradientEntry color="0x000000"/>
				<s:GradientEntry color="0xFFFFFF"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<!-- コンテンツ表示領域 -->
	<s:Group id="contentGroup" width="100%" height="100%"/>
</s:Skin>

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<s:BorderContainer skinClass="SampleSkin">
		<s:Label text="test"/>
	</s:BorderContainer>
</s:Application>

スキン内にid="contentGroup"のコンテナを用意する事でその中にコンポーネントが勝手に入ってくれる。