Posted by: edsyrett | 18 February 2009

Multi-column forms

If you have ever tried to create multiple columns within a Form, I guess you probably gave up.  So did I.  Until I realised that a Form is a pretty simple little class that just arranges the FormItems within it.  I think I approached the problem thinking that <mx:Form> was like a HTML form, i.e. it had some functionality that managed the form items. But no, it’s just a container.   

The next problem was that we had some forms that had only one column and some that had more.  If you have a specific style for Form in your stylesheet, the multi-column forms will look wrong, for example each column may have a border around it.  

The easy solution is to derive a class from HBox, call it MultiColumnForm, and derive a class from Form, call it FormColumn.  You can then create multi-column forms by embedding FormColumn objects inside a MultiColumnForm. You can style MultiColumnForm and FormColum explicitly in your stylesheet without worrying about styles clashing with Form.

Here is my little test app.



  1. Very nice idea! Saved me loads of headache, cheers 🙂

  2. It seems that you have in your example two forms in a normal HBox. The only “special” thing is the style, but what if you want to validate the “multicolumn”-Form? In your solution you have two FormColumns which just extends Form without any new functionality etc. … Or am I wrong?

    • Hi Frederik,

      As far as I am aware, mx:Form only contains layout functionality – the validation provided by the mx framework is done at the individual field level using the validators etc, and the developer has to write the code to decide whether the form as a whole is valid or not.

      So it wouldn’t make any difference whether there was one form or a bunch of them using my FormColumn class on a given screen as the developer code could just look through any FormItems it needed to for the validation.

      Hope this answers your question..???

  3. […] Multi-column forms February 2009 3 comments 5 […]

  4. mx:Grid works just like a html table.

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: