Configuring containers

Like any Flex component, you configure containers using properties, methods, styles, behaviors, events, and skins. This section contains an overview of container configuration.

Using properties and methods to configure a container

Containers inherit the properties and methods of the MovieClip, UIObject, and UIComponent classes. Containers also inherit the properties and methods of the View and Container classes. For a complete description of the syntax, see Flex ActionScript and MXML API Reference. The following table describes the optional inherited properties:

Property Type Description
defaultButton

String

Specifies the id of the Button control to assign as the default button for the container. Pressing the Enter key while focus is on any form control activates the Button control just as if it was explicitly selected.

clipContent

Boolean

Specifies that the container clips its children at the container boundaries, which means that the container will not draw a child outside of itself.

The default value is true so that the container clips its children. Set it to false to disable clipping.

hLineScrollSize

Number

Specifies the number of pixels to move when the user selects the left or right arrow in a horizontal scroll bar, or uses the Left or Right Arrow key. The default value is 5.

hPageScrollSize

Number

Specifies the number of pixels to move when the user clicks the scroll bar track of a horizontal scroll bar, or uses the Page Up or Page Down key. The default value is 20.

hPosition

Number

Specifies the pixel position of the slider in the horizontal scroll bar, where a value of 0 corresponds to the left end of the scroll bar. The default value is 0.

hScrollPolicy

String

Specifies when to include a horizontal scroll bar:

  • on Causes the container to always include a horizontal scroll bar
  • off Always excludes the scroll bar
  • auto (default) Allows the container to include it only when the width of its contents is larger than the width of the container.
icon

File

Specifies the URL to an image file for an icon. Image types include JPEG, GIF, PNG, SVG image, and SWF file.

You use the following format with this property:

icon="@Embed('relOrAbsoluteURL')" 

The referenced image is packaged within the generated SWF file at compile-time when Flex creates the SWF file for your application.

Use this property with a container that is a child of a ViewStack container associated with a LinkBar or TabBar container, or with the children of a TabNavigator container. The icon appears in tab of the TabBar or TabNavigator, or in the link of the LinkBar corresponding to the container. The container scales the image to fit the tab size of a TabBar or TabNavigator container, or the link size of the LinkBar container.

label 

String

When this container is a child of a navigator container, specifies the text that appears in the navigation control of the navigator container. For example, it specifies the text that appears in the tab of a TabNavigator or TabBar container, or the text in the link of a LinkBar container.

numChildren

Number

A read-only property containing the number of container children.

vLineScrollSize

Number

Specifies the number of pixels to move when the user selects the up or down arrow in a vertical scroll bar, or presses the Up or Down Arrow key. The default value is 5.

vPageScrollSize

Number

Specifies the number of pixels to move when the user clicks the scroll bar track of a vertical scroll bar. The default value is 20.

vPosition

Number

Specifies the pixel position of the slider in a vertical scroll bar, where a value of 0 corresponds to the upper end of the scroll bar. The default value is 0.

vScrollPolicy

String

Specifies when to include a vertical scroll bar:

  • on Causes the container to always include a scroll bar.
  • off Always excludes the scroll bar.
  • auto (default) Allows the container to include it only when the height of its children is larger than the height of the container.

Using styles to configure a container

You use styles to set some container characteristics, such as margins and alignment. The list of styles available to each container includes those inherited from its parent and those defined for the container itself.

The following table describes some of the most common styles that you use with containers:

Style Type Defining class Description
backgroundAlpha

Number

View

Adjusts the alpha level of the SWF file or image defined by backgroundImage, or the color defined by the backgroundColor property inherited from UIComponent. Valid values range from 0 to 100. The default value is 100.

backgroundImage

URL

View

Specifies a URL to an external SWF file or JPEG, GIF, SVG, or PNG image file that appears in the background of the container. All children of the container appear on top of the image.

You can use two formats for the syntax with this property:

backgroundImage="@Embed('relOrAbsoluteURL')"

The referenced image is packaged within the generated SWF file at compile-time when Flex creates the SWF file for your application.

This form supports the import of GIF, PNG, JPEG, and SVG images, and SWF files.

backgroundImage="relOrAbsoluteURL"

Flex loads the referenced image file at runtime; it is not packaged as part of the generated SWF file.

This form only supports the import of JPEG images and SWF files.

backgroundSize

String

View

Scales the image specified by backgroundImage to different percentage sizes. By default, the value is auto, which maintains the original size of the image.

A value of 100% stretches the image to fit the entire screen. You must include the percent sign with the value.

borderStyle

String

UIObject

Specifies the border style of the container. Possible values are solid, none, inset, and outset. The default value is none.

marginLeft

Number

UIObject

Specifies the number of pixels between the container's left border and its content area.

marginRight

Number

UIObject

Specifies the number of pixels between the container's right border and its content area.

marginTop

Number

Individual container

Specifies the number of pixels between the container's top border and its content area.

marginBottom

Number

Individual container

Specifies the number of pixels between the container's bottom border and its content area.

horizontalAlign

Number

Individual container

Specifies the horizontal alignment of children. Possible values are left, center, and right. The default value is left.

verticalAlign

Number

Individual container

Specifies the vertical alignment of children. Possible values are top, middle, and bottom. The default value is top.

horizontalGap

Number

Individual container

Specifies the number of pixels between children in the horizontal direction.

verticalGap

Number

Individual container

Specifies the number of pixels between children in the vertical direction.

For more information on styles, see Using Styles and Fonts.

Handling container events

All containers inherit the events defined by the UIObject and UIComponent classes. For more information on these classes, see Using Flex Components.

In addition, they also inherit events from the View and Container classes. The following table describes the events inherited from the View and Container classes:

Event Description
childCreated

Broadcast after a child has been created in a container. If a container has three children, it broadcasts three childCreated events, one after each child is created, and then broadcasts a childrenCreated event after all children have been created.

The relatedNode property of the event object contains a copy of the created child object.

childDestroyed

Broadcast before a child of a container is destroyed.

The relatedNode property of the event object contains a copy of the destroyed child object.

childIndexChanged

Broadcast after a container child's index has changed.

The event object contains the following properties:

  • relatedNode A copy of the moved child object.
  • prevValue The child's old index.
  • newValue The child's new index.
childrenCreated

Broadcast after a container creates all of its children. This event lets you perform one-time initialization of a container's children, just after they get created.

This event is useful with a container that is an immediate child of a navigator container, such as the ViewStack, TabNavigator, and Accordion navigator containers.

For example, a ViewStack container creates all its immediate child containers, and all the children of its first visible child container. For the first visible child container, childrenCreated gets broadcast. Then, as the user moves to each additional child of the ViewStack, the event gets dispatched for that container.

The event object contains the following properties:

  • type A string set to childrenCreated.
  • target A reference to the child.
scroll

Broadcast when the container is scrolled.

The event object contains the following properties:

  • type A string set to scroll.
  • direction The string vertical or horizontal, depending on the scroll direction.
  • position The new position of the scroll bar.
  • delta The number of pixels the scroll bar moved.

Using behaviors with containers

The behaviors available for use with a container are those inherited by all components from the UIObject and UIComponent classes. For more information on behaviors, see Using Behaviors.

Using skins

The skins available for use with a container are described with the documentation of the individual containers.


Version 1.5

 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000307.htm