[Flex3] Box, HBox, VBox 레이아웃 컨테이너 / Box, HBox, and VBox layout containers

reference : http://livedocs.adobe.com/flex/3/html/layouts_04.html

사용자 인터페이스 > Layout Container 사용 > Box, HBox, and VBox layout containers

Box 레이아웃 컨테이너는 내부 컴포넌트를 하나의 열이나 또는 하나의 행으로 배열합니다. 수직 레이아웃(기본)과 수평 레이아웃을 정하기 위해 Box 컨테이너의 direction 속성을 사용할 수 있습니다. HBox 컨테이너와 VBox 컨테이너는 direction 속성이 각 horizontal, vertical 로 정해진 Box 컨테이너입니다.  

Note: 내부 컴포넌트를 두 개 이상의 행이나 열로 배열하려면 Tile 이나 Grid 컨테이너를 사용해야 합니다. 더 자세한 정보는 Tile 레이아웃 컨테이너 와 Grid 레이아웃 컨테이너에서 볼 수 있습니다.

아래의 예제는 수평 레이아웃의 Box 컨테이너와 수직 레이아웃의 Box 컨테이너를 보여주고 있습니다.



더 많은 정보는 Adobe Flex 언어 Reference 에서 찾을 수 있습니다.

Creating a Box, HBox, or VBox container
 
Box, HBox, VBox 컨테이너 생성

Box 컨테이너를 정의하기 위해 <mx:Box>, <mx:VBox>, <mx:HBox> 태그를 사용할 수 있습니다. Box 컨테이너에서 direction 속성을 명시하지 않고, VBox (수직 박스) 와 HBox (수평 박스) 컨테이너를 단축키처럼 사용할 수 있습니다. MXML이나 다른 태그, ActionScript 블럭에서 컴포넌트를 참조하려면 id 값을 지정하십시오.

아래의 예제는 수직 레이아웃으로 Box 컨테이너를 생성합니다.

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

    <mx:Box direction="vertical"
        borderStyle="solid"
        paddingTop="10"
        paddingBottom="10"
        paddingLeft="10"
        paddingRight="10">

        <mx:Button id="fname" label="Button 1"/>
        <mx:Button id="lname" label="Button 2"/>
        <mx:Button id="addr1" label="Button 3"/>
        <mx:ComboBox id="state">
              <mx:ArrayCollection>
                 <mx:String>ComboBox 1</mx:String>
              </mx:ArrayCollection>        
        </mx:ComboBox>
    </mx:Box>
</mx:Application>

위의 예제에서 생성된 SWF 파일을 생성하면 아래와 같은 화면을 볼 수 있습니다:

아래의 예제는 <mx:VBox> 태그를 사용해서 수직 Box 컨테이너를 정의했습니다. 이를 제외하면, 위의 예제와 같습니다.

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

    <mx:VBox borderStyle="solid"
        paddingTop="10"
        paddingBottom="10"
        paddingLeft="10"
        paddingRight="10">
       
        <mx:Button id="fname" label="Button 1"/>
        <mx:Button id="lname" label="Button 2"/>
        <mx:Button id="addr1" label="Button 3"/>
        <mx:ComboBox id="state">
              <mx:ArrayCollection>
                 <mx:String>ComboBox 1</mx:String>
              </mx:ArrayCollection>        
        </mx:ComboBox>
    </mx:VBox>
</mx:Application>

생성된 SWF 파일을 실행하면 아래와 같은 화면이 보입니다: