Control bars allow you to group together all the controls for a panel or title window. Application control bars are the application-wide analogs to control bars. Each allows you to group together all the controls for that container, even if the controls are of various types.

Control bars work with title window and panel components, and you should add them as the last child for a title window or panel. You can then place controls within the control bar. Here’s an example:

<mx:Panel id="panel" width="250" height="200">
    <mx:TextArea id="textArea" width="80%" height="80%" text="Example" />
    <mx:ControlBar>
        <mx:Button label="Random Font Size"
            click="textArea.setStyle('fontSize', Math.random() * 20 + 8)" />
        <mx:ColorPicker id="color"
            change="panel.setStyle('backgroundColor', color.value)" />
    </mx:ControlBar>
</mx:Panel>

Figure 7-14 shows what this looks like. Clicking on the button changes the font size, and changing the value of the color selector changes the background of the panel.

Figure 7-14. A panel with a control bar

The application control bar works similarly, but it is applied only to an application container. By default, the application control bar scrolls with the rest of the content. However, it is possible to set the dock property to true to dock the control panel such that it does not scroll. Here’s how you would do that:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Canvas x="0" y="0" width="200" height="2000" />
    <mx:ApplicationControlBar dock="true">
        <mx:Label text="Jump To Section:"/>
        <mx:ComboBox>
            <mx:dataProvider>
                <mx:ArrayCollection>
                    <mx:Array>
                        <mx:String>A</mx:String>
                        <mx:String>B</mx:String>
                        <mx:String>C</mx:String>
                        <mx:String>D</mx:String>
                    </mx:Array>
                </mx:ArrayCollection>
            </mx:dataProvider>
        </mx:ComboBox>
        <mx:VRule width="20" height="28"/>
        <mx:TextInput/>
        <mx:Button label="Search"/>
    </mx:ApplicationControlBar>
</mx:Application>

Figure 7-15 shows what this looks like.

Figure 7-15. Application control bars docked so that they don’t scroll with the rest of the content