まずはレイアウト指定を覚える。

ここ１、２ヶ月Flexを触っています。

もともとJavaのプログラマーだった僕が、
Flexをマスターするまでの過程をちょくちょくブログに残していこうと思います。

では始まります。

初めてFlexを見たとき、正確には、FlexBuilderを見たときの印象は、
「EclipseでVisual Studioみたいな開発ができるんでしょ」みたいなノリでした。
てきとうにUI並べて、
グイグィーっとドラッグしたら画面作れちゃうんでしょ、って思ってました。
が、若干、甘かったです。

で、実際に触ってみて最初に思ったのが、

UIの部品（UIコンポーネント）大杉。

頭の中でイメージしたUI（画面）を作るのに、
ボタンやテキストボックスを適当に配置してみましたが、
なんだか不自然な並びになってしまいます。
このときの僕は、レイアウトを管理するコンテナーコンポーネント *1を知らなかったのです。

コンテナーコンポーネントっていうのは、
その名前のとおり、ボタンやテキストボックスといったベタなUIコンポーネントを格納するためのコンポーネントです。
で、このコンテナーコンポーネントは、
内部に格納するUIコンポーネントのレイアウト（並び方）を指定することができます。

コンテナーコンポーネントには、

Accordion
VBox
HBox
Canvas
Form
Panel

など、たくさんあるのですが、まず覚えるべきなのは、
Canvas、VBox、HBoxの3つで良いと思います。

Flexには、UIコンポーネントの場所を指定するために、基本的に３つの方法が用意されています。

X、Y座標で場所を指定する
縦並びに配置する
横並びに配置する

で、Canvas、VBox、HBoxのそれぞれが、

X、Y座標で場所を指定する：Canvas
縦並びに配置する：HVox
横並びに配置する：VBox

に該当します。

じゃー実際に試してみます。
ラベル、テキストボックス、ボタンの３つを、
まずは、HBoxで並べてみます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:HBox>
		<mx:Label text="年齢" />
		<mx:TextInput text="29"/>
		<mx:Button label="登録" />
	</mx:HBox>
</mx:Application>

結果は横並びですね。

次は、VBoxで並べてみます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:VBox>
		<mx:Label text="年齢" />
		<mx:TextInput text="29"/>
		<mx:Button label="登録" />
	</mx:VBox>
</mx:Application>

結果は縦並びです。

最後に座標指定のCanvasです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Canvas>
		<mx:Label text="年齢" />
		<mx:TextInput text="29"/>
		<mx:Button label="登録" />
	</mx:Canvas>
</mx:Application>

残念、全部、重なってしまいました。
＃ベタ杉。

Canvasを使う場合は座標指定が必要です。指定しない場合は X=0,Y=0 になってしまいます。
ラベル、テキスト、ボタンのコードをちょっと修正します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Canvas>
		<mx:Label text="年齢" x="100" y="100" />
		<mx:TextInput text="29" x="200" y="200" />
		<mx:Button label="登録" x="300" y="300" />
	</mx:Canvas>
</mx:Application>

これで、指定した座標でコンポーネントが配置されます。

３つのコンテナーコンポーネントの使い分けは以上です。

もし、わかりにくければ、HTMLに例えて、

TABLEタグによる配置がHBox、VBoxによる配置
DIVタグによる配置がCanvasによる配置

と考えるのも良いかもしれません。

また、HBoxや　VBoxを使う場合、
コンポーネント間にスペースを取りたい場合もあると思います。
その場合はSpacerコンポーネントを使用すると便利です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:HBox>
		<mx:Spacer width="100" /> 
		<mx:Label text="年齢" />
		<mx:Spacer width="100" /> 
		<mx:TextInput text="29"/>
		<mx:Spacer width="100" /> 
		<mx:Button label="登録" />
	</mx:HBox>
</mx:Application>