You use the ControlBar container with a Panel or TitleWindow container to hold components that can be shared by the other children in the Panel or TitleWindow container. For a product catalog, the ControlBar container can hold the Flex controls to specify quantity and to add an item to a shopping cart, as the following example shows:

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

Creating a ControlBar container

You use the <mx:ControlBar> 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. You specify the <mx:ControlBar> tag as the last child tag of an <mx:Panel> tag, as the following example shows:

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