This post originated from an RSS feed registered with Web Buzz by Manish Jethani. Original Post: Constraints-based layout Feed Title: Manish Jethani Feed URL: http://feeds.feedburner.com/manish/artima Feed Description: Software. RIA. Flex. Latest Web Buzz Posts Latest Web Buzz Posts by Manish Jethani Latest Posts From Manish Jethani

Flex 2 has a new feature called constraints-based layout. It's a new way of laying out UI elements in Flex applications.

Consider the following authentication dialog.

To achieve this layout, I wrote this piece of MXML in Flex 1.5:

  <mx:Panel title="Authentication" width="264">
    <mx:VBox marginLeft="10" marginRight="10" marginTop="10" marginBottom="10">
      <mx:HBox width="100%">
        <mx:Label text="ID" width="50%" />
        <mx:TextInput />
      </mx:HBox>
      <mx:HBox width="100%">
        <mx:Label text="Password" width="50%" />
        <mx:TextInput password="true" />
      </mx:HBox>
      <mx:HBox horizontalAlign="right" width="100%">
        <mx:Button label="Login" />
      </mx:HBox>
    </mx:VBox>
  </mx:Panel>

Problem is, there's too many boxes. Boxes inside boxes inside boxes. To align the Login button to the right, I've put it inside an HBox with 100% width and horizontal alignment set to "right". This may or may not seem intuitive to a developer, but it can be hard to follow for UI designers. Moreover, if you attended David George's talk on how to make Flex applications perform better at MAX, you know how deeply nested UIs are bad for performance.

Enter constraints-based layout. Every interface object (UIComponent instance) in Flex 2 can have layout constraints defined. The Canvas container honours the layout constraints on its children. For example, you can say that the Login button in the above example should be 10 pixels from the right and 10 pixels from the bottom. No matter how the Canvas sizes itself and where the other objects end up, the button will always stick to the bottom-right, offset by 10 pixels.

Now let's rebuild the above UI using a Canvas with constraints-based layout.

  <mx:Panel title="Authentication" width="264">
    <mx:Canvas width="100%" height="100%">
      <mx:Label text="ID">
        <mx:layoutConstraints>
          <mx:EdgeAnchor left="10" top="10"/>
        </mx:layoutConstraints>
      </mx:Label>
      <mx:TextInput>
        <mx:layoutConstraints>
          <mx:EdgeAnchor right="10" top="10"/>
        </mx:layoutConstraints>
      </mx:TextInput>
      <mx:Label text="Password">
        <mx:layoutConstraints>
          <mx:EdgeAnchor left="10" top="40"/>
        </mx:layoutConstraints>
      </mx:Label>
      <mx:TextInput>
        <mx:layoutConstraints>
          <mx:EdgeAnchor right="10" top="40"/>
        </mx:layoutConstraints>
      </mx:TextInput>
      <mx:Button label="Login">
        <mx:layoutConstraints>
          <mx:EdgeAnchor right="10" bottom="10"/>
        </mx:layoutConstraints>
      </mx:Button>
    </mx:Canvas>
  </mx:Panel>

The important thing to note here is that all the boxes have vanished and gotten replaced by layout constraints. If you count the number of interface objects inside the Panel, there's exactly 6 (including the Canvas). Compare that with 9 in the previous "boxes inside boxes" example -- 4 of which were containers (and 3 levels of nesting).

The syntax for specifying constraints is a little bit more verbose than I'd personally prefer, but really you don't have to code this by hand. You truly start appreciating constraints-based layout when you look at the IDE support. Below is a screenshot of the properties panel in Zorn (uh... I mean Flex Builder) when the Login button is the currently selected object in the design view. It's all just select, drag, click, ....

The Alpha 1 build doesn't have support for anchoring objects to the center of the container -- objects can be anchored only to the edges -- but I just checked in centering support and it should be there in the next build.

Going from "boxes inside boxes" to constraints in Flex 2 is a little bit like going from tables to CSS in HTML 4. It's just a whole new and often better way of doing things.