How to implement this layout in Flex 4 ?

Question

Hi guys,

I'm pretty new in Flex development. Now I'm learning layouts in Flex. I try to make the following layout. The red arrow means when enlarge the window, the red arrow widget will become large too. Can anyone implement this layout in Flex? Thanks in advance.

Answer 1

You could do something like this:

<VBox>
    <HBox>
        ... // Name, context...
    </HBox>
    <HBox>
        ... // Description...
    </HBox>
    <HBox>
        <Label text="Pattern: "/>
        <VBox>
             ... // text and insert variable
        </VBox>
    </HBox>
</VBox>

For your scaling, just set your expanding controls to have width and/or heights of "100%" in the MXML.

Answer 2

Here goes Yousui good luck:

<s:layout>
    <s:BasicLayout/>
</s:layout>
<s:Label text="Name:" left="9.8" top="16.4" width="38" height="12"/>
<s:Label text="Description:" left="9.75" top="45.85"/>
<s:Label text="Pattern:" left="9.5" top="76"/>
<s:TextInput left="85" top="10" right="353"/>
<s:TextInput left="85.5" top="40" right="10.5"/>
<s:TextArea left="86" top="70" right="7" bottom="34"/>
<s:Button label="Insert Variable" bottom="6" left="86"/>
<s:Label text="Context:" width="45" top="16" right="300"/>
<s:ComboBox width="150" top="10" right="143"/>
<s:CheckBox label="Automatically insert" top="11" right="10.700012"/>
<s:Button label="Cancel" right="7" bottom="6.450012"/>
<s:Button label="OK" right="84.599976" bottom="6.799988"/>

If you are using Flash Builder Mac or Win version you have the Design view available (Linux Flash Builder doesn't have), this design would be easy to do.

But i guess that you probably aren't used to the way that Flash Builder handles control positioning, if thats the case:

• Paste this code in the MXML file you have
• Go to Design view and select one of these controls.
• You will see in the Properties Panel in the Size and Position section, a sub section named Constrains, there is were you can lock (right, left, top and bottom) the corners of your control in a way that you would get the desired effect that you needed.

Case your Properties panel isn't visible. Go to Window > Show View > Properties.

Hope this helps.

EDIT:

If you have the MinWidth and MinHeight properties specified in your Application tag, beware that when shrinking your Flash App, the layout will adjust your layout to a minimum specified in those properties.