Using containers
Requirements
User level
All
Required products
- Flex (Download trial)
A container defines a rectangular region of the drawing surface of the Adobe Flash Player. Within a container, you define the components, both controls and containers, that you want to appear within the container. Components defined within a container are called children of the container. Adobe Flex provides a wide variety of containers, ranging from simple boxes through panels and forms, to elements such as accordions or tabbed navigators that provide built-in navigation among child containers.
The Spark namespace provides the following containers: Application, Panel, BorderContainer, Group, and others. You can choose a layout algorithm with Spark containers, as shown in the QuickStart examples. Spark containers contain a controlBarContent property that you can use to define a control bar and its contents for the container.
The MX namespace provides the following containers: Canvas, HBox, VBox, HDividedBox, and others. The layout algorithm of MX containers is fixed, and cannot be changed.
At the root of a Flex application is a single container, the <s:Application> container, that represents the entire Flash Player drawing surface. This Application container holds all other containers and components.
Tip: Many MX containers have equivalent containers in Spark. Adobe recommends that you use Spark containers when available. For more information, see Introduction to containers in the Adobe Flex 4 Help.
This article covers:
Using layout containers
You use layout containers for laying out a user interface. The following table describes the layout containers that the following example uses:
| Name | Description | |
|---|---|---|
 |
|
The Panel container displays a title bar, a caption, a border, and its children. |
|
|
The BorderContainer container provides a set of CSS styles and class properties to control the border and background of the container. |
|
|
You can customize the appearance of a SkinnableContainer container using skins. |
|
|
Use the Group container when you want to manage visual and graphical components. |
 |
|
The HDividedBox container lays out the child components horizontally, much like a HBox container, except that it inserts an adjustable divider between the children. The VDividedBox container lays out the child components vertically, and also inserts an adjustable divider between the children. |
 |
|
The Tile container arranges its children in multiple rows or columns. |
 |
|
The Form container arranges its children in a standard form format. |
Additionally, the example uses the Spacer control, which is not a container, to aid in the layout of the interface.
Tip: The Spacer control is an invisible control that is used for precise positioning of elements inside automatically positioned containers. In this example, the Spacer control is the percentage-based component in the Application control bar. Flex sizes the Spacer control to occupy all available space that is not required for other components.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- Layoutcontainers.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="525" height="400">
<s:layout>
<s:VerticalLayout
paddingBottom="10" paddingLeft="10"
paddingRight="10" paddingTop="10"
horizontalAlign="center"/>
</s:layout>
<s:controlBarContent>
<s:Label text="ApplicationControlBar" fontFamily="Verdana"
fontWeight="bold" fontSize="12"/>
<mx:Spacer width="100%"/>
<s:Button label="Log out"/>
</s:controlBarContent>
<s:Panel title="Panel" width="90%" height="90%">
<s:layout>
<s:HorizontalLayout paddingBottom="10" paddingLeft="10"
paddingRight="10" paddingTop="10"/>
</s:layout>
<s:controlBarContent>
<s:Label text="ControlBar in Panel" fontWeight="bold"/>
<mx:Spacer width="100%"/>
<s:Button label="Previous"/>
<s:Button label="Finish"/>
</s:controlBarContent>
<mx:HDividedBox width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderStyle="solid" >
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5"
clipAndEnableScrolling="true"/>
</s:layout>
<s:Label text="BorderContainer" fontWeight="bold"/>
<mx:Form>
<mx:FormHeading label="First form" />
<mx:FormItem label="Name">
<s:TextInput width="100%" />
</mx:FormItem>
</mx:Form>
</s:BorderContainer>
<s:BorderContainer width="100%" height="100%" borderStyle="solid">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5"
clipAndEnableScrolling="true"/>
</s:layout>
<s:Label text="BorderContainer" fontWeight="bold"/>
<mx:Form>
<mx:FormHeading label="Second form" />
<mx:FormItem label="Name">
<s:TextInput width="100%" />
</mx:FormItem>
<mx:FormItem label="Email">
<s:TextInput width="100%" />
</mx:FormItem>
</mx:Form>
</s:BorderContainer>
</mx:HDividedBox>
</s:Panel>
</s:Application>
Result
Using navigation containers
Navigator containers control user movement, or navigation, among multiple children where the children are other containers.
The direct children of a navigator container must be containers, either layout or navigator containers. You cannot directly nest a control within a navigator; controls must be children of a child container of the navigator container.
The following examples uses a <s:ButtonBar>, <mx:LinkBar>, and <s:TabBar> to change the content of the ViewStack navigator container
The following table describes the navigator containers that the following example uses:
| Name | Description | |
|---|---|---|
 |
|
The Accordion container defines a sequence of child panels, but displays only one panel at a time. To navigate a container, the user clicks the navigation button that corresponds to the child panel that they want to access. Accordion containers let users access the child panels in any order to move back and forth through the form. |
 |
|
A TabNavigator container creates and manages a set of tabs, which you use to navigate among its children. The children of a TabNavigator container are other containers. The TabNavigator container creates one tab for each child. When the user selects a tab, the TabNavigator container displays the associated child. |
 |
|
A ViewStack navigator container is made up of a collection of child containers that are stacked on top of each other, with only one container visible, or active, at a time. The ViewStack container does not define a built-in mechanism for users to switch the currently active container; you must use a LinkBar, TabBar, ButtonBar, or ToggleButtonBar control or build the logic yourself in ActionScript to let users change the currently active child. |
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- NavigationContainers.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="550" height="550"><s:Panel left="10" top="10" right="10" bottom="10" title="Navigators">
<mx:Accordion width="47.5%" height="200" top="36" left="10">
<mx:Canvas label="Navigation button 1" width="100%" height="100%">
<s:Label x="10" y="10" text="Contents 1"/>
</mx:Canvas>
<mx:Canvas label="Navigation button 2" width="100%" height="100%">
<s:Label x="10" y="10" text="Contents 2"/>
</mx:Canvas>
<mx:Canvas label="Navigation button 3" width="100%" height="100%">
<s:Label x="10" y="10" text="Contents 3"/>
</mx:Canvas>
</mx:Accordion>
<mx:TabNavigator right="10" width="47.5%" height="200" y="36">
<mx:Canvas label="Tab 1" width="100%" height="100%">
<s:Label x="10" y="10" text="Contents 1"/>
</mx:Canvas>
<mx:Canvas label="Tab 2" width="100%" height="100%">
<s:Label x="10" y="10" text="Contents 2"/>
</mx:Canvas>
<mx:Canvas label="Tab 3" width="100%" height="100%">
<s:Label x="10" y="10" text="Contents 3"/>
</mx:Canvas>
</mx:TabNavigator>
<mx:ViewStack
id="myViewStack"
width="47.5%" height="200" right="10" bottom="10"
borderColor="#000000" borderStyle="solid">
<mx:Canvas label="View 1" width="100%" height="100%">
<s:Label x="10" y="10" text="Contents 1"/>
</mx:Canvas>
<mx:Canvas label="View 2" width="100%" height="100%">
<s:Label x="10" y="10" text="Contents 2"/>
</mx:Canvas>
<mx:Canvas label="View 3" width="100%" height="100%">
<s:Label x="10" y="10" text="Contents 3"/>
</mx:Canvas>
</mx:ViewStack>
<!-- Labels for the various controls -->
<s:Label x="10" y="275" text="ButtonBar"/>
<s:Label x="10" y="10" text="Accordion"/>
<s:Label x="263" y="10" text="TabNavigator"/>
<s:Label x="276" y="270" text="ViewStack"/>
<s:Label x="10" y="337" text="LinkBar"/>
<s:Label x="10" y="406" text="TabBar"/>
<!--
All these navigators use the same dataProvider,
namely, the myViewStack ViewStack instance.
Changing the selected view in one will affect
all the others also.
-->
<s:ButtonBar x="10" y="291" dataProvider="{myViewStack}" />
<mx:LinkBar x="10" y="353" dataProvider="{myViewStack}" />
<mx:TabBar x="10" y="422" dataProvider="{myViewStack}" />
</s:Panel>
</s:Application>
Result
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
