In Alignment

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.

I just fixed the part of the designer layout engine which aligns inline boxes.
Specifically, I'm now computing the baseline of form components like
buttons and textfields, such that rather than aligning the bottom of
these with the text baseline, the baseline within the components are
baseline aligned.

This looks a lot better - especially for things like radiobuttons.
Take a look at the before and after shots. And unlike most weight-loss
advertisements, I promise I'm using the same lighting and lens when
taking these two snapshots:

Before

After

There's a lot to point out here. First, notice how the radio and check boxes now
seem centered next to the text. Second, and more importantly, notice how the labels
in front of the text field and dropdowns are properly aligned with the text
inside these components. This points right to something else you should know
about: the Label property of many of these components. If you set the label directly
on the component, it's rendered along with the component and gets proper baseline
alignment as shown here. If you drop a separate Static Text or Label yourself, it's
not "one" with the component and won't move as a single unit, render into a single
<span> rendered by the browser, etc.

Tip: Notice also that by setting the Required property on the dropdown and text fields,
the label automatically got rendered with a little red asterisk indicating to the
user that it's a required value. This even works when you use a separate Label component;
as soon as you bind it to another component (by ctrl-click and dragging from one
component to the other to link them) the required property will propagate to the label.

As another example of where the alignment bug shows up, take a look at the bottom row
of the new table component once pagination has been added in its customizer.
Notice how the Page text field is really misaligned from its "Page:" label.
This was the bug that inspired me to fix this.

Here's how the bottom looks now - pretty darn close to what browsers will show:

I just put this fix in, so it will not be in the EA 2 bits. EA2 has left development engineering
and is getting some TLC from the QA organization right now. Stay tuned.