DividedBox layout container

DividedBox Layout Container is similar to Box Layout Container. The difference is, it adds a divider between its child components which can be used to resize the area of container for the child components using mouse pointer. Hold the divider with left button of the mouse and move it, you will see the resized areas of the containers associated with the divider.

The direction for the child components to take position can be determined by the "direction" attribute of DividedBox tag. You can provide two values "horizontal" and "vertical" to lay the child components horizontally and vertically.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="560" height="258">

<mx:DividedBox width="500" height="200" direction="horizontal">

<mx:VBox backgroundColor="#BAE2F9" width="100%" height="100%">

<mx:LinkButton label="Introducing Flex" click="articleText.text='Flex is developed on adobe technology.'"/>

<mx:LinkButton label="Downloading and Installing Flex" click="articleText.text='Latest Flex SDK is freely downloadable at adobe website.'"/>

</mx:VBox>

<mx:VBox backgroundColor="#E6D4F6" width="100%" height="100%">

<mx:Text id="articleText" fontWeight="bold"/>

</mx:VBox>

</mx:DividedBox>

</mx:Application>