O'Reilly logo

Learning Flex 4 by Elijah Robison, Alaric Cole

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Constraints-Based Layout

Another powerful approach to building your application, and one that works well when placing nested layout containers, is the constraints-based layout.

Constraints Explained

Think of constraints as an extension of the BasicLayout. This makes sense because a component’s parent must be set up for absolute positioning in order for constraints to work. Essentially, constraints anchor a component a set distance, in pixels, from a corresponding position within its parent container. The effect of this layout tactic is most pronounced by resizing, which causes the constrained component to move relative to its anchor points.

top, bottom, left, and right

The first four constraint properties correspond to the four edges of a rectangle: top, bottom, left, and right. For a quick example of how they’re used, look back at the color swatches code from earlier in the chapter; both the Button and the CheckBox were positioned using constraints.

There’s nothing mystical or deceptive about the constraint properties. It should be fairly obvious that right="5" and bottom="5" means “five pixels from the right, and five pixels from the bottom.”

To get a feel for the practical advantage offered by constraints, build the simple application in Example 9-25 and have some fun resizing your browser window (Figure 9-18).

Example 9-25. Using constraints to anchor components into the corners

<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx=" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required