flex - laying out form items both vertically and horizontally

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