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.

Saturday, March 17, 2012

Flex FieldSet Component

I was asked, twice, in the span of one week, if Flex had a FieldSet component. I figured it would be nice to have one in my toolbox for when I am asked a third time. There appears to be a nice one at Teoti Graphix. I especially like being able to push anything into the legend, like icons and drop down lists.

My goal in creating this version was to have precise control over the legend's horizontal position. The default position would have a dependency on the FieldSet's cornerRadius and gap (the amount of space between the border and the legend text) styles. Further adjustments could be made by setting the paddingLeft and paddingRight styles.

Here's what I came up with:

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


This FieldSet component also includes most of the border and background styles/properties you would find on the BorderContainer component.

Source code located at: https://www.assembla.com/code/shinynet/subversion/nodes