Chapter 8 : LAYING OUT YOUR AP ... | 6q7u9x | sa.yona.la help | tags | register | sign in

Re: Learning Flex 3: Getting Up to Speed With Rich Internet Applications (Adobe Developer Library)

Chapter 8 : LAYING OUT YOUR APPLICATIONS

reply

絶対配置 - layout="absolute"。絶対座標でコンポーネントの位置を指定する。

Flex Builderのデフォルトだが、Panel等のコンテナの中は相対配置で指定するのが

一般的。


相対配置 - 他のコンポーネントの位置やサイズを考慮して位置を決定する。

layout="vertical", layout="horizontal"がよく使われる。


コンテナ - MXMLでは子要素として記述、またはASでaddChild()を使うことで、

任意の数のコンポーネントを含めることができる。

<mx:Panel>
 <mx:TextInput/>
</mx:Panel>

Panel, HBox, VBox, Divided Box, Tile, Grid, Form等。

各子要素は0からインデックス番号がつけられ、getChildAt(1)でアクセスできる。

また、removeChild()で削除、swapChildren()で置換ができる。


サイズ - width, heightプロパティで、ピクセル数またはパーセントで指定できる。

ただし、ASではパーセント指定は、percentWidth, percentHeightで0-100の数値に

より行う。minWidth, maxWidth, minHeight, maxHeightで最小、最大サイズも指定

できる。


レイアウト - paddingLeft, paddingRight, paddingTop, paddingBottomで余白を

設定できる。また、horizontalGap, verticalGapで子要素間のギャップを指定する

方法もある。内部ではレイアウトは、以下の順に行われる。

- コンポーネントのデフォルトサイズの設定

- 最深の要素から順にサイズの算出

- 上位のコンテナから順にサイズと位置の決定


レイアウトのコントロール - Spacer, HRule, VRule等。

<mx:HBox width="250">
 <mx:Button label="Left"/>
 <mx:Spacer width="100%"/>
 <mx:Button label="Right"/>
</mx:HBox>

また、コンテナの属性、horizontalAlign, verticalAlignでleft, center, rightを

指定して並べ方を指定できる。


Constraint Rows/Columns - サイズ等の制約条件をconstraintRows, constraintColumns

に書くことができる。また、そのIDを指定して相対的な配置をtop="row1:10"のように

指定できる。

<mx:constraintRows>
 <mx:ConstraintRow id="row1" height="100"/>
</mx:constraintRows>
<mx:Button label="Button 1" top="row1:10" bottom="row1:10" left="10"/>

posted by 6q7u9x | reply (0) | trackback (0)

Trackback URL:
api | terms of service | privacy policy | support Copyright (C) 2017 HeartRails Inc. All Rights Reserved.