Flex Layouts

Flex Layouts...

A layout container defines a rectangular region of the application drawing surface and controls the sizing and positioning of the child controls and child containers defined within it.

Containers

Layouts in Flex are based on Containers. Every visual component in a Flex application is inside a container, with the application itself being the outer most container.

Application Layouts

The MXML Application declaration calls for the definition of a layout attribute.

Application layout options:

Absolute
Veritcal
Horizontal

Consider the simple Hello World application below. The application has only a text label child containing the text "Hello World".

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:Label text="Hello World" />
</mx:Application>

In the above code the application layout is set to absolute. The result is that the "Hello World" label is in the top-left of the application window when launched.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
   <mx:Label text="Hello World" />
   <mx:Label text="Below" />
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
   <mx:Label text="Hello World" />
   <mx:Label text="On the Side" />
</mx:Application>

Absolute Layouts

Absolute layouts position elements using explicit x and y coordinates. The (0,0) x-y coordinate is the top-left of the container.

If a child is added to a container that uses absolute positioning the child will be placed at the (0,0) position. If several children are added (without explicit positioning) they will appear atop each other.

An example of a container that always uses absolute positioning is the. Canvas.

The below example uses a Canvas as a container to absolute position some child controls:

   <mx:Canvas>
      <mx:Label x="0" y="0" text="A0" />
      <mx:Label x="100" y="0" text="A1" />
      <mx:Label x="0" y="100" text="B0" />
      <mx:Label x="100" y="100" text="B1" />
   </mx:Canvas>

Constraint-Based Layouts

Constraint-based layouts anchor children relative to container edges using a combination of the following attributes: top, left, bottom, right.

TODO... below to above

You can also use constraint-based layout to anchor any combination of the top, left, right, and bottom sides of a child a specific distance from the container edges, or to anchor the horizontal or vertical center of the child a specific (positive or negative) pixel distance from the container center. To specify a constraint-based layout you use the top, bottom, left, right, horizontalCenter, and verticalCenter styles. When you anchor the top and bottom, or the left and right sides of the child container to the Canvas sides, if the Canvas control resizes, the children also resize.

The below example uses a Canvas as a container to position child controls using contstraints:

   <mx:Canvas width="100" height="100">
      <mx:Label text="North" top="0" horizontalCenter="0" />
      <mx:Label text="South" bottom="0" horizontalCenter="0" />
      <mx:Label text="East" left="0" verticalCenter="0" />
      <mx:Label text="West" right="0" verticalCenter="0" />
   </mx:Canvas>

Note that the canvas container in the above example has explicit height and width attributes specified. This is important for constraint-based layouts.

With constraint-based layouts it is important that the container have a size (height and width) set otherwise the controls will appear on top of one another. You can see this undesirable behavior in action by removing the width and height attributes of the canvas container in the above example.

Examples

Example of vertical layout using a VBox:

   <mx:VBox>
      <mx:Text text="Top"/>
      <mx:Text text="Middle"/>
      <mx:Text text="Bottom"/>
   </mx:VBox>

Example of horizontal layout using a HBox:

   <mx:HBox>
      <mx:Text text="Left"/>
      <mx:Text text="Middle"/>
      <mx:Text text="Right"/>
   </mx:HBox>