MXML のコンポーネントの特性を利用しよう

海賊王をめざす男 マツです。こんにちは。

今年こそは覇王色の覇気をまとってみたい！今年もよろしくお願いします。

MXML のコンポーネントの特性を上手に利用することで、ぐっと制作に幅が広がります。
HBox、VBox コンポーネントを例にしてみましょう。

HBox の H は、horizon（水平）
VBox の V は、vertical（垂直）

それぞれにカスタムコンポーネントを addChild してみます。

BoxComponent.mxml カスタムコンポーネント

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Box width="100" height="100" backgroundColor="#aaaaaa"/>
	<mx:Text id="myText" text="a"/>
</mx:Canvas>

main.mxml メインアプリケーション

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init();" backgroundColor="#ffffff">
	<mx:Script>
		<![CDATA[
			private function init():void
			{
				var myBoxComponent:BoxComponent;
				for ( var a:int=0; a<5; a++ ) {
					myBoxComponent = new BoxComponent();
					testHBox.addChild(myBoxComponent);
					myBoxComponent.myText.text = String( a + 1 );
				}
				for ( var b:int=0; b<5; b++ ) {
					myBoxComponent = new BoxComponent();
					testVBox.addChild(myBoxComponent);
					myBoxComponent.myText.text = String( b + 1 );
				}
			}
		]]>
	</mx:Script>
	<mx:HBox id="testHBox"/>
	<mx:VBox id="testVBox"/>
</mx:Application>

カスタムコンポーネントを水平方向・垂直方向へ並べることができます。

【デモ】

このようにコンポーネントの特性を理解していれば、簡単ですね。間隔も horizontalGap や verticalGap をつかえばすぐに設定できます。

<mx:HBox id="testHBox" horizontalGap="100"/>
<mx:VBox id="testVBox" verticalGap="100"/>

このように大体のレイアウトを MXML で設計して、細かなつくりこみをカスタムコンポーネントや Flash でつくることで、ぐっと制作に幅が広がります。

サンプル Flex プロジェクトファイルをダウンロードしてみてください。

【ダウンロード】