Programming Flex 2

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 produce 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 used by containers. We will also cover how to work with containers and children, nesting containers, and building 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 added to the container as container 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>

Tip

If you are using Flex Builder, the default MXML template sets the layout property of the root Application instance to absolute. The layout property of the Application container ...