[Flex3] Panel 레이아웃 컨테이너 / Panel layout container

Reference : http://livedocs.adobe.com/flex/3/html/layouts_10.html#286627

Panel 레이아웃 컨테이너는 타이틀 바, 타이틀, 스테이터스 메시지 영역(타이틀 바 내부), 보더, 컨텐트 영역으로 구성된다. 일반적으로 self-contained 어플리케이션 모듈을 감싸기 위해 Panel 컨테이너를 사용한다. 예를 들어, 어떤 어플리케이션은 한 Panel 컨테이너는 폼을, 다른 컨테이너는 장바구니를, 또 다른 컨테이너는 카탈로그를 갖는 등 여러 개의 Panel 컨테이너를 정의할 수 있다.  

Panel 컨테이너에는 horizontal, vertical (기본), absolute 레이아웃 중 하나를 선택하는 layout 속성이 있다. 수평 레이아웃과 수직 레이아웃은 내부 컴포넌트를 수평으로, 수직으로 배열하기 위해 Flex 자동 레이아웃 규칙을 사용한다. 절대 레이아웃에서는 각 내부 컴포넌트의 (패널 컨텐트 영역에 상대적인) x 와 y 위치를 명시해야 한다. 또는 하나 이상의 면이나 가로 세로 중심을 정하기 위해 제약 기반의 레이아웃 스타일을 사용해야 한다. 컨테이너에서 절대 레이아웃과 제약 기반의 레이아웃을 사용하는 예는 Creating and using a Canvas control 에서 볼 수 있다. 이 레이아웃을 사용하는 기술에 대한 자세한 정보는 Sizing and Positioning Components 에서 볼 수 있다.

아래의 예는 Form 컨테이너를 내포하고 있는 Panel 컨테이너를 보여준다:

전체 정보는 Adobe Flex Language Reference 에서 볼 수 있다.

Creating a Panel layout container
Panel 레이아웃 컨테이너 생성

MXML에서 Panel 컨테이너는 <mx:Panel> 태그를 사용하여 정의한다. MXML, 다른 태그, ActionScript 블럭에서 컴포넌트를 참조하려면 id 값을 명시해야 한다.

아래의 예는 최상위 수준 컨테이너로 form 을 갖고 있는 Panel 컨테이너를 어플리케이션에서 정의한다. 이 예에서 Panel 컨테이너는 표준 GUI 윈도우처럼 타이틀 바를 다는 방법을 제공한다.

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

    <mx:Panel id="myPanel" title="My Application">

        <mx:Form width="300">
            <mx:FormHeading label="Billing Information"/>
            <!-- Form 내용은 여기에 들어감 -->
        </mx:Form>

    </mx:Panel>
</mx:Application>

이 예를 실행한 SWF 파일은 아래와 같다:

Adding a ControlBar container to a Panel container
Panel 컨테이너에 ControlBar 컨테이너 추가

Panel 컨테이너의 내부 컴포넌트와 공유될 수 있는 컴포넌트를 위해 ControlBar 컨테이너를 Panel 컨테이너와 함께 사용할 수 있다. 예를 들어 RichTextEditor 컨트롤은 TextArea 컨트롤과 함께 Panel 컨트롤과 텍스트 형식 컨트롤을 위한 ControlBar  로 구성된다. 제품 카탈로그에서 ControlBar 컨테이너는 수량을 보여주거나, 장바구니에 아이템을 추가하는 Flex 컨트롤을 가질 수 있다:

A. Panel 컨테이너 B. ControlBar 컨테이너

<mx:ControlBar> tag as the last child tag of an <mx:Panel> 태그 안에 마지막 컴포넌트로 <mx:ControlBar> 태그를 명시할 수 있다:

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

    <mx:Panel title="My Application"
        paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10"
        width="300">
   
        <mx:Script>
            <![CDATA[
                private function addToCart():void {
                    // event 처리.
                }
            ]]>
        </mx:Script>
   
        <mx:HBox width="100%">
            <!-- 카탈로그 영역. -->
        </mx:HBox>
       
        <mx:ControlBar width="100%">
            <mx:Label text="Quantity"/>
            <mx:NumericStepper id="myNS"/>
            <!-- Button을 오른쪽에 놓기 위해 Spacer 사용. -->
            <mx:Spacer width="100%"/>
            <mx:Button label="Add to Cart" click="addToCart();"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

이 코드를 실행한 SWF 파일은 아래와 같다:

ControlBar 컨테이너에 대한 더 많은 정보는 ControlBar layout container 에서 볼 수 있다.

Panel 컨테이너에 동적으로 ControlBar 컨테이너를 추가할 수도 있다:

<?xml version="1.0"?>
<!-- containers\layouts\PanelCBarDynamicAdd.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[       
            import mx.containers.ControlBar;
            import mx.controls.*;
            import flash.events.MouseEvent;
           
            private var myCB:ControlBar=new ControlBar();
            private var myLabel:Label=new Label();
            private var myNS:NumericStepper=new NumericStepper();
            private var mySpacer:Spacer=new Spacer();
            private var myButton:Button=new Button();
       
            private var canAddChild:Boolean = true;
       
            private function addCBHandler():void {
                if (canAddChild) {
                    /* Controlbar 컨트롤 생성. */
                    myLabel.text="Quantity";
                    mySpacer.percentWidth=100;
                    myButton.label="Add to Cart";
                    myButton.addEventListener('click', addToCart);               
                   
                    myCB.percentWidth=100;
                    myCB.addChild(myLabel);
                    myCB.addChild(myNS);
                    myCB.addChild(mySpacer);
                    myCB.addChild(myButton);
                   
                    /* Panel 컨테이너의 마지막 내부 컨포넌트로 ControlBar 추가.
                       ControlBar 는 Panel 컨테이너의 일반 컨텐트 영역에 보임. */
                    myPanel.addChildAt(myCB, myPanel.numChildren);             
                   
                    /* Panel 컨테이너의 바닥에 ControlBar 를 보여주기
                     위해 createComponentsFromDescriptors() 호출.
                     The ControlBar 는 반드시 Panel 컨테이너의
                     내부 컴포넌트 중 마지막에 선언되어야 한다. */
                    myPanel.createComponentsFromDescriptors();
   
                    /* ControlBar 컨트롤이 하나 이상 추가되는 것을 방지. */
                    canAddChild = false;               
                }
            }

            private function addToCart(event:MouseEvent):void {
                Alert.show("ControlBar Button clicked.");
            }
        ]]>
    </mx:Script>

    <mx:Panel id="myPanel"
        title="My Application"
        paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10"
        width="300">
   
        <mx:HBox width="100%">
            <!-- 카탈로그 영역. -->
        </mx:HBox>

        <mx:Button label="Add ControlBar" click="addCBHandler();"/>
       
    </mx:Panel>
</mx:Application>