Baseline alignment with constraints in Flex 3

One of the minor improvements in Flex 3 regarding layout is baseline alignment. Setting the baseline constraint means that the user is specifying an offset from the top edge of a constraint region or parent border and the control’s baseline. By offering a baseline constraint style, we can now allow multiple components to be constrained along a single shared baseline. Here is an example of two panels. One has no baseline set on the components. The other uses a baseline and a ConstraintRow.

The Panel using a baseline constraints looks like this:

<mx:Panel title=”baseline in a ConstraintRow” layout=”absolute” >
<mx:ConstraintRow height=”200″ id=”row1″/>
<mx:ConstraintRow height=”100″ id=”row2″/>
<mx:Text text=”San Francisco” baseline=”row1:20″ />
<mx:Button label=”Newton” x=”70″ baseline=”row1:20″ />
<mx:DateChooser x=”140″ baseline=”row1:20″ />
<mx:Label text=”Romania” x=”310″ baseline=”row1:20″ />

Demo: simpleBaseline.swf

Source: simpleBaseline.mxml

At this time, you cannot set the verticalAlign style to a baseline. This is still an open bug: SDK-11725

5 responses

  1. Hi there,

    thanks for the example. I’m struggling a bit trying to set the baseline style within a state. When I switch back to the initial state the baseline property apparently stays set. Here’s a sample. Click on the checkbox. The first click switches to a state which sets the basline style. Clicking again should reset the state to the initial state (and seems to work partially since the text color of the label changes back to black) but the baseline stays set.

  2. k, my mxml was obviously deleted. but it’s pretty simple to reproduce. just generate a state which sets the baseline style for a component to a specific value and create a button which clicks will toggle the currentState.


  3. I’ve been searching for migration issues to Flex 3’s Livecycle from Flex 2’s FDS. Is there a source for help here? I’m not having any luck.

  4. @Joe – I asked around and a document doesn’t seem to exist for migrating from FDS and Flex 2 to LiveCycle and Flex 3. When one does come out, I’ll post it here. sorry I can’t be of more help.

  5. The first click switches to a state which sets the basline style. Clicking again should reset the state to the initial state.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: