7 Replies Latest reply on Jun 29, 2010 2:56 PM by rtalton

    Layout form elements

    Legion6789145217858656546

      I just started on Flex a couple days ago.  My background is .NET.  In .NET, laying out components for a windows app is really simple.  But I'm not having much luck here.  I'm supposed to replicate a paper form for people to fill out, and the fields need to be layed out as they are on the paper form as closely as possible.  The form is a mortgage application, divided into two columns.  The left column is for the primary applicant's information, and the right for the secondary, if applicable.  So I've started trying to lay things out, but I could only get one component per row.  So then I tried using constraintrows and columns but the rows don't work, so all the form fields are now directly on top of each other.

       

      The mxml for the form is below.  Should I try some other layout method?  Can't I just drag and drop, and arrange all the components on the form directly?  Why do I have to mess with XML?  Also, I noticed the property window for components doesn't actual let you edit much beyond the id field, everything else has to be directly edited in XML.  Is there a reason for that?

       

      <mx:Form label="Personal Information"
                           width="100%" height="100%">
                      <mx:Canvas width="100%" height="100%">
                          <mx:constraintColumns>
                              <mx:ConstraintColumn id="LeftCol" width="50%"/>
                              <mx:ConstraintColumn id="RightCol" width="50%"/>
                          </mx:constraintColumns>
                         
                          <mx:constraintRows>
                              <mx:ConstraintRow id="Row1" height="7%"/>
                              <mx:ConstraintRow id="Row2" height="7%"/>
                              <mx:ConstraintRow id="Row3" height="7%"/>
                              <mx:ConstraintRow id="Row4" height="7%"/>
                              <mx:ConstraintRow id="Row5" height="7%"/>
                              <mx:ConstraintRow id="Row6" height="7%"/>
                              <mx:ConstraintRow id="Row7" height="7%"/>
                              <mx:ConstraintRow id="Row8" height="7%"/>
                              <mx:ConstraintRow id="Row9" height="7%"/>
                              <mx:ConstraintRow id="Row10" height="7%"/>
                              <mx:ConstraintRow id="Row11" height="7%"/>
                              <mx:ConstraintRow id="Row12" height="7%"/>
                              <mx:ConstraintRow id="Row13" height="7%"/>
                          </mx:constraintRows>
                         
                      <mx:FormItem label="Salutation: " left="LeftCol" top="Row1">
                          <s:ComboBox id="cmbSalutation" change="cmbSalutation_changeHandler(event)">
                          <mx:ArrayList>
                              <fx:String>Mr</fx:String>
                              <fx:String>Mrs</fx:String>
                              <fx:String>Miss</fx:String>
                              <fx:String>Ms</fx:String>
                              <fx:String>Other</fx:String>
                          </mx:ArrayList>
                          </s:ComboBox>
                      </mx:FormItem>
                      <mx:FormItem left="RightCol" top="Row1">
                          <s:TextInput id="txtSalutationOther" visible="false"/>
                      </mx:FormItem>
                      <mx:FormItem label="Firstname: " left="LeftCol" top="Row2">
                          <s:TextInput id="txtFName" top="Row2"/>
                      </mx:FormItem>
                      <mx:FormItem label="Lastname:" left="RightCol"  top="Row2">
                          <s:TextInput id="txtLName"  top="Row2"/>
                      </mx:FormItem>
                      <mx:FormItem label="Address: " left="LeftCol" top="Row3">
                          <s:TextInput id="txtAddress"/>
                      </mx:FormItem>
                      <mx:FormItem label="City: " left="LeftCol" top="Row4">
                          <s:TextInput id="txtCity"/>
                      </mx:FormItem>
                      <mx:FormItem label="Province: " left="RightCol" top="Row4">
                          <s:ComboBox id="cmbProvince">
                              <mx:ArrayList>
                                  <fx:String>AB</fx:String>
                                  <fx:String>BC</fx:String>
                                  <fx:String>MB</fx:String>
                                  <fx:String>NB</fx:String>
                                  <fx:String>NL</fx:String>
                                  <fx:String>NT</fx:String>
                                  <fx:String>NS</fx:String>
                                  <fx:String>NU</fx:String>
                                  <fx:String>ON</fx:String>
                                  <fx:String>PE</fx:String>
                                  <fx:String>QC</fx:String>
                                  <fx:String>SK</fx:String>
                                  <fx:String>YT</fx:String>
                              </mx:ArrayList>
                          </s:ComboBox>
                      </mx:FormItem>
                      <mx:FormItem label="Postal Code: " left="LeftCol" top="Row5">
                          <s:TextInput id="txtPCode"/>
                      </mx:FormItem>
                      <mx:FormItem label="Phone: " left="LeftCol" top="Row6">
                          <s:TextInput id="txtHomePhone"/>
                      </mx:FormItem>
                      <mx:FormItem label="Cell Phone: " left="LeftCol" top="Row7">
                          <s:TextInput id="txtCellPhone"/>
                      </mx:FormItem>
                      <mx:FormItem label="Email: " left="LeftCol" top="Row8">
                          <s:TextInput id="txtEmail"/>
                      </mx:FormItem>
                      <mx:FormItem label="SIN (Optional): " left="LeftCol" top="Row9">
                          <s:TextInput id="txtSIN"/>
                      </mx:FormItem>
                      <mx:FormItem label="Birthday: " left="LeftCol" top="Row10">
                          <s:TextInput id="txtBirthday"/>
                      </mx:FormItem>
                      <mx:FormItem label="Marital Status: " left="LeftCol" top="Row11">
                          <s:ComboBox id="cmbMarital" change="cmbMarital_changeHandler(event)">
                              <mx:ArrayList>
                                  <fx:String>Single</fx:String>
                                  <fx:String>Married</fx:String>
                                  <fx:String>Other</fx:String>
                              </mx:ArrayList>
                          </s:ComboBox>
                      </mx:FormItem>
                      <mx:FormItem label="" left="RightCol" top="Row11">
                          <s:TextInput id="txtMaritalOther" visible="false"/>
                      </mx:FormItem>
                      <mx:FormItem label="No. Of Dependents (excl. Spouse): " left="LeftCol" top="Row12">
                          <s:TextInput id="txtDependents" />
                      </mx:FormItem>
                      <mx:FormItem label="Language Preference: " left="LeftCol" top="Row13">
                          <s:ComboBox id="cmbLanguage">
                              <mx:ArrayList>
                                  <fx:String>English</fx:String>
                                  <fx:String>French</fx:String>
                              </mx:ArrayList>
                          </s:ComboBox>
                      </mx:FormItem>
                      </mx:Canvas>
                  </mx:Form>

        • 1. Re: Layout form elements
          VRPDeveloper Level 3

          I can understand your problem... It is becasue Microsoft has made developers use to do this things by just dragging and dropping the components but in flex you need to use different layouts.

           

          Here you need to use Absolute Layout and specify x and y coordinates in order to specify components in left and right panel. You can use different containers to make it properly alligned. For your applicaiton first take canvas container and then use Form container..

           

          Hope you will get it!!!

          • 2. Re: Layout form elements
            Legion6789145217858656546 Level 1

            I put the form container inside the canvas container, which fixed the problem of components overlapping, but now it's like it was before, one formitem per row.  I can't have things side by side.  Basically the components ignore my row and column tags.

            • 3. Re: Layout form elements
              VRPDeveloper Level 3

              if you want side by side then you cannot use form container then you have to use canvas container or panel container where you can specify x and y coordinates of controls....

              • 4. Re: Layout form elements
                Legion6789145217858656546 Level 1

                If I want form validation, I need to use formitems, which need to be in a form right?  Or can I use canvas with formitems inside and use absolute positioning?  Or is there something I can use with canvas that has built in input validation?

                • 5. Re: Layout form elements
                  Legion6789145217858656546 Level 1

                  I got rid of the form tag and replaced it with canvas so I could use absolute positioning.  I'm still wrapping the fields in formitem tags so I can use validation, etc.  However, although all the labels line up, the fields don't, so it looks bad.  If I put x,y coords on the field inside the formitem, they dont respond.  Is there something I'm missing?

                   


                                  <mx:FormItem label="Firstname: " x="10" y="60" width="248">
                                      <s:TextInput id="txtFName" x="20"/>
                                  </mx:FormItem>

                   

                  The coord on the textinput doesn't do anything.  So all my input fields are jagged and start right where the label ends.  Looks terrible.

                  • 6. Re: Layout form elements
                    VRPDeveloper Level 3

                    You can use verticalGap-Vertical spacing between children in a FormItem container

                     

                    horizontalGap-

                    Horizontal spacing between children in a FormItem container

                     

                    indicatorGap

                    Gap between the end of the area in the form reserved for labels and the FormItem children or FormHeading heading

                     

                    you can go through http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_08.html

                    • 7. Re: Layout form elements
                      rtalton Level 4

                      Hi,

                      Here is a fancy layout in Flex 3 to show how you can combine multiple component on the form to achieve multiple columns. I understand some of the new Flex 4 components might make the layout even simpler.

                      Hope it helps you.

                       

                      <?xml version="1.0" encoding="utf-8"?>

                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

                      <mx:Script>

                          <![CDATA[

                              import mx.controls.Alert;

                          ]]>

                      </mx:Script>

                          <mx:Form x="10" y="10" defaultButton="{btnSave}">

                              <mx:VBox width="100%">

                                  <mx:FormHeading label="Please complete the form!" textAlign="center" width="100%"/>

                                  <mx:Spacer height="15"/>

                              </mx:VBox>

                              <mx:HBox width="100%" height="100%" horizontalGap="20">

                                  <mx:VBox height="100%" width="50%">

                                      <mx:FormItem label="Salutation: ">

                                          <mx:ComboBox id="cmbSalutation"  width="125" height="22">

                                          <mx:Array>

                                              <mx:String>Mr</mx:String>

                                              <mx:String>Mrs</mx:String>

                                              <mx:String>Miss</mx:String>

                                              <mx:String>Ms</mx:String>

                                              <mx:String>Other</mx:String>

                                          </mx:Array>

                                          </mx:ComboBox>

                                      </mx:FormItem>

                                      <mx:FormItem label="Label" direction="horizontal" width="100%">

                                          <mx:RadioButton label="male"/>

                                          <mx:RadioButton label="female"/>

                                      </mx:FormItem>

                                      <mx:FormItem label="Label">

                                          <mx:TextInput/>

                                      </mx:FormItem>

                                      <mx:FormItem label="Label">

                                          <mx:CheckBox selected="true"/>

                                      </mx:FormItem>

                                      <mx:FormItem label="Label">

                                          <mx:TextInput/>

                                      </mx:FormItem>

                                  </mx:VBox>

                                  <mx:VBox height="100%" width="50%">

                                      <mx:FormItem label="Province: " left="RightCol" top="Row4">

                                          <mx:ComboBox id="cmbProvince" width="128">

                                              <mx:Array>

                                                  <mx:String>AB</mx:String>

                                                  <mx:String>BC</mx:String>

                                                  <mx:String>MB</mx:String>

                                                  <mx:String>NB</mx:String>

                                                  <mx:String>NL</mx:String>

                                                  <mx:String>NT</mx:String>

                                                  <mx:String>NS</mx:String>

                                                  <mx:String>NU</mx:String>

                                                  <mx:String>ON</mx:String>

                                                  <mx:String>PE</mx:String>

                                                  <mx:String>QC</mx:String>

                                                  <mx:String>SK</mx:String>

                                                  <mx:String>YT</mx:String>

                                              </mx:Array>

                                          </mx:ComboBox>

                                      </mx:FormItem>

                                      <mx:FormItem label="Label">

                                          <mx:TextInput/>

                                      </mx:FormItem>

                                      <mx:FormItem label="Label">

                                          <mx:TextInput/>

                                      </mx:FormItem>

                                      <mx:FormItem label="Label">

                                          <mx:TextInput/>

                                      </mx:FormItem>

                                      <mx:FormItem label="Label">

                                          <mx:TextInput/>

                                      </mx:FormItem>

                                  </mx:VBox>

                              </mx:HBox>

                              <mx:Spacer height="15"/>

                              <mx:ControlBar width="100%" horizontalAlign="right">

                                  <mx:Button label="Cancel" id="btnCancel" width="84"/>

                                  <mx:Button label="Save" id="btnSave" width="84" click="Alert.show('Thank you', 'Saved!')"/>

                              </mx:ControlBar>

                          </mx:Form>

                       

                      </mx:Application>