Adobe® Flex® 3 Bible

Chapter 9. Using Layout Containers

As described in Chapter 8, there are two types of visual components in Flex:

• Containers are visual components that can contain other objects.

• Controls are visual components that display information or provide the application with user interaction capabilities.

The layout of a Flex application is determined through a combination of the applications containership hierarchy and the use of absolute layout tools. Applications are typically designed with a combination of vertical or horizontal flow-style containers that lay out their nested child components automatically and absolute layout components whose nested child components either set their positions with x and y or constraint properties.

The Flex framework includes two types of containers:

• Layout containers are rectangular regions that contain other visual components (containers or controls). Examples of layout containers include:

  • VBox

  • HBox

  • Canvas

  • Panel

  • Navigator containers wrap around other containers in a stack that contains the layers of the application's navigation system. The Flex framework includes three navigator containers:

  • ViewStack

  • TabNavigator

  • Accordion

In this chapter, I describe the pre-built layout containers in the Flex framework and how you use them to determine the application's visual appearance.

Note

To use the sample code for this chapter, import the chapter09 .zip Flex project archive file from the Web site files into your Flex Builder workspace.

Using Simple Box Containers

The three simple ...