Jozef Chúťka's blog

There are some hidden treasures deep in flex framework, you just have to dig for. Yesterday I hit by coincidence ConstraintLayout. Its a part of 4.5 SDK and is a nice layout for defining rows and columns for a table. Once columns and rows are created, your elements are not automaticaly aligned into a block, but rather any element can refer to any column/row using correct formula in style attributes. E.g. forumla left=”{columnId}:{value}” will attach your element into position of a column and offsetting it by some value. This layout also easily let you merge cells or rows etc.

See it in action:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:ConstraintLayout>
            <s:constraintColumns>
                <s:ConstraintColumn id="c1" width="100"/>
                <s:ConstraintColumn id="c2" width="100"/>
            </s:constraintColumns>

            <s:constraintRows>
                <s:ConstraintRow id="r1" height="100"/>
                <s:ConstraintRow id="r2" height="100"/>
            </s:constraintRows>
        </s:ConstraintLayout>
    </s:layout>
    <s:Button label="1" left="c1:5" right="c1:5" top="r1:5" bottom="r1:5"/>
    <s:Button label="2" left="c2:5" right="c2:5" top="r1:5" bottom="r2:5"/>
    <s:Button label="3" left="c1:5" right="c2:5" top="r2:5" bottom="r2:5"/>
</s:Application>

… will result in this: