Have Geek Brain

Best Practices: How Do You Program Layouts in Flex?

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

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

Initially, I tried coding using vbox and hbox for my layout. As below

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

I get a performance burn if I start reusing this code in the ItemRender or something.

I read somewhere that overusing HBox and VBox is very heavy, because the code has to figure out the exact position of these components on its own.

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

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

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

It starts to get a nightmare when you want to hide and show certain text fields. Or if you have a textArea and want to use word wrap. I started to dynamically position objects in the canvas based on the positions of other elements, but this is becoming a maintenance nightmare.

Question:

So, I was wondering if there are layout managers for Flex out there to save me my headaches? Or if only the best way to code my layouts in general.

0


a source to share


3 answers


I would use Form, FormItem and FormHeading tags for layout forms. Something like that:

        <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>


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

+4


a source


If you are actually using a form layout, Flex has a component / layout manager. I am not aware of the performance difference you will get, but the cleanliness of the code will be improved (helps with maintenance - will definitely help you with your problems). NTN



0


a source


Personally I would not use ItemRenders

for the forms, but you can use ItemEditors

in the DataGrid

individual elements. If you are creating forms, use the component Form

with its functions as stated above. Use States

to swap form elements if the nature of the form itself is not very dynamic, in which case you can go with pure ActionScript and MXML.

0


a source






More articles:


All Articles