Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Sizing and Positioning Components > Using constraint-based layout

Using constraint-based layout

You can manage child component size and position simultaneously by using constraint-based layout, where you anchor the sides or center of a component to positions relative to the viewable region of the component's container. The viewable region is the part of the component that is being displayed, and it can contain child controls, text, images, or other contents.

You can use constraint-based layout to determine the position and size of the immediate children of any container that supports absolute positioning.

With constraint-based layout you can do the following:

• Anchor one or more edges of a component at a pixel offset from the corresponding edge of its container's viewable region. The anchored child edge stays at the same distance from the parent edge when the container resizes. If you anchor both edges in a dimension, such as top and bottom, the component resizes if the container resizes.
• Anchor the child's horizontal or vertical center (or both) at a pixel offset from the center of the container's viewable region. The child does not resize in the specified dimension unless you also use percentage-based sizing.

Subtopics

Creating a constraint-based layout

The following rules specify how to position and size components by using constraint-based layout:

• Place the component directly inside a Canvas container, or directly inside an Application or Panel container with the layout property set to absolute.
• You can specify a constraint-based layout for any Flex framework component (that is, any component that extends the UIComponent class).
• Specify the constraints by using the top, bottom, left, right, horizontalCenter, or verticalCenter styles.

  The top, bottom, left, and right styles specify the distances between the component sides and the corresponding container sides.

  The horizontalCenter and verticalCenter styles specify distance between the component's center point and the container's center, in the specified direction; a negative number moves the component left or up from the center.

  The following example anchors the Form control's left and right sides 20 pixels from its container's sides:

  <mx:Form id="myForm" left="20" right="20"/>
  

• Do not specify a top or bottom style with a verticalCenter style; the verticalCenter value overrides the other properties. Similarly, do not specify a left or right style with a horizontalCenter style.
• A size determined by constraint-based layout overrides any explicit or percentage-based size specifications. If you specify left and right constraints, for example, the resulting constraint-based width overrides any width set by a width or percentWidth property.

Example: Using constraint-based layout for a form

The following example code shows how you can use constraint-based layout for a form. In this example, the Form control uses a constraint-based layout to position its top just inside the canvas padding. The form left and right edges are 20 pixels from the Canvas container's left and right edges. The HBox that contains the buttons uses a constraint-based layout to place itself 20 pixels from the Canvas right edge and 10 pixels from the Canvas bottom edge.

If you change the size of your browser or standalone Flash Player, you can see the effects of dynamically resizing the Application container on the Form layout. The form and the buttons overlap as the application grows smaller, for example. In an application, you should include the buttons in the last FormItem of the form, the buttons are separate in the following example to better show the effects of resizing.

<?xml version="1.0"?>
<!-- components\ConstraintLayout.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Use a Canvas container in the Application to prevent 
        unnecessary scroll bars on the Application. -->
    <mx:Canvas width="100%" height="100%">

         <!-- Anchor the top of the form at the top of the canvas.
            Anchor the form sides 20 pixels from the canvas sides. -->
        <mx:Form id="myForm" 
                backgroundColor="#DDDDDD"
                top="0" 
                left="20" 
                right="20">
                
            <mx:FormItem label="Product:" width="100%">
                <!-- Specify a fixed width to keep the ComboBox control from 
                    resizing as you change the application size. -->
                <mx:ComboBox width="200"/>
            </mx:FormItem>

            <mx:FormItem label="User" width="100%">
                <mx:ComboBox width="200"/>
            </mx:FormItem>

            <mx:FormItem label="Date">
                <mx:DateField/>
            </mx:FormItem>

            <mx:FormItem width="100%" 
                    direction="horizontal" 
                    label="Hours:">
                <mx:TextInput width="75"/>
                <mx:Label text="Minutes" width="48"/>
                <mx:TextInput width="75"/>
            </mx:FormItem>
        </mx:Form>

        <!-- Anchor the box with the buttons 20 pixels from the canvas
            right edge and 10 pixels from the bottom. -->
        <mx:HBox id="okCancelBox" 
                right="20" 
                bottom="10">
            <mx:Button label="OK"/>
            <mx:Button label="Cancel"/>
        </mx:HBox>
    </mx:Canvas>
</mx:Application>

Flex 2.01

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/201/html/size_position_058_11.html

Add Comment