Programming Flex 3

Chapter 6. Managing Layout

One of the key features of Flex is its ability to simplify application layout. Traditional application development requires writing layout code, or working with layout components in a nonintuitive manner. With MXML and Flex’s layout containers, you can lay out most applications without having to write a single line of custom layout code.

In this chapter, we will provide an overview of Flex layout containers and discuss the layout rules they use. We will also cover how to work with containers and children, how to nest containers, and how to build fluid interfaces.

Flex Layout Overview

Container components are the basis of how Flex provides layout logic. At the most basic level, the Application class is a container, and subitems within the Application class (tag) are called children. In MXML, placing nodes within a container declaration signifies that the objects are instantiated and are added to the container as children, and the container automatically handles their positioning and sizing.

For example, in the following code two children are added to the Application container—a TextInput instance and a Button instance:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:TextInput/>
    <mx:Button label="Submit"/>
</mx:Application>

Note

If you are using Flex Builder, the default MXML template sets the layout property of the root Application instance to absolute; when not specified, the default value vertical is used. ...