Problem
How to create a form with multiple columns that are aligned and support all the features of the standard Form layout, such as marking form fields as required or optional, and handling error messages.
Solution
The Grid Layout does not support Form features such as marking form fields as required or optional, and handling error messages. I have created a new control based on the standard Form Layout, which enables 2 or more columns and for individual form items to span more than one column.
Detailed explanation
The new control introduces two new elements: MultiColumnForm and MultiColumnFormItem.
The project is maintained at http://multicolumnform.riaforge.org/ where updates may be found, and any issues submitted.
You can add the library to your project using Flex Builder by going to the project properties > Flex Build Path > Library Path, click on the "Add SWC..." button, and browse to the downloaded component.
The namespace for MultiColumnForm and MultiColumnFormItem must be specified in the root element, such as:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mc="nz.co.codec.flex.multicolumnform.*"
defaultButton="{save}"
label="Details">The layout of forms is similar to Form and FormItem. The number of columns is specified in the 'numColumns' property on MultiColumnForm. For example:
<mc:MultiColumnForm numColumns="2">
<mc:MultiColumnFormItem label="Phone">
<mx:TextInput id="phone" text="{_account.phone}"
width="100" />
</mc:MultiColumnFormItem>
<mc:MultiColumnFormItem label="Fax">
<mx:TextInput id="fax" text="{_account.fax}"
width="100" />
</mc:MultiColumnFormItem>
<mc:MultiColumnFormItem label="Physical Address" colspan="2"
width="100%">
<mx:TextInput id="physicalAddress1"
text="{_account.physicalAddress1}"
width="100%" />
<mx:TextInput id="physicalAddress2"
text="{_account.physicalAddress2}"
width="100%" />
</mc:MultiColumnFormItem>
<mc:MultiColumnFormItem label="City">
<mx:TextInput id="city" text="{_account.city}"
width="100" />
</mc:MultiColumnFormItem>
<mc:MultiColumnFormItem label="Postcode">
<mx:TextInput id="postcode" text="{_account.postcode}"
width="50" />
</mc:MultiColumnFormItem>
</mc:MultiColumnForm>If a form item is to span more than one column, a 'colspan' property is set on the MultiColumnFormItem.
The same stylesheet properties as FormItem are used such as 'horizontalGap' to specify the gap between columns. For example, this can be customised by adding the following to your application CSS:
MultiColumnForm {
horizontalGap: 10px;
}Like FormItem, multiple child components can be included under MultiColumnFormItem with a 'direction' property of 'horizontal' or 'vertical' (default).
MultiColumnFormItems are positioned from left to right.
Report abuse
