Fluid/elastic layout for the flex application

Well, fluid layout makes your application resize and fit to the size of the browser everytime the browser is resized. This is also called elastic or liquid layout sometimes.

One way of achieving it is by using percentage for the dimensions of your container objects viz. HBox. Use percentage for the children of this container too as this will help the layout manager in auto resizing the child container according to the new size of its parent container.
e.g.

<mx:vbox id="parentContainer"width="100%" height="100%" horizontalscrollpolicy="off" >
     <mx:hbox id="childContainer" width="100%" height="20%" horizontalscrollpolicy="off" stylename="titleBox"/>
</mx:vbox>

To make the repainting much smoother, we are going to add the function mentioned below

private function resizeHandler():void
{
 stage.addEventListener(Event.RESIZE, onStageResize);         
}
private function onStageResize(e:Event):void
{
   validateNow();
}

Full Browser Window


Split browser window (Top left window)


Even after splitting the browser window, our application has been resized successfully with no scrollbars !!

In the subsequent post, we shall see how to have the popup window keep up with resizing and positioning w.r.t. the main window in flex application.