1. Home
2. Developer Connection
3. Flex Developer Center
4. Quick Starts

Flex Quick Start: Getting started

Table of contents

• Coding with MXML and ActionScript
• Creating your first application
• Handling events
• Positioning and laying out Flex components
• Embedding application assets

Positioning and laying out Flex components

Most Flex containers use a predefined set of rules to automatically position all child components that you define within them. If you use a Canvas container, or an Application or Panel container with the layout property set to "absolute", you can specify absolute positions for its children, or use constraint-based layout.

There are three ways to position your components in a Flex application:

• Using automatic positioning
• Using absolute positioning
• Using constraint-based layout

The Design View of Flex Builder 3 provides visual layout controls to help position your Flex components.

Using automatic positioning

For most containers, Flex automatically positions the container children according to the container’s layout rules, such as the layout direction, the container padding, and the gaps between children of that container.

For containers that use automatic positioning, setting the x or y property of their child components directly or calling the move() method has no effect, or only a temporary effect, because the layout calculations set the positions of the components to a calculated result, not the specified value.

You can control aspects of the layout by specifying container properties. The following properties are the most common ones:

• layout: Possible values are "horizontal", "vertical", or "absolute". When set to "horizontal", the container will lay out its children in a row. When set to "vertical", the container will lay out its children in a column. For information about the "absolute" setting, see the sections on absolute positioning and constraint-based layout.
• horizontalAlign: Possible values are "left", "center", or "right".
• verticalAlign: Possible values are "top", "middle", or "bottom".

This example overrides the default settings of "left" for the horizontalAlign property and of "top" for the verticalAlign property of the Application container to specify "center" and "middle", respectively.

This example also overrides the default setting of "vertical" for the layout property of the Panel container so that the Label and Button controls are displayed horizontally. The padding properties of the Panel container define the margin area of the container, in pixels.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutAutomatic/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="380" height="150"

>
    <mx:Panel 
        title="My Application" 
        paddingTop="10" paddingBottom="10" 
        paddingLeft="10" paddingRight="10" 
        layout="horizontal" verticalAlign="middle"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button 
            id="myButton" label="Click Me!" 
            click="myLabel.text = 'Hello, World!';" 
        />

    </mx:Panel>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Using absolute positioning

Three containers support absolute positioning:

• Application and Panel controls use absolute positioning if you specify the layout property as "absolute".
• The Canvas container always uses absolute positioning.

With absolute positioning, you specify the position of the child control by using its x and y properties, or you specify a constraint-based layout; otherwise, Flex places the child at position 0,0 of the parent container. When you specify the x and y coordinates, Flex repositions the controls only when you change the property values.

This example sets the layout property of the Panel container to "absolute". Then, it sets the x and y properties for both the Label and Button controls so that the two controls overlap.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutAbsolute/index.html"
    horizontalAlign="center" verticalAlign="middle"
    width="280" height="170"

>
    <mx:Panel 
        title="My Application" layout="absolute"
        width="220" height="90" 
    >
        <mx:Label 
            id="myLabel" 
            x="10" y="10" width="180" 
            fontWeight="bold" fontSize="24"
        />

        <mx:Button 
            id="myButton" 
            x="60" y="10" 
            label="Click Me!" 
            click="myLabel.text = &apos;Hello, World!&apos;;" 
        />

    </mx:Panel>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

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 component’s container.

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

You specify the constraints by using the top, bottom, left, right, horizontalCenter, or verticalCenter style properties of the child component.

Anchoring the edges of a component

You can anchor one or more edges of a component at a pixel offset from the corresponding edge of its container. The anchored child edge stays at the same distance from the parent edge when the container resizes.

The top, bottom, left, and right style properties specify the distances between the component sides and the corresponding container sides, in pixels.

The Button control in the following example has its bottom and right edges achored 10 pixels away from the edges of the Panel container that it is in.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsBottomRight/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Button 
            id="myButton" 
            label="A button" 
            bottom="10" 
            right="10"
     
		/>

    </mx:Panel>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Stretching a component

If you anchor both edges in a dimension, such as top and bottom, the component resizes if the container resizes. The Button control in the following example has all four of its edges anchored 10 pixels away from the edges of the Panel container that it is in.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsEdges/index.html"
    horizontalAlign="center" verticalAlign="middle"
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Button 
            id="myButton" 
            label="A button" 
            top="10"
            bottom="10" 
            left="10"
            right="10"
			

			/>

    </mx:Panel>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Anchoring the center of a component

You can also anchor a child component’s horizontal or vertical center (or both) at a pixel offset from the center of the container. The child does not resize in the specified dimension unless you also use percentage-based sizing.

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 horizontalCenter and verticalCenter styles specify the offset from the center of a container, in pixels, that a control should be placed at. The Button control in the following example has both styles set to 0 (zero) to perfectly center it in the Panel container.

Example

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsCenter/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"
>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >

        <mx:Button 
            id="myButton" 
            label="A button" 
            verticalCenter="0"
            horizontalCenter="0"
           />
    </mx:Panel>

</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

A more complicated example

This following example uses contraint-based layout to center the Label control and to make the Button control stretch to almost the full length of the Panel. Set the top property of the Label control to 10 to constrain it to appear 10 pixels from to the top of the Panel. Set its horizontalCenter property to 10 to perfectly center it in the Panel.

Set the left and right properties on the Button control to 10 to make it stretch to within 10 pixels of either side of the Panel. Set its bottom property to 10 to constrain its bottom edge to 10 pixels from the lower edge of the Panel.

The following diagram demonstrates the effects of the properties you set visually. The visual layout controls are part of the Design View in Flex Builder 3.

A size determined by constraint-based layout overrides any explicit or percentage-based size specifications. If you specify left and right style properties, for example, the resulting constraint-based width overrides any width set by a width or percentWidth property.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraints/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Label 
            id="myLabel" 
            fontWeight="bold" 
            fontSize="24" 
            top="10" 
            horizontalCenter="0"
        />

        <mx:Button 
            id="myButton" 
            label="Click Me!" 
            click="myLabel.text = &apos;Hello, World!&apos;;" 
            bottom="10" 
            height="22" 
            left="10"
            right="10" 
           />

    </mx:Panel>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

For more information

• Designing a UI - Layout in the Flex 3 Getting Started Experience
• Sizing and Positioning Components in the Adobe Flex 3 Help
• The Layout Cookbook

About the author