You use the ApplicationControlBar container to hold components that provide access to application navigation elements and commands. An ApplicationControlBar container for an editor, for example, could include Button controls for setting the font weight, a ComboBox to select the font, and a MenuBar control to select the edit mode. The ApplicationControlBar is a sublcass of the ControlBar class; however, it has a different look and feel.

Typically, you place an ApplicationControlBar container at the top of the application, as the following example shows:

If you dock the ApplicationControlBar container at the top of an application, it does not scroll with the application contents.

For complete reference information, see the Adobe Flex Language Reference.

Creating an ApplicationControlBar container

You use the <mx:ApplicationControlBar> tag to define a ControlBar control in MXML. Specify an id value if you intend to refer to a component elsewhere in your MXML code, either in another tag or in an ActionScript block.

The ApplicationControlBar container can be in either of the following modes:

Docked mode 

The bar is always at the top of the application's drawing area. Any application-level scroll bars don't apply to the container, so it always remains at the top of the visible area, and the bar expands to fill the width of the application. To created a docked ApplicationControlBar container, set its dock property to true.

Normal mode 

The bar can be placed anywhere in the application, is sized and positioned just like any other component, and scrolls with the application. The ApplicationControlBar floats if its dock property is false. The default value is false.

The following example shows an application with a simple docked ApplicationControlBar that includes a MenuBar. The Application also includes an HBox control that exceeds the application size; when you scroll the application to view the bottom of the HBox control, the ApplicationControlBar control does not scroll.

<?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>
The executing SWF file for the previous example is shown below: