Murayama blog.

プログラミングと、その次の話

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


ここ1、2ヶ月Flexを触っています。


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


では始まります。


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


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



UIの部品(UIコンポーネント)大杉。


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


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


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

  • Accordion
  • VBox
  • HBox
  • Canvas
  • Form
  • Panel


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


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

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


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

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

に該当します。


じゃー実際に試してみます。
ラベル、テキストボックス、ボタンの3つを、
まずは、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>


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




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


もし、わかりにくければ、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>


Spacerありの場合、コンポーネント間が広がります。
Mozilla Firefox


初心者でも最低限こんだけおさえておけば、
ある程度自由にUIは構築できると思います。


以上、コンテナーコンポーネントの話はおしまい!


つづく。かも。

*1:正式な呼び名があるのかもしれないですがとりあえずコンテナーで