DividedBox レイアウトコンテナは、子を水平方向または垂直方向にレイアウトします。Box コンテナとよく似ていますが、DividedBox には子と子の間に分割線が挿入される点で異なります。マウスポインタを使って分割線を動かし、それぞれの子に割り当てられたコンテナ領域をサイズ変更することができます。DividedBox コンテナの direction プロパティを使用し、垂直レイアウト（デフォルト）か水平レイアウトかを決定します。HDividedBox および VDividedBox コンテナは、horizontal および vertical direction プロパティ値を持つ DividedBox コンテナです。

次に、DividedBox コンテナの例を示します。

この例では、最も外側のコンテナが水平レイアウトの DividedBox コンテナです。水平分割線は、Tree コントロールと垂直レイアウトの DividedBox コンテナの間に境界を設定します。

垂直レイアウトの DividedBox コンテナは、DataGrid コントロール（上）と TextArea コントロール（下）を保持します。垂直分割線は、これら 2 つのコントロールの間に境界を設定します。

詳細については、『Adobe Flex リファレンスガイド』を参照してください。

DividedBox、HDividedBox、または VDividedBox コンテナの作成

<mx:DividedBox>、<mx:VDividedBox>、および <mx:HDividedBox> タグを使用して、DividedBox コンテナを定義します。MXML の他の場所（別のタグまたは ActionScript ブロック）のコンポーネントを参照する場合は、id 値を指定します。通常は、VDividedBox（vertical DividedBox）および HDividedBox（horizontal DividedBox）コンテナをショートカットとして使用するので、direction プロパティを指定する必要はありません。

次のコード例では、DividedBox、HDividedBox、および VDividedBox レイアウトコンテナで示したイメージを作成します。

<?xml version="1.0"?>
<!-- containers\layouts\HDivBoxSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="white">

    <mx:Script>
      <![CDATA[
        private function myGrid_initialize():void {
          myGrid.dataProvider = [
            {Artist:'Pavement', Album:'Slanted and Enchanted', 
                Price:11.99, Comment:'One of their best. 4 Stars.'},
            {Artist:'Pavement', Album:'Brighten the Corners', 
                Price:11.99, Comment:'My favorite.'}
          ];
        }
      ]]>
    </mx:Script>

    <mx:HDividedBox width="100%" height="100%">
        <mx:Tree id="tree1" 
            width="30%" height="100%"
            labelField="@label" 
            showRoot="true">
            <mx:XMLList>
                <menuitem label="Products">
                    <menuitem label="Posters" isBranch="true"/>
                    <menuitem label="CDs">
                        <menuitem label="Pavement"/>
                        <menuitem label="Pavarotti"/>
                        <menuitem label="Phish"/>
                    </menuitem>
                    <menuitem label="T-shirts" isBranch="true"/>
                    <menuitem label="Tickets" isBranch="true"/>
                </menuitem>
            </mx:XMLList>
        </mx:Tree>

        <mx:VDividedBox width="70%" height="100%">
            <mx:DataGrid id="myGrid" 
                width="100%" height="100%" 
                initialize="myGrid_initialize();"
                change="currentMessage.text=
                    event.currentTarget.selectedItem.Comment;"/>
            <mx:TextArea id="currentMessage" 
                width="100%" 
                height="60" 
                text="One of their best. 4 Stars."/>
        </mx:VDividedBox>

    </mx:HDividedBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、Tree コントロールでノードが選択されたときに VDividedBox コンテナの上部領域を変更するロジックが実装されていません。

分割線の使用

DividedBox コンテナの分割線により、子に割り当てられたコンテナの領域をサイズ変更できます。ただし、分割線が適切に機能するのは、子がサイズ変更可能な場合のみです。つまり、子のサイズをパーセント値ベースで指定する必要があります。明示的な、またはデフォルトの高さまたは幅を持つ子は、分割線を使用して水平方向または垂直方向にサイズ変更することはできません。したがって、DividedBox コンテナを使用する場合は通常、パーセント値のサイズを指定することで子をサイズ変更可能にします。

子の height または width プロパティにパーセント値を指定してサイズ変更を可能にすると、子は最初、可能な場合は指定のパーセント値のサイズで表示されます。次に、すべての使用可能領域を占有するように子のサイズが変更されます。

パーセント値でサイズ指定された子は、分割線を使用して、最大サイズまたは最小サイズまで変更できます。DividedBox の領域の最小サイズまたは最大サイズを制限するには、その領域内の子の minWidth および minHeight プロパティ、または maxWidth および maxHeight プロパティに値を明示的に設定します。

ライブドラッグの使用

DividedBox コンテナでは、デフォルトでライブドラッグが無効になっています。したがって、DividedBox コンテナで子のレイアウトが更新されるのは、ユーザーが分割線のドラッグを終えた後に、選択した分割線上でマウスボタンを離したときです。

DividedBox コンテナでライブドラッグを使用するには、liveDragging プロパティを true に設定します。ライブドラッグが有効になっている場合は、ユーザーが分割線を移動すると、その動きに応じてレイアウトが更新されます。ただし、ライブドラッグを有効にしたことによってパフォーマンスが低下する場合があります。