Sunday, March 25, 2012

Flex - Complex Form layouts with ContraintLayout

The Form container uses FormLayout, by default, to lay out its FormItem children. FormLayout extends VerticalLayout to stack the FormItem comtainers in a vertical column. This is all well and good, assuming you want a vertically laid out form, but that's often not the case. Take the example below.

Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed.

Get Adobe Flash Player

Usually, when I see a developer implement such a layout for a form, they'll forego the Form container altogether in favor of a series of nested HGroups and VGroups. Although this works, it's generally a bit clumsy and less than ideal.

Remember the ConstraintRows and ContraintColumns feature in Flex 3? This still exists in the form of a ConstraintLayout class in Flex 4. I find that many Flex developers aren't aware of this, which is no surprise, for there's barely any mention of it in the docs. And, if you Google the subject, you tend to only get back results relating to this layout mechanism used in MX containers.

The above form was created inside a Spark Form container substituting the FormLayout with a ConstraintLayout, providing the ability to position its FormItem containers in a grid-like layout complete with row/column spanning.

Although, not related to the subject of this post, I'm using a custom FormItem skin (CondensedStackedFormItemSkin) which, removes the sequence and help group skin parts (since they're not needed and take up way too much space). You can get the CondensedStackFormItemSkin from the ShinyLib library, but you'll find it pretty easy to make yourself.

No comments:

Post a Comment