The Spark Panel container

A Panel container includes a title bar, a title, 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 default layout class of the Panel container is BasicLayout. The following example shows a Panel container with a vertical layout:

For complete reference information, see the ActionScript 3.0 Reference for the Adobe Flash Platform.

Creating a Spark Panel container

You use the <s:Panel> tag to define a Panel container. 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" encoding="utf-8"?>
<!-- containers\spark\SparkPanelSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" > 

    <s:Panel id="myPanel" title="My Application" x="20" y="20">
        <s:Form id="myForm" width="400">

            <s:FormHeading label="Billing Information"/>

            <s:FormItem label="First Name">
                <s:TextInput id="fname" width="100%"/>
            </s:FormItem>

            <s:FormItem label="Last Name">
                <s:TextInput id="lname" width="100%"/>
            </s:FormItem>

            <s:FormItem label="Address">
                <s:TextInput id="addr1" width="100%"/>
                <s:TextInput id="addr2" width="100%"/>
            </s:FormItem> 

            <s:FormItem label="City">
                <s:TextInput id="city"/>
            </s:FormItem>
                
            <s:FormItem label="State">
                <s:TextInput id="state"/>
            </s:FormItem>
                
            <s:FormItem label="ZIP Code">
                <s:TextInput id="zip" width="100"/>
            </s:FormItem>

            <s:FormItem>
                <mx:HRule width="200" height="1"/>
                <s:Button label="Submit Form"/>
            </s:FormItem>
        </s:Form>
    </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

Adding a control bar to the Spark Panel container

A control bar contains a group of controls outside the main content area of a Spark Panel container. The control bar is always visible at the bottom of the Panel container. Therefore, if the Panel container uses scroll bars, the control bar is not scrolled along with the other container children.

Set the controlBarVisible property to true (the default value) to make the control bar visible. You use the Panel.controlBarContent property to define the controls that appear in the control bar area, as the following example shows:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkPanelCB.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    width="750">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
     
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <fx:XMLList id="menuXML">
            <fx:menuitem label="File">
                <fx:menuitem label="New" data="New"/>
                <fx:menuitem label="Open" data="Open"/>
                <fx:menuitem label="Save" data="Save"/>
                <fx:menuitem label="Exit" data="Exit"/>
            </fx:menuitem>
            <fx:menuitem label="Edit">
                <fx:menuitem label="Cut" data="Cut"/>
                <fx:menuitem label="Copy" data="Copy"/>
                <fx:menuitem label="Paste" data="Paste"/>
            </fx:menuitem>
            <fx:menuitem label="View"/>
        </fx:XMLList>
        
        <fx:Array id="cmbDP">
            <fx:String>Item 1</fx:String>
            <fx:String>Item 2</fx:String>
            <fx:String>Item 3</fx:String>
        </fx:Array>
    </fx:Declarations>

    <s:Panel title="Spark Panel">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:controlBarContent>
            <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>
        </s:controlBarContent>        

        <s:Button label="Button"/>
        <s:TextArea width="300" height="200"/>        
    </s:Panel>    
</s:Application>

The executing SWF file for the previous example is shown below:

By default, the controls in the control bar area use horizontal layout. Use the Panel.controlBarLayout property to specify a different layout, as the following example shows:

<s:controlBarLayout> 
    <s:HorizontalLayout paddingLeft="12" gap="5"/> 
</s:controlBarLayout>

The location and appearance of the control bar area of the Panel container is determined by the spark.skins.spark.PanelSkin class, the skin class for the Panel container. By default, the PanelSkin class defines the control bar area to appear at the bottom of the content area of the Panel container with a grey background. Create a custom skin to change the default appearance of the control bar.