A Panel layout container includes a title bar, a title, a status message area (in the title bar), a border, and a content area for its children. Typically, you use Panel containers to wrap self-contained application modules. For example, you could define several Panel containers in your application where one Panel container holds a form, a second holds a shopping cart, and a third holds a catalog.

The Panel container has a layout property that lets you specify one of three types of layout: horizontal, vertical (default), or absolute layout. Horizontal and vertical layout use the Flex automatic layout rules to lay out children horizontally or vertically. Absolute layout requires you to specify each child's x and y position relative to the panel contents area, or to use constraint-based layout styles to anchor one or more sides or the container horizontal or vertical center relative to the panel content area. For examples of using absolute and constraint-based layout in a container, see Creating and using a Canvas control. For detailed information on using these layout techniques, see Sizing and Positioning Components.

The following example shows a Panel container with a Form container as its child:

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

Creating a Panel layout container

You define a Panel container in MXML by using the <mx:Panel> tag. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

The following example defines a Panel container that contains a form as the top-level container in your application. In this example, the Panel container provides you with a mechanism for including a title bar, as in a standard GUI window.

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

    <mx:Panel id="myPanel" title="My Application">

        <mx:Form width="300">
            <mx:FormHeading label="Billing Information"/>
            <!-- Form contents goes here -->
        </mx:Form>

    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

Adding a ControlBar container to a Panel container

You can use the ControlBar container with a Panel container to hold components that can be shared by the other children in the Panel container. The RichTextEditor control, for example, consists of a Panel control with a TextArea control and a custom ControlBar for the text formatting controls. 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:

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\PanelCBar.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel title="My Application" 
        paddingTop="10" paddingBottom="10" 
        paddingLeft="10" paddingRight="10" 
        width="300">
    
        <mx:Script>
            <![CDATA[
                private function addToCart():void {
                    // Handle event.
                }
            ]]>
        </mx:Script>
    
        <mx:HBox width="100%">
            <!-- Area for your catalog. -->
        </mx:HBox>
        
        <mx:ControlBar width="100%">
            <mx:Label text="Quantity"/>
            <mx:NumericStepper id="myNS"/>
            <!-- 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:

For more information on the ControlBar container, see ControlBar layout container.

You can also add the ControlBar container dynamically to a Panel container, as the following example shows:

<?xml version="1.0"?>
<!-- containers\layouts\PanelCBarDynamicAdd.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[        
            import mx.containers.ControlBar;
            import mx.controls.*;
            import flash.events.MouseEvent;
            
            private var myCB:ControlBar=new ControlBar();
            private var myLabel:Label=new Label();
            private var myNS:NumericStepper=new NumericStepper();
            private var mySpacer:Spacer=new Spacer();
            private var myButton:Button=new Button();
        
            private var canAddChild:Boolean = true;
        
            private function addCBHandler():void {
                if (canAddChild) {
                    /* Create Controlbar control. */
                    myLabel.text="Quantity";
                    mySpacer.percentWidth=100;
                    myButton.label="Add to Cart";
                    myButton.addEventListener('click', addToCart);                
                    
                    myCB.percentWidth=100;
                    myCB.addChild(myLabel);
                    myCB.addChild(myNS);
                    myCB.addChild(mySpacer);
                    myCB.addChild(myButton);
                    
                    /* Add the ControlBar as the last child of the
                       Panel container. 
                       The ControlBar appears in the normal content area 
                       of the Panel container. */
                    myPanel.addChildAt(myCB, myPanel.numChildren);              
                    
                    /* Call createComponentsFromDescriptors() to make the
                       ControlBar appear in the bottom border area 
                       of the Panel container. The ControlBar must be the
                       last child in the Panel container. */
                    myPanel.createComponentsFromDescriptors();
    
                    /* Prevents more than one ControlBar control from being added. */
                    canAddChild = false;                
                }
            }

            private function addToCart(event:MouseEvent):void {
                Alert.show("ControlBar Button clicked.");
            }
        ]]>
    </mx:Script>
 
    <mx:Panel id="myPanel"
        title="My Application" 
        paddingTop="10" paddingBottom="10" 
        paddingLeft="10" paddingRight="10" 
        width="300">
    
        <mx:HBox width="100%">
            <!-- Area for your catalog. -->
        </mx:HBox>

        <mx:Button label="Add ControlBar" click="addCBHandler();"/>
        
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below: