[Flex3] DividedBox, HDividedBox, VDividedBox 레이아웃 컨테이너 / DividedBox, HDividedBox, and VDividedBox layout containers

Reference :http://livedocs.adobe.com/flex/3/html/layouts_07.html#204746

DividedBox 레이아웃 컨테이너는 Box 컨테이너처럼 내부 컴포넌트를 수평이나 수직으로 배열한다. 하지만 내부 컴포넌트 사이에 디바이더를 삽입한다는 점에서 Box 컨테이너와 다르다. 마우스 포인터로 디바이도를 이동시킴으로써 각 컴포넌트에 할당된 영역의 크기를 조절할 수 있다. 레이아웃을 수직으로 할 것인지, 수평으로 할 것인지 정하기 위해 DividedBox 컨테이너의 direction 속성을 사용한다. HDividedBox 컨테이너와 VDividedBox 컨테이너는 각 DividedBox 의 direction 속성의 값을 horizontal, vertical 로 설정한 것이다.

아래의 예는 DividedBox 컨테이너를 보여준다:

이 예제에서, 가장 상위 컨테이너는 수평 DividedBox 컨테이너다. 이 컨테이너의디바이더는 Tree 컨트롤과 수직 DividedBox 컨테이너 사이에 위치한다.

수직 DividedBox 컨테이너는 DataGrid 컨트롤 (위) 과 TextArea 컨트롤 (아래) 을 내포한다. 이 컨테이너의 디바이더는 이 두 컨트롤 사이에 위치한다. 

완전한 참조 정보는 Adobe Flex Language Reference 를 참고하라.

Creating a DividedBox, HDividedBox, or VDividedBox container
DividedBox, HDividedBox, VDividedBox 컨테이너 생성   

DividedBox 컨테이너를 정의하기 위해 <mx:DividedBox>, <mx:VDividedBox>, <mx:HDividedBox> 태그를 사용한다. MXML, 태그, ActionScript 블럭에서 컴포넌트를 참조하려면 id 값을 명시하라. 일반적으로, direction 속성을 설정하지 않아도 되기 때문에 VDividedBox (수직 DividedBox) 와 HDividedBox (수평 DividedBox) 컨테이너를 사용한다.

아래의 코드 예제는 DividedBox, HDividedBox, and VDividedBox layout containers 에서 보이는 이미지를 생성한다:

<?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 파일은 아래와 같다:

이 예제에서 VDividedBox 컨테이너의 상단의 영역인 Tree 컨트롤에서 노드를 선택하는 것과 같은 동작의 로직이은 구현되지 않았다.

Using the dividers
디바이더 사용하기

DividedBox 컨테이너의 디바이더는 내부 컴포넌트에 할당된 영역의 크기를 조절한다. 하지만 디바이더의 이 기능을 사용하기 위해 내부 컴포넌트의 크기를 변경하는 것이 가능해야 한다. 다시 말해서 내부 컴포넌트의 크기는 반드시 상대적으로(%) 명시해야 한다. 픽셀 단위로 크기가 정해진 내부 컴포넌트는 디바이더를 사용하여 크기를 변경시킬 수 없다. 그러므로 DividedBox 컨테이너의 내부 컴포넌트의 크기를 정할 때는 일반적으로 퍼센트를 사용하여 크기를 변경할 수 있게한다. 

When you specify a percentage value for the내부 컴포넌트의 크기를 변경 가능하도록 height 나 width 속성을 퍼센트 값으로 명시할 때, Flex 는 (할 수 있다면) 명시된 퍼센트 값에 따라 내부 컴포넌트의 크기를 초기화한다. Flex는 가능한 공간에 내부 컴포넌트가 꽉 차도록 크기를 조절할 수 있다.

디바이더를 사용하여 퍼센트로 크기가 정해진 내부 컴포넌트를 최대화, 최소화 할 수 있다. DividedBox 공간에서 최대, 최소 크기를 지정하려면, 내부 컴포넌트의 minWidth, minHeight 속성이나 maxWidth, maxHeight 속성을 명시하라.

Using live dragging
라이브 드래깅 사용

기본적으로 DividedBox 컨테이너는 라이브 드래깅을 비활성화시킨다. 이것은 디바이더 드래깅이 완료되기까지 DividedBox 컨테이너가 레이아웃을 갱신하지 않는다는 것을 의미한다.

DividedBox 컨테이너에서 liveDragging 속성을 true 로 정함으로써 라이브 드래깅을 사용할 수 있다. 라이브 드래깅이 활성화되면, DividedBox 컨테이너는 디바이더의 움직임에 따라 레이아웃을 갱신한다. 라이브 드래깅을 활성화 하면 경우에 따라 성능이 저하될 수 있다.