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

Reference: http://livedocs.adobe.com/flex/3/html/layouts_06.html#254916

어플리케이션 내버게이션 엘리먼트와 커맨드로 접근을 제공하는 컴포넌트를 위해 ApplicationControlBar 컨테이너를 사용한다. 예를 들어 편집기를 생각해보면 ApplicationControlBar 컨테이너는 폰트의 굵기를 정하기 위한 Button, 폰트를 선택하기 위한 ComboBox, 편집 모드를 선택하기 위한 MenuBar 컨트롤을 가질 수 있을 것이다. ApplicationControlBar 는 ControlBar 클래스의 하위 클래스지만, 모양과 느낌이 다르다.

대개 ApplicationBar 컨테이너는 아래의 그림처럼 어플리케이션의 상단에 위치한다.:

ApplicationControlBar 컨테이너를 어플리케이션의 상단에 위치시키면 어플리케이션 컨텐츠와 함께 스크롤되지 않는다.

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

Creating an ApplicationControlBar container
ApplicationControlBar 컨테이너 생성

MXML에서 ApplicationControlBar 컨트롤을 정의하기 위해 <mx:ApplicationControlBar> 태그를 사용한다. MXML 코드, 다른 태그, ActionScript 블럭에서 컴포넌트를 참조하려면 id 값을 명시해야 한다.

ApplicationControlBar 컨테이너는 아래의 모드 중 하나에 속할 수 있다:

Docked mode

바는 항상 어플리케이션이 그려지는 영역의 상단에 위치한다. 어플리케이션 수준의 어떤 스크롤 바도 컨테이너에 적용되지 않아서, 컨트롤 바는 항상 가장 산단에 위치하다. 그리고 바는 어플리케이션의 가로 길이에 따라 자동으로 확장된다. ApplicationControlBar 컨테이너를 생성하려면 dock 속성을 true 로 설정하라.

Normal mode

바는 다른 컴포넌트처럼 크기와 위치가 정해지기 때문에 어플리케이션의 어디에도 위치할 수 있고, 어플리케이션과 함께 스크롤 될 수 있다. dock 속성이 false 로 정해지면 ApplicationControlBar 는 플로팅 가능하다.

Note: ControlBar 컨테이너와는 달리 ApplicationControlBar 의 인스턴스에서 backgroundColor 스타일을 설정할 수 있다. ApplicationControlBar 컨테이너는 ControlBar 컨테이너가 지원하지 않는 fillColors 와 fillAlpha 의 두 가지 속성을 가진다.

아래의 예제는 MenuBar를 포함하는 간단한 docked ApplicationControlBar 가 있는 어플리케이션을 보여준다. Application은 어플리케이션 크기를 초과하는 HBox 컨트롤도 포함하고 있다. HBox 컨트롤의 바닥을 보기 위해 어플리케이션을 스크롤하면 ApplicatonControlBar 컨트롤이 스크롤되지 않는 것을 볼 수 있다.

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>

    <mx:XMLList id="menuXML">
        <menuitem label="File">
            <menuitem label="New" data="New"/>
            <menuitem label="Open" data="Open"/>
            <menuitem label="Save" data="Save"/>
            <menuitem label="Exit" data="Exit"/>
        </menuitem>
        <menuitem label="Edit">
            <menuitem label="Cut" data="Cut"/>
            <menuitem label="Copy" data="Copy"/>
            <menuitem label="Paste" data="Paste"/>
        </menuitem>
        <menuitem label="View"/>
    </mx:XMLList>

    <mx:Array id="cmbDP">
        <mx:String>Item 1</mx:String>
        <mx:String>Item 2</mx:String>
        <mx:String>Item 3</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar id="dockedBar"
        dock="true">
        <mx:MenuBar height="100%"
            dataProvider="{menuXML}"
            labelField="@label"
            showRoot="true"/>
        <mx:HBox paddingBottom="5"
            paddingTop="5">
            <mx:ComboBox dataProvider="{cmbDP}"/>
            <mx:Spacer width="100%"/>
            <mx:TextInput id="myTI" text=""/>
            <mx:Button id="srch1"
                label="Search"
                click="Alert.show('Searching')"/>
        </mx:HBox>
    </mx:ApplicationControlBar>
   
    <mx:TextArea width="300" height="200"/>
</mx:Application>

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