The rectangular region of a container encloses its content area, the area that contains its child components. The size of the region around the content area is defined by the container margins and the width of the container border. A container has top, bottom, left, and right margins, each of which you can set to a pixel width. The border styles are none, inset (2 pixels wide), outset (2 pixels wide), and solid (1 pixel wide). The following figure shows a container and its content area, margins, and borders:
Although you can create an entire Flex application using a single container, typical applications use multiple containers. For example, the following figure shows an application that uses three layout containers:
In this example, the two VBox (vertical box) layout containers are nested within an HBox (horizontal box) layout container and are referred to as children of the HBox container.
The HBox layout container arranges its children in a single horizontal row and oversees the sizing and positioning characteristics of the VBox containers. For example, you can control the distance, or gap, between children in a container using the horizontalGap and verticalGap properties.
A VBox container arranges its children in a single vertical stack, or column, and oversees the layout of its own children. The following figure shows the same example, except that the outermost container has been changed to a VBox layout container:
In this example, since the outer container is a VBox layout container, it arranges its children in a vertical column.
The primary use of a layout container is to arrange its children, where the children are either controls or other containers. The following example shows a simple VBox container that has three child components:
In this example, a user enters a ZIP code into the TextInput control, and then clicks the Button control to see the current temperature for the specified ZIP code in the TextArea control.
Flex supports form-based applications through its Form layout container. In a Form container, Flex can automatically align labels, uniformly size TextInput controls, and display input error notifications. The following figure shows an example of a Flex Form container:
Form containers can take advantage of the Flex validation mechanism to detect input errors before the user submits the form. By detecting the error, and letting the user correct it before submitting the form to a server, you eliminate unnecessary server connections. The Flex validation mechanism does not preclude you from performing additional validation on the server. For more information on Form containers, see Form layout container.
Navigator containers, such as the TabNavigator and Accordion containers, have built-in navigation controls that let you organize information from multiple child containers in a way that makes it easy for a user to move through it. The following figure shows an example of an Accordion container:
You use the Accordion buttons to move among the different child containers.
Accordion containers support the creation of multistep procedures. The preceding figure shows an Accordion container that defines four panels of a complex form. To complete the form, the user enters data into all four panels. Accordion containers let users enter information in the first panel, click the Accordion button to move to the second panel, and then move back to the first if they want to edit the information. For more information, see Accordion navigator container.
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/00000282.htm