Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flex - laying out form items both vertically and horizontally

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?

like image 844
Scott Szretter Avatar asked Feb 25 '23 07:02

Scott Szretter


1 Answers

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

like image 187
Koen Weyn Avatar answered Apr 25 '23 13:04

Koen Weyn