Using constraint-based layouts

Use constraints on a component to automatically adjust the component’s size and position in the container when a user resizes the application window.

You typically define layout constraints in Design mode of the MXML editor. You can also edit a component’s properties in Source mode to define layout constraints.

    About constraint-based layouts

    Flex supports constraint-based layouts. Constraint-based layouts are available in containers that support absolute positioning. For Spark containers, the default layout, BasicLayout, supports absolute positioning.

    When using constraint-based layouts, you anchor one or more sides of a component to the edges of a container or a container’s constraint region. You can also specify an offset for the component w/respect to the anchor. When a user resizes the container, the size and position of the container components are determined by the defined anchor points.

    Constraint-based layout example

    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 Properties view. The arrows in the figure indicate how constraints, specified according to the following bulleted list, make the controls behave when the user resizes the layout.

    View full size graphic

    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 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.

    Constraint-based layouts and absolute positioning

    To create a constraint-based layout, use a container that supports absolute positioning. For Spark containers, set the layout property to BasicLayout. If you do not specify a layout property for a Spark container, the default property is BasicLayout.

    For MX containers, the absolute layouts can be used only with the Application, Canvas, and Panel containers. For the Canvas container, absolute layouts are the default. For MX Application and Panel containers, set the layout property to absolute to implement absolute positioning.

    For MX containers, the layout="absolute" property overrides the container’s layout rule and lets you drag and position components anywhere in the container.

    Using advanced constraint layouts

    You can also define constraints that anchor to horizontal and vertical constraint regions. Advanced constraints are useful in the following situations:

    • When controls dynamically resize to fit their content. For examples, controls that display localized strings.

    • When you want multiple columns that are the same size or that need to remain a specific percentage width.

    Note: You can use nested HGroup and VGroup containers to achieve results similar to advanced constraints.

    For advanced constraint layouts, define ConstraintColumn regions and ConstraintRow regions. Constrain components to the edges or centers of these regions. Constraint columns are laid out in the container from left to right while 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 are constrained to the container, to constraint regions, or to any combination of container and region constraints.

    Use the MXML editor in Source mode to specify advanced constraints.

    Setting layout constraints for components

    You can specify a constraint-based layout for components in a container that has absolute positioning.

    Note: Layout constraints relative to constraint columns and rows can only be set by editing the source code.

    1. Ensure that the open MXML file includes a container that has absolute positioning.

    2. In the MXML editor’s Design mode, drag components from the Components view into the container.

    3. Position the component in the container either by moving it in the design area or by setting the x and y properties in the Properties View (Window > Properties).

    4. Select a component in the design area.

    5. In Properties View, scroll to the constraint tool in the Layout category.

    6. 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 horizontally or vertically

      Left and Top or

      Right + Bottom

      Resize the component horizontally

      Left and Right

      Resize the component vertically

      Top and Bottom

      Resize the component both horizontally and vertically

      Left and Right and

      Top and Bottom

      Center the component horizontally

      Horizontal center

      Center the component vertically

      Vertical center

      Center the component both horizontally and vertically

      Vertical center and Horizontal center

    7. 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.

      Flash Builder expresses these constraints in the MXML code as follows:

      <s:TextInput y="160" left="90" right="60"/>
      Note: The value of y is modified according to the values you specify for the left and right constraints.