ControlBar コンテナを Panel コンテナや TitleWindow コンテナと共に使用すると、Panel コンテナや TitleWindow コンテナの他の子と共有可能なコンポーネントを配置できます。次の例に示すように、製品カタログの場合は、数量の指定やショッピングカートへの商品の追加を行う Flex コントロールを ControlBar コンテナに配置できます。

詳細については、『Adobe Flex リファレンスガイド』を参照してください。

ControlBar コンテナの作成

<mx:ControlBar> タグを使用して、MXML で 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 ファイルは以下のとおりです。