« Flex2 コントロール - レイアウト・コンテナ Part1 - | トップページ | サンプルページが見辛かったようです »

2006年7月20日 (木)

Flex2 コントロール - レイアウト・コンテナ Part2 -

Flex2のコンテナコントロール Part2 です。
コントロール サンプルページ
example.mxml

  • Panel
    TitleWindow のようにタイトル部分・内容部分を持ち、視覚的にはっきりとしたコンテナです。
    レイアウトというよりも、見た目をわかりやすくする目的で使用するんじゃないでしょうか。
    それ以外は Box と大きくは違わないように思います。
    使用頻度の高いコンテナだと思います。
    <mx:Panel title="Panel">
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:Panel>
  • Canvas
    Boxに似ていますが、大きな違いは中に配置するコントロールにX、Y座標を指定する点です。
    Canvasの中では、CSS の position が absolute になるというイメージのようです。
    <mx:Canvas>
        <mx:Button label="button1" x="0" y="0" />
        <mx:Button label="button2" x="10" y="50" />
        <mx:Button label="button3" x="50" y="75" />
    </mx:Canvas>
  • DividedBox(HDividedBox・VDividedBox)
    中の要素はスプリッターで仕切られ、リサイズ可能となるコンテナです。
    Windows のエクスプローラで、左のツリーと右のリストビューの間の仕切りを ドラッグしてリサイズするのと同様の操作となります。
    direction に horizontal を指定すると横方向、vertical を指定すると縦方向となります。
    これは、それぞれHDividedBox と VDividedBox と同等になります。
    <mx:DividedBox direction="horizontal">
        <mx:Tree height="100%" />
        <mx:DataGrid height="100%" />
    </mx:DividedBox>
  • Form
    入力フォームをレイアウトする際に使用するようです。
    この中で、さらにFormItemを使用してTextInputやComboBoxなどを配置できます。
    FormItem には label プロパティがあり、ここに入力欄に対するラベルを設定します。
    また、入力必須の項目の場合は、FormItem の required を true にすると、ラベルの横に 赤い * 印が自動的に表示され、ユーザーに入力必須であることを知らせることができます。
    <mx:Form>
        <mx:FormItem label="氏名 :" required="true">
            <mx:TextInput width="300" />
        </mx:FormItem>
        <mx:FormItem label="性別 :" required="true" direction="horizontal">
            <mx:RadioButton groupName="group" label="男性" />
            <mx:RadioButton groupName="group" label="女性" />
        </mx:FormItem>
    </mx:Form>
  • ControlBar
    Panel または TitleWindow の下の部分にコントロールを配置する際に使用するようです。
    TitleWindow に OK、Cancel ボタンを配置する時などに使用すると良さそうです。
    配置する際は、Panel、TitleWindow の終了タグの直前に記述しなければならないようです。
    <mx:Panel title="ControlBar Test">
        <mx:TextArea width="100%" height="100%" />
        <mx:ControlBar horizontalAlign="right">
            <mx:Button label="保存" />
            <mx:Button label="リセット" />
        </mx:ControlBar>
    </mx:Panel>

|

« Flex2 コントロール - レイアウト・コンテナ Part1 - | トップページ | サンプルページが見辛かったようです »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11010557

この記事へのトラックバック一覧です: Flex2 コントロール - レイアウト・コンテナ Part2 -:

« Flex2 コントロール - レイアウト・コンテナ Part1 - | トップページ | サンプルページが見辛かったようです »