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:
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
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.
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:
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.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.