collapsible layouts in flex

Question

Hi,

I'm just finished my first month of getting to grips with flex. All of my projects so far have be very small fixed sized containers with everything in the application resting in an absolute position.

The next up and coming project is going to require a more dynamic layout and need some advice.

The app will consist of 3 container (not sure what ones to use yet)

Container 1

Will be the entire width of the app and a quater of its height.

Container 2 Will be beneath Container 1. It will be half the width of the app and 3 quaters of its height.

Container 3 will be the same as container 2.

I want to be able to collapse each container and have the other containers respond to this.

For example, I would like to collapse container 1 so that container 2 and 3 go from 3 quaters height to 100% height.

If I collapse container 2 conatainer 1 remains the same but container 3 goes from half thes apps width to 100% of the width.

Would this type of thing be difficult to do. Wheres a good place to start looking into this.

A link to a tutorial would be great or any offerings of tid bits of advice, do's /don'ts would be a great help also.

Thanks guys,

dub

Answer 1

I am writing this from memory (as I don't have FB to test it now), so let me know if this doesn't work and I'll delete it.

<mx:VBox width="800" height="600">
  <custom:Comp1 width="100%" height="25%"/>
  <mx:HBox width="100%" height="75%">
    <custom:Comp2 width="50%" height="100%"/>
    <custom:Comp3 width="50%" height="100%"/>
  </mx:HBox>
</mx:VBox>

When you collapse something, set its width and height to zero. When you expand it, set its percentWidth and percentHeight to their original values.

Try using 100% everywhere and see if it works; if not, use the given values and follow these steps:

• When you collapse comp1, set hbox's percentHeight to 100
• When you collapse comp2 or comp3, set the other one's percentWidth to 100.
• Restore the values on expanding.