To lay out a Flex user interface, you insert and position components in a container that has absolute positioning, and then define layout constraints for the components so they adjust automatically when a user resizes the application window. In Flex Builder you can define layout constraints in the design area or add or modify values in the Flex Properties view.

About constraint-based layouts

Flex supports constraint-based layouts. There are several approaches to layout: absolute positioning, nested H/VBox layouts, simple constraints, and advanced row/column constraints. The two scenarios outlined in the bullet points are best handled either by nested H/VBoxes or by advanced constraints.

In some situations, you could use nested H/VBoxes or advanced constraints (advanced constraints can only be edited in Source mode):

• When controls might be dynamically sized to fit their content--as in the case of localized strings, for example--and the controls need to push each other out of the way so they don't overlap.
• When you want multiple columns that are the same size or that need to remain a specific percentage width.

To create a constraint-based layout, you must use a container that has absolute positioning. The layout="absolute" property overrides the container's layout rule and lets you drag and position components anywhere in the container. This property can be used only with the Application, Canvas, and Panel containers. For Canvas containers, layout="absolute" is the default; for Application and Panel containers, you must set this property explicitly.

Absolute positioning gives you the ability to set layout constraints. For example, if you want a TextInput control to stretch when you make the application window wider, you can anchor the control to the left and right edges of the container so the width of the TextInput control is set by the width of the container.

When you create an MXML application file in Flex Builder, a layout="absolute" property is automatically included in the <mx:Application> tag.

In the following example, all the controls are absolutely positioned in a container either by dragging them or by setting the x and y coordinates in the Flex Properties view:

Also, a number of layout constraints are applied to the controls to ensure that the layout adjusts correctly when the user resizes the application:

• Label A, Label B, and Label C are anchored to the left and upper edges so the labels remain in place as the user resizes the layout.
• TextInput A and TextInput B are anchored to the left and right edges so the controls stretch or compress horizontally as the user resizes the layout.
• TextArea C is anchored to the left and right edges and to the upper and lower edges so that the control stretches or compresses horizontally and vertically as the user resizes the layout.
• The Button control is anchored to the right and lower edges so that the control maintains its position relative to the lower-right corner of the container as the user resizes the layout.

The following image shows how the constraints make the controls behave when the user resizes the layout:

The TextInput A and TextInput B controls stretch horizontally as the layout is enlarged. TextArea C control stretches horizontally and vertically. The Button control moves down and to the right.

For more information, see Using Layout Containers in the Adobe Flex 3 Developer Guide.

Row and column constraints

You may also define a grid of horizontal and vertical constraint regions, ConstraintColumn regions and ConstraintRow regions. Components can be constrained to the edges or centers of these regions similarly to being constrained to the edges or centers of their parent containers. Constraint columns are laid out in the container from left to right, and constraint rows are laid out from top to bottom.

Constraint regions can be defined with fixed pixel dimensions (width or height) or as a percentage of the space in the parent container. The set of constraint columns and rows may have any combination of fixed or percentage dimensions.

Components within a parent container may be constrained to the container or to constraint regions or to any combination of container and region constraints.

For more information about row and column constraints, see the Adobe Flex 3 Developer Guide.

Inserting and positioning components in the layout

The first step in creating a constraint-based layout is to insert and position components in a container that has absolute positioning.

1. Ensure that the open MXML file includes a container that has absolute positioning.
2. In the MXML editor's Design mode, drag a component from the Components view into the container.

   The component is inserted into your layout.

3. Position the component in the container either by moving it in the design area or by setting its x and y properties in the Flex Properties view (Window > Flex Properties).
4. Set layout constraints for the component.

Setting layout constraints for components

You use the Flex Properties view to set layout constraints relative to the edges of the parent container. Layout constraints relative to constraint columns and rows can only be set by editing the source code.

1. In the MXML editor's Design mode, select the component positioned in the container that has absolute positioning.
2. Use the Flex Properties view to specify constraints. You can expand the Layout category in this view. (You may need to scroll down to see the constraints tool.)

   If you see a list of properties instead of a form, click the Standard View button in the toolbar.

3. Using the following table as a guide, select the constraint check boxes to achieve the effect you want when the user resizes the application:

   Effect	Constraints
   Maintain the component's position and size	None
   Move the component horizontally	Left or Right
   Move the component vertically	Top or Bottom
   Move the component both horizontally and vertically	Left + Top or Right + Bottom
   Resize the component horizontally	Left + Right
   Resize the component vertically	Top + Bottom
   Resize the component both horizontally and vertically	Left + Right and Top + Bottom
   Center the component horizontally	Horizontal center
   Center the component vertically	Vertical center
   Center the component both horizontally and vertically	Vertical center + Horizontal center

4. Specify the distance of the constraints from the edges of the container.

   For example, you can set the component to maintain its position 90 pixels from the left edge and 60 pixels from the right edge. If the user resizes the application, the component stretches or compresses to maintain these distances from the edges of the application window. Flex Builder expresses these constraints in the MXML code as follows, assuming you set a y property of 160:

   <mx:TextInput y="160" left="90" right="60"/>
   
   

5. To set a component's column and row constraints with respect to a particular constraint region, prefix the pixel offset values with the ID of the appropriate ConstraintColumn or ConstraintRow.