flex - laying out form items both vertically and horizontally - apache-flex

Question

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?

Answer 1

The only way I found to accomplish that is by using an mx:Grid.
Mainly because the mx:GridItems have a colSpan or rowSpan attribute. Furthermore I use empty mx:FormItems in stead of Labels, because you can use the required attribute to show a (*) for required fields.
Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<mx:Form width="100%" height="100%">
<mx:Grid width="100%" height="100%">
<mx:GridRow>
<mx:GridItem>
<mx:FormItem label="First" required="true"/>
</mx:GridItem>
<mx:GridItem>
<s:TextInput/>
</mx:GridItem>
<mx:GridItem>
<mx:FormItem label="Last"/>
</mx:GridItem>
<mx:GridItem>
<s:TextInput/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem width="100%" height="100%">
<mx:FormItem label="Last"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%" colSpan="3">
<s:TextInput width="100%"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Form>
</s:Group>
Hope this helps,
Koen

Answer 2

The answer is to just use CSS. Create a label style in CSS that specifies textAlign to 'left'. Then take that label style and apply it to the labelStyleName property on the formItem.
Here is a full app that demonstrates the fix:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
.labelStyleName {
textAlign:left;
}
</fx:Style>
<mx:Form x="0" y="307" width="100%">
<s:HGroup>
<mx:FormItem label="First" horizontalAlign="left" labelStyleName="labelStyleName">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label="Last" horizontalAlign="left" labelStyleName="labelStyleName">
<s:TextInput/>
</mx:FormItem>
</s:HGroup>
<mx:FormItem label="Referral" horizontalAlign="left" labelStyleName="labelStyleName">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label="City" horizontalAlign="left" labelStyleName="labelStyleName">
<s:TextInput/>
</mx:FormItem>
</mx:Form>
</s:Application>
If you want more specific lining up of the input items; you may have to specify a labelWidth value.

Answer 3

You should avoid using multiple HGroups if you want columns aligned, it can easily break when you downsize browser window so that it can't show all the content at once. The content overflowing logic will then break the alignment most likely. Use mx:Grid instead as an ultimate solution or s:Form for very simple cases.