Hello Flex, nice to meet you!

Today I’ve moved my first steps in the Flex world, following the introducing lessons of “Adobe Flex 3 – Training from the source”. After an introduction about RIAs, I’ve met Mr. Flex Builder and he told me about the fact that he has two faces, one for the source code and one for the visual design, and that he can switch among different perspectives (development, debugging and profiling)… then he showed me all his controls and layout components… he was so proud of them, but I told him that I can’t spend all the weekend to test their functionalities. So, I’ve took a look at how layouts work in Flex, and I’m very satisfied about the ability to draw dynamic areas that are able to resize and to be anchored to specific points.

As you can see in this screenshot:

Flex layout example

I’ve divided the application main content (that below the stripe “DaveOnFlex…”) into a sort of table of 4 columns x 2 rows, and each textarea is expandable/collapsible in response of window resize. All the code that I used was 15 lines of MXML tags:

	<mx:ConstraintColumn id="c1" width="25%" minWidth="100" />
	<mx:ConstraintColumn id="c2" width="25%" minWidth="100" />
	<mx:ConstraintColumn id="c3" width="25%" minWidth="100" />
	<mx:ConstraintColumn id="c4" width="25%" minWidth="100" />

	<mx:ConstraintRow id="r1" height="50%" minHeight="100" />
	<mx:ConstraintRow id="r2" height="50%" minHeight="100" />

<mx:TextArea left="c1:2" top="r1:2" right="c2:2" bottom="r1:2" text="textarea 1" />
<mx:TextArea left="c1:2" top="r2:2" right="c1:2" bottom="r2:2" text="textarea 2" />
<mx:TextArea left="c2:2" top="r2:2" right="c2:2" bottom="r2:2" text="textarea 3" />
<mx:TextArea left="c3:2" top="r1:2" right="c3:2" bottom="r2:2" text="textarea 4" />
<mx:TextArea left="c4:2" top="r1:2" right="c4:2" bottom="r2:2" text="textarea 5" />

constraintColumns and constraintRows combined define the “virtual table” into which the TextArea can be anchored to, by specifying the id and the offset of the anchor point.
For example, this:

<mx:TextArea left="c1:2" top="r1:2" right="c2:2" bottom="r1:2" text="textarea 1" />

means: anchor this control 2 pixel to the left of the first column (c1:2), 2 pixel to the top of the first row (r1:1), 2 pixel to the right of the second column (c2:2) and 2 pixel to the bottom of the first row (r1:2). Cool!