Question

I want to code a simple form layout in flex. Something like the following:

[label] [text field]
[label] [text field]

Initially, I’ve tried coding this using vboxes and hboxes for my layout. Like the following

<hbox>
   <vbox>
      <label />
      <textfield />
   </vbox>
   <vbox>
      <label />
      <textfield />
   </vbox>
</hbox>

I get burned by performance, if I start reusing this code in an ItemRender or something like that.

I read somewhere that overuse of HBox and VBox is performance heavy because the code must calculate the exact position of these components on its own.

With that answer in mind, I switched over to using Canvas. Something like this:

<canvas>
   <label x="0" y="0" />
   <text field x="30" y="0" />

   <label x="0" y="15" />
   <textfield x="30" y="15" />
</canvas>

This starts becoming a nightmare of its own when you want to hide and show certain textfields. Or if you have a textArea and want to use word wrap. I’ve started dynamically placing objects in the canvas based on the positions of other elements, but it’s becoming a maintenance nightmare.

Question:

So, I was wondering if there any Layout Managers for Flex to relieve me of my headaches? Or if there’s just a better way of coding my layouts, in general.

Answer 1

I would use the Form, FormItem, and FormHeading tags to layout forms. Something like this:

        <mx:Form width="100%" height="100%">
        <mx:FormHeading label="Enter values into the form."/>

        <mx:FormItem label="First name">
            <mx:TextInput id="fname" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Date of birth (mm/dd/yyyy)">
            <mx:TextInput id="dob" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="E-mail address">
            <mx:TextInput id="email" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Age">
            <mx:TextInput id="age" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="SSN">
            <mx:TextInput id="ssn" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Zip">
            <mx:TextInput id="zip" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Phone">
            <mx:TextInput id="phone" width="200"/>
        </mx:FormItem>
    </mx:Form>

Check out: http://livedocs.adobe.com/flex/3/langref/mx/containers/Form.html#includeExamplesSummary for reference.