Professional Adobe® Flex® 3

Chapter 13. Layout Strategies

This chapter covers the many ways you can position Flex components. Once you have chosen the components you need, you have to place them on the page. Flex offers a variety of ways to do that, from using explicit coordinates to alignment relative to other components. Flex comes with a set of container components to help you lay out your application. Some containers help you align your components, whereas others let you position them as you see fit. Keeping in mind the nesting nature of Flex, you'll find that the container components (e.g., Canvas, VBox) can be placed inside of each other for more complex layouts.

Coordinate Positioning

The simplest way to position a component is to use (x,y) coordinates. All Flex components have x and y properties. The container determines if these properties will be honored, so you need to either use a Canvas container or set the layout property of Panel, Application, or TitleWindow to "absolute" when you want to use (x,y) positioning.

Here is an example of placing a TextInput and a Label, using their x and y properties:

<mx:Panel layout="absolute">
    <mx:Label text="Your Name:" x="10" y="25" />
    <mx:TextInput x="70" y="25" />
</mx:Panel>

Coordinate positioning is fine for a small number of components. It is also best done using Flex Builder's Design View because you can drag the components to position them. When the number of components increases, it becomes time-consuming to reposition them to change the layout. Flex has ...