Layout For A Table

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:

2 comments so far

  1. Robert Trimmons August 29, 2011 16:54

    Why don’t the horizontalCenter and verticalCenter constraints work like this anymore i.e., horizontalCenter=”col1:0″? They used to in MX.

    Here’s some code to demonstrate:

  2. Jozef Chúťka August 30, 2011 09:33

    its seems like its not implemented in current sdk http://forums.adobe.com/message/3883912

Leave a comment

Please be polite and on topic. Your e-mail will never be published.