Flex - placement of form elements both vertically and horizontally

Question

I am trying to create a simple form in flex (flash builder 4). I placed the form container and FormItems inside. Form elements are, for example, standard "client" fields, such as First, Last, Address, City, State, Zip.

By default, it exposes the fields vertically and makes the field labels correct, which looks good.

However, I would like some of the fields to be horizontal - for example, something like this:

First __________ Last ___________ Address _____________________ City ___________ St ___ Zip ____ 

I tried to put the first / last in the HGroup container, but it doesn’t quite work - I lose the correct justification of the labels, it looks something like this:

 First __________ Last ___________ Address _____________________ City ___________ St ___ Zip ____ 

This is an example of how I am trying to make the first / last horizon, but it will not be correctly justified with the referral - however, the city and the referral will be correctly 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> 

Is it almost as if I need a table with colSpan capabilities or?

This custom component looked promising, but didn't seem to work in fb4 http://cookbooks.adobe.com/post_Multi_Column_Form_Layout-9644.html

Also are there any good books / sites / etc that discuss UI design / design etc. in Flex, which can I view?

Answer 1

The only way I found for this is to use mx:Grid . Mostly since mx:GridItem has the colSpan or rowSpan . In addition, I use empty mx:FormItem instead of shortcuts because you can use the required attribute to display (*) for required fields.

Here is 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 CSS style that points textAlign to "left." Then take this label style and apply it to the labelStyleName property in the formItem element .

Here is the complete application 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 (eg, 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 need a more specific layout of input elements; you may need to specify the labelWidth value.

Answer 3

You should avoid using multiple HGroups, if you want the columns to be aligned, it can easily break when the browser window is reduced in size so that it cannot display all the content at once. Content overflow logic is likely to break alignment. Use mx: Grid instead as the final solution or s: Form for very simple cases.