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

Reference : http://livedocs.adobe.com/flex/3/html/layouts_05.html#208840

 Panel 이나 TileWindow 컨테이너의 내부 컴포넌트에 의해 공유될 수 있는 컴포넌트를 이용하기 위해 ControlBar 컨테이너를 사용할 수 있다. 아래에서 보이는 것처럼, 제품 카탈로그에서 ControlBar 컨테이너는 수량을 나타내고 장바구니에 아이템을 추가하는 Flex 컨트롤을 포함한다:

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

전체 참조 정보는 Adobe Flex Language Reference 를 참고하시오.

Creating a ControlBar container
ControlBar 컨테이너 생성

MXML에서 ControlBar 컨트롤을 정의하기 위해 <mx:ControlBar> 태그를 사용한다. MXML, 다른 태그, ActionScript 블럭에서 컴포넌트를 참조하고자 한다면 id 값을 정해야 한다. 아래의 예제에서 보이는 것처럼 <mx:ControlBar> 태그를 <mx:Panel> 태그 내부의 마지막 태그로 나타낼 수 있다:
 

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

    <mx:Script>
        <![CDATA[
            private function addToCart():void {
                // Handle event.
            }
        ]]>
    </mx:Script>

    <mx:Panel title="My Application"
        paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10">

        <mx:HBox width="250" height="200">
            <!-- Area for your catalog. -->
        </mx:HBox>
   
        <mx:ControlBar width="250">
            <mx:Label text="Quantity"/>
            <mx:NumericStepper/>
            <!-- Use Spacer to push Button control to the right. -->
            <mx:Spacer width="100%"/>
            <mx:Button label="Add to Cart"
                click="addToCart();"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

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