Best Practices: How do you code layouts in Flex?

Question

Hi there.

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

If you're truly using a "form" layout, Flex has a Form "component"/layout manager. I don't know of the difference in performance you'll get but code cleanliness will be improved (helps with maintainance - will definately help you with your issues). HTH

Answer 2

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.

Answer 3

Personally I would not use ItemRenders for forms, but you may want to use ItemEditors in a DataGrid for individual items. If you're buidling forms, use the Form component with its features, as mentioned above. Use States to swap out form elements, unless the nature of the form itself is highly dynamic, in which case you might want to go with a purely actionscript versus an MXML approach.