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.

Flowchart drawing in Flex

After googling to find any flex flowcharting solution, I finally thought of cooking my own.

Thanks to Flex Gumbo, it made my task much easier. By using the basic flex Gumbo objects, tweaking them a little bit to create my own custom objects I am able to draw simple flowchart diagrams in flex.

To know more about Flex Gumbo visit Adobe Flex Gumbo OpenSource

The picture on the right depicts the graph of a workflow using flowcharting. You will notice that this is displayed in Flash player ver. 10. That's right ! Gumbo works with ver. 10 and higher.

Here are some of the custom components used to create this flowchart

These components are composite components built using various Segment objects grouped together in the Path objects. CubicBezierSegment object is used to draw some of the logic gates.