ASDoc

A Panel container consists of a title bar, a caption, a border, and a content area for its children. Typically, you use Panel containers to wrap top-level application modules. For example, you could include a shopping cart in a Panel container.

The <mx:Panel> container inherits all the properties of its parent classes, and the following properties:

deletePopUp

getViewMetrics

Returns
Object with left, right, top, and bottom properties containing the edge thickness, in pixels.

measure

The measure() method first calls VBox.measure() method, then makes sure the _measuredPreferredWidth and _measuredMinWidth are wide enough to display the title and the ControlBar.

className

status

statusStyleDeclaration

title

titleStyleDeclaration

version

Comments

mr_dan said on Jul 6, 2006 at 2:40 PM :

The footerColors and headerColors styles do not seem to support CSS: "CSS Value for header-colors not supported." (v1.5)

Also, the documentation should indicate the default color values either: a.) not using parenthesis (so that the user can properly deduce how to construct an array of these values.)
or
b.) use square-brackets (array syntax) to indicate the default value and/or indicate usage e.g.
ex: headerColors="[0xE1E5EB, 0xF4F5F7]"

Dan

smgilson said on Jul 7, 2006 at 6:19 AM :

I tried this code and it does work to set footerColors and headerColors.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF">

<mx:Style>
Panel {
footerColors: #EAEAEA, #FF22CC;
headerColors: #EAEAEA, #FF22CC;
}
</mx:Style>

<mx:Script>
<![CDATA[

function showProperties()
{
panelPropertyArea.text= "Status: " + panel.status + '\n' +
"Title: " + panel.title + '\n' +
"Width: " + panel.width + '\n' +
"Height: " + panel.height ;
}
]]>
</mx:Script>

<mx:Panel title="Simple Panel" status="Active" id="panel" height="250" width="400">

<mx:TextArea id="panelPropertyArea" text="click button to see panel properties" width="380" height="120"/>
<mx:Button label="click to view panel properties" click="showProperties();"/>

<mx:ControlBar/>
</mx:Panel>
</mx:Application>

You can find more information about setting styles here:

http://livedocs.macromedia.com/flex/15/flex_docs_en/00000533.htm

Stephen Gilson
Flex Doc Team

mr_dan said on Jul 10, 2006 at 11:34 AM :

I see what you mean. The misleading part for me was Flex Builder's context-sensitive code hints. When inside an <mx:Style> block, pressing the open-curly-brace brings up the hint list. The entries "header-color", and "header-colors" are in the list, but not "headerColors". It's the former two values that do not properly compile.

Dan

Current page: http://livedocs.adobe.com/flex/15/asdocs_en/mx/containers/Panel.html

Methods
	`deletePopUp` Closes a pop-up Panel container.
	`getViewMetrics( ) : Object` Returns the thickness of the edges of the object, including the border, title bar and scroll bars, if visible.
	`measure( ) : Void` Calculates the preferred, mininum and maximum sizes of the Panel container.

Properties
	`className: String`Name of this class.
	`status: String` Text in the status area of the title bar.
	`statusStyleDeclaration: String` Style declaration name for the status in the title bar.
	`title: String` Title or caption displayed in the title bar.
	`titleStyleDeclaration: String` Style declaration name for the text in the title bar.
`static`	`version: String`Version string for this class.

Effects
`resizeEndEffect`	Delivered after the Resize effect finishes playing. The default value is `"Dissolve"`. To disable the Dissolve effect so that the children are hidden instantaneously, you must explicitly set the value of the `resizeEndEffect` trigger to `"none"`.
`resizeStartEffect`	Delivered before the Resize effect begins playing. The default value is `"Dissolve"`. To disable the Dissolve effect so that the children are hidden instantaneously, you must explicitly set the value of the `resizeStartEffect` trigger to `"none"`.

Events
`click`	Broadcast when the user selects the close button. The event object's `target` property contains a reference to the component that triggered the event. The event object's `type` property contains the name of the event.
`mouseDownOutside`	Broadcast when the user clicks outside the panel. The event object's `target` property contains a reference to the component that triggered the event. The event object's `type` property contains the name of the event.

Styles
`cornerRadius`	`Type: Number CSS Inheritance: no`Radius of corners of the window frame. The default value is 8.
`dropShadow`	`Type: Boolean CSS Inheritance: no`Boolean property that controls the visibility of the Panel's drop shadow. The default value is `true` to draw the drop shadow.
`footerColors`	`Type: Array CSS Inheritance: yes`Array of two colors used to draw the footer (area for the ControlBar container) background. The first color is the top color. The second color is the bottom color. The default values are (0xF4F5F7, 0xE1E5EB).
`headerColors`	`Type: Array CSS Inheritance: yes`Array of two colors used to draw the header. The first color is the top color. The second color is the bottom color. The default values are (0xE1E5EB, 0xF4F5F7).
`headerHeight`	`Type: Number CSS Inheritance: no`Height of the header. The default value is 28.
`panelBorderStyle`	`CSS Inheritance: no`Border style for the bottom two corners of the container. The top two corners are always round. Possible values are `default`, which configures the container to have square corners, and `roundCorners`, which defines rounded corners. To configure the top corners to be square, set `cornerRadius` to 0. The default value is `default`.
`shadowDirection`	`CSS Inheritance: no`Direction of drop shadow. Possible values are "left", "center" and "right". The default value is "center".
`shadowDistance`	`Type: Number CSS Inheritance: no`Distance of drop shadow. Negative values move shadow above the panel. The default value is 2.

mx.containers Class Panel