| All layout in Flex is done using containers. In the last lesson, you created three applications; each had an <mx:Application> tag, which is in fact a container. Each container has a set of rules, which determines how any child tags will be laid out. The following table shows commonly used containers and the rules they use to lay out their children. Container | Rule |
|---|
VBox | Children are laid out vertically; each child is drawn lower on the screen than the previous child. | HBox | Children are laid out horizontally; each child is drawn to the right of the previous child. | Canvas | Children are drawn at the x and y coordinates specified by the developer. If not specified, all children are drawn in the top-left corner of the container. For example, if you add a Button control to a Canvas layout container, and do not specify x and y coordinates, the button is rendered in the top left of the canvas at the default 0,0 position. | Application | Can be set to behave as a VBox, HBox, or Canvas layout container through the use of the layout attribute. | Tile | Lays out its children in one or more vertical columns or horizontal rows, starting new rows or columns as necessary. All Tile container cells have the same size. Flex arranges the cells of a Tile container in a square grid, in which each cell holds a single child. The direction property is used to determine the layout. | Panel | A subclass of the Box container, a Panel container can act as either an HBox, VBox, or a Canvas container, depending on the layout attribute specified (you use layout="absolute" to have it behave as a Canvas container, which is the default). In addition to containing its children, the Panel also provides a Title bar area, which can contain a title for the Panel container and a status message. | ControlBar | The ControlBar container is used to dock a toolbar to the bottom of a Panel container or TitleWindow container. The ControlBar container can act as either an HBox container or a VBox container, depending on the direction attribute specified (Horizontal is the default). | ApplicationControlBar | Can act as either an HBox container or a VBox container, depending on the direction attribute specified (Horizontal is the default). The ApplicationControlBar layout container is used to hold components that provide access to elements used throughout an application. If specified as the first child of an <mx:Application> tag, and if the dock attribute is set to true, the ApplicationControlBar container docks at the top of the application's drawing area, extends the full width of the application, and does not scroll with the application. |
|
