mx.containers
Box クラス

Box クラスは、VBox と HBox の基本クラスです。Box コンテナは、その子を単一の垂直列または水平行にレイアウトします。垂直レイアウトと水平レイアウトのいずれを使用するかは、direction プロパティで指定します。デフォルトは垂直レイアウトです。Box コンテナの定義には、<mx:Box>、<mx:VBox>、および <mx:HBox> タグを使用します。

MXML シンタックス

Box コンテナは、その親クラスのすべてのプロパティと以下のプロパティを継承します。

 <mx:Box
   direction="vertical|horizontal"
   horizontalAlign="left|center|right"
   horizontalGap="8"
   marginBottom="0"
   marginTop="0"
   verticalAlign="top|middle|bottom"
   verticalGap="6">
   ...
     子タグ
   ...
 /> 

関連項目
    HBox
    VBox

Box

layoutChildren

Box のレイアウトアルゴリズムを理解するために、ここでは Box の方向が水平であると仮定します。

Box の子すべてが単一の水平行に隣り合って配置されており、隣接する 2 つの子の間には horizontalGap で指定したピクセル数の間隔があります。明示的な幅の値がない子の幅は、preferredWidth と同じ値に設定されます。

子の preferredWidth の合計が Box の幅より大きくまたは小さくなり、widthがパーセント値である子がある場合には、これらの子はすべての子が Box の幅に完全に収まるまで増大または縮小します。ただし、子が minWidth より小さくなる、または maxWidth より大きくなることはありません。増大する子の間に、子の width に比例して領域が追加されます。縮小する子の場合には、その子の間にある領域が width に比例して削除されます。たとえば、40% の width を持つ子は、領域がすべて満たされるか、指定したサイズに到達するまで、20% の width を持つ子の 2 倍に増大します。

フレキシブルなすべての子が増大または縮小した後、子の幅の合計が Box の幅と一致するかどうかがチェックされます。一致しない場合には、子が Box の左端、右端、または中央揃えに整列されるように、子のグループ全体が Box の horizontalAlign プロパティの値に応じてシフトします。

子の高さを決定するために、Flex は子の height プロパティの値を確認します。height が設定されない場合は、子の高さはその preferredHeight に設定されます。height がピクセル値に設定されると、その値が使用されます。height がパーセント値に設定されている場合には、子の高さは Box の高さの指定したパーセントに一致するように増大または縮小します。ただし、子の高さが minHeight より小さくなる、または maxHeight より大きくなることはありません。

子の垂直方向の位置は、Box コンテナの verticalAlign プロパティによって決定されます。子はそれぞれボックスの上端、下端、または中央に整列されるようにシフトします。

Box コンテナの direction が vertical である場合にもこれと同じ規則が当てはまりますが、幅と高さが入れ替わります。子は、単一の垂直列に配置されます。

このメソッドを直接呼び出すことは避けてください。このメソッドは Flex LayoutManager によって適切なときに呼び出されます。アプリケーションの起動時に、Flex LayoutManager はすべてのコンポーネントでルートから開始して下方向に layoutChildren() メソッドを呼び出します。

これは、サブクラスの処理で使用する高度なメソッドです。このメソッドをオーバーライドする場合、実装で super.layoutChildren()メソッドを呼び出すか、子それぞれで move() および setSizeNoLayout() メソッドを呼び出す必要があります。レイアウトを実行するために、このコンテナのサイズは width および height プロパティではなく、layoutWidthおよび layoutHeight の各プロパティから取得してください。width および height プロパティは、このコンテナの scaleX および scaleY プロパティの値を考慮しません。

measure

Box コンテナの方向が水平である場合には、その preferredWidth はすべての子の推奨幅の合計に境界線の厚さ、左および右マージン、子同士の間の水平ギャップを加えたものと等しくなります。preferredHeight は、すべての子の推奨される高さの最大値に、境界線とマージンのための領域を加えたものです。Box コンテナの方向が垂直である場合は、これら 2 つの値が入れ替わります。

Box の minWidth および minHeight は、子の最小幅と最小高さを組み合わせて同様に計算されます。子の width プロパティがパーセント値である場合、Box の最小幅は子の minWidth プロパティの値に等しくなります。子の width が設定されていない場合や固定値である場合は、子は増大または縮小せず、Box の最小幅は子の preferredWidth プロパティの値に等しくなります。子の最小高さも同様に計算されます。

Box コンテナの maxWidth および maxHeight プロパティは計算されません。Box の最大幅と最大高さは無限であると想定されます。

上記の値はすべて、Box の計算された幅と高さです。setSize() メソッドを呼び出すか、以下のプロパティの値を明示的に指定することにより、計算された値をオーバーライドできます。

• minHeight
• minWidth
• maxHeight
• maxWidth
• preferredHeight
• preferredWidth
• height
• width

measure() メソッドを直接呼び出すことは避けてください。このメソッドは Flex LayoutManager によって適切なときに呼び出されます。アプリケーションの起動時に、Flex LayoutManager は子から親までのすべてのコンポーネントを、最終的なサイズに設定する前に測定しようとします。

これは、サブクラスの処理で使用する高度なメソッドです。このメソッドをオーバーライドする場合、実装で super.measure() メソッドを呼び出すか、または _measuredPreferredHeight および _measuredPreferredWidth プロパティを設定する必要があります。また、任意で以下のプロパティも設定します。

• _measuredMinWidth
• _measuredMinHeight

pixelsToPercent

パラメータ
    pxl:Number - パーセント値が必要なピクセルの数です。

戻り値
     このコンテナの現在のレイアウト状態でのピクセル数と等しいパーセント値です。負の値は、コンテナが要求されたサイズを収めるために増大する必要があることを示します。

setRelativeChildHeights

子に heightFlex を割り当ててそれぞれの推奨される高さを 0 にし、これらの子の合計が VBox コンテナの高さ全体になり、それぞれが指定した相対的な高さになるようにします。この関数では、Number 型のパラメータを子の数と同じ数だけ指定する必要があります。

たとえば、setRelativeChildHeights(2, 1, 1) では、最初の子が HBox コンテナの利用可能な高さの半分を占め、2 番目と 3 番目の子がそれぞれ利用可能な高さの 4 分の 1 ずつを占めます。

setRelativeChildWidths

子に widthFlex を割り当ててそれぞれの推奨幅を 0 にし、これらの子の合計が HBox コンテナの幅全体になり、それぞれが指定した相対幅になるようにします。この関数では、Number 型のパラメータを子の数と同じ数だけ指定する必要があります。

たとえば、setRelativeChildWidths(2, 1, 1) では、最初の子が HBox コンテナの利用可能な幅の半分を占め、2 番目と 3 番目の子がそれぞれ利用可能な幅の 4 分の 1 ずつを占めます。

direction

<?xml version="1.0"?>
<!-- Box レイアウトの使用方法を示す簡単な例 -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF">

<mx:Panel title="Box Panel" backgroundColor="#0066CC">

<mx:Box direction="vertical" borderStyle="solid" marginTop="10" marginBottom="10" marginLeft="10"
marginRight="10" backgroundColor="#66CCFF">
<mx:Button label="Button 1"/>
<mx:Button label="Button 2"/>
<mx:Button label="Button 3"/>
<mx:ComboBox/>
</mx:Box>

<mx:Box direction="horizontal" borderStyle="solid" marginTop="10" marginBottom="10" marginLeft="10"
marginRight="10" backgroundColor="#66CCFF">
<mx:Button label="Button 1"/>
<mx:Button label="Button 2"/>
<mx:Button label="Button 3"/>
<mx:ComboBox/>
</mx:Box>

</mx:Panel>

</mx:Application>