Dynamically changing a components ConstraintRow and ConstraintColumn

I just learned about ConstraintRow/ConstraintColumn today from the book Creating Visual Experiences with Flex 3.0 by Juan Sanchez and Andy McIntosh. I wish I’d know about this sooner because it would have really simplified some of my layouts. Below is a little app that I created to explore some of the various settings. ( Details after the example. )

Turns out it is pretty easy to use  ConstraintRow/ConstraintColumn. The basic layout would be as such inside of a container with absolute positioning.

<mx:constraintColumns>
<mx:ConstraintColumn id="col1" width="100" />
<mx:ConstraintColumn id="col2" width="200" />
</mx:constraintColumns>

<mx:constraintRows>
<mx:ConstraintRow id="row1" height="50" />
<mx:ConstraintRow id="row2" height="100" />
</mx:constraintRows>

Now you can position a component relative to any one of the row/cols by setting the left/right or top/bottom like so:

<mx:VRule
    right="column1:0" height="100%" />

<mx:VRule
    right="column2:0" height="100%" />

<mx:HRule
    bottom="row1:0" width="100%" />

<mx:HRule
    bottom="row2:0" width="100%" />

Just for funnzies I wanted to create a component that could change its alignment. I could see lots of uses for this. If you really wanted to you could animate your row/cols and use that to replace <States>.

The only thing that I found a little confusing about this layout is that, for instance, applying a left=”col2:0″ will place the component’s left border up against the right of col1. Which made since after I played around with it for a while.

Now, will we be able to place a constraintRow/Col in z-space with Flash 10? That would be cool. Note: I just checked and there’s no property like depth on a ConstraintColumn so probably not. :(