I am trying to create a simple form in flex (flash builder 4). I placed a form container and FormItems inside. The form items are for example standard "customer" fields such as First, Last, Address, City, State, Zip.
By default it lays the fields out vertically and makes the field labels right justified, which looks nice.
However, I would like some of the fields to be horizontal – for example, something like this:
First __________ Last ___________
Address _____________________
City ___________ St ___ Zip ____
I tried putting the first/last in an HGroup container, but that does not quite work – I loose the right justification of the labels, looks something like this:
First __________ Last ___________
Address _____________________
City ___________ St ___ Zip ____
This is an example of how I am trying to make first/last horizonal, but it will not be right justified with referral – however city and referral are right justified together:
<mx:Form x="0" y="307" width="100%">
<s:HGroup>
<mx:FormItem label="First"> <s:TextInput/></mx:FormItem>
<mx:FormItem label="Last"><s:TextInput/></mx:FormItem>
</s:HGroup>
<mx:FormItem label="Referral"><s:TextInput/></mx:FormItem><mx:FormItem label="City">
<s:TextInput/>
</mx:FormItem>
</mx:Form>
It's almost like I need a sort of table layout with colSpan ability, or ?
This custom component looked promising but does not appear to work in fb4 at least http://cookbooks.adobe.com/post_Multi_Column_Form_Layout-9644.html
Also, are there any good books / sites / etc that discuss user interface design / form design and similar in Flex that I can browse?
Best Answer
The only way I found to accomplish that is by using an
mx:Grid
. Mainly because themx:GridItem
s have acolSpan
orrowSpan
attribute. Furthermore I use emptymx:FormItem
s in stead of Labels, because you can use therequired
attribute to show a (*) for required fields.Here's an example:
Hope this helps,
Koen