Box

Flexのコンポーネントには、部品を手軽に配置するためのレイアウト用コントロールが用意されています。標準コンポーネントです。

レイアウトコントロールの種類

Flex2のコンポーネントには、部品を手軽に配置するためのレイアウト用コントロールが幾つか用意されています。

VBox, HBox は、固定レイアウトなのですが、VDividedBox,HDividedBox を利用すると、仕切りをドラッグにより変更できるレイアウトが可能です。

基本的な使い方

以下のようなタグをソースに挿入します。下記の例では、分かりやすく、コンテナ周囲に線を表示していますが、通常は、borderStyle等を指定しないで利用します。

   <!-- 水平配置 -->
   <mx:HBox x="0" y="30" width="100%"
       borderStyle="solid" borderColor="0">
       <mx:Button label="ボタン"/>
       <mx:Button label="ボタン"/>
       <mx:Button label="ボタン"/>
   </mx:HBox>
<!-- 垂直配置 -->
<mx:VBox x="10" y="40">
    <mx:Button label="ボタン"/>
    <mx:Button label="ボタン"/>
    <mx:Button label="ボタン"/>
</mx:VBox>
   <!-- 水平配置（可変） -->
   <mx:HDividedBox x="0" y="30" width="100%" height="150"
       borderStyle="solid" borderColor="0">
       <mx:TextArea text="aaa" width="100%" height="100%"/>
       <mx:TextArea text="bbb" width="100%" height="100%"/>
       <mx:TextArea text="ccc" width="100%" height="100%"/>
   </mx:HDividedBox>
   <!-- 垂直配置（可変） -->
   <mx:VDividedBox x="0" y="0" width="100%" height="100%"
       borderStyle="solid" borderColor="0">
       <mx:TextArea text="aaa" width="100%" height="100%"/>
       <mx:TextArea text="bbb" width="100%" height="100%"/>
       <mx:TextArea text="ccc" width="100%" height="100%"/>
   </mx:VDividedBox>

まとめ

• レイアウト行う HBox, VBox, HDivideBox, VDividedBoxなどのコンテナを利用すると配置が楽になります。

コメント