Kasiruby's Blog

DividedBox Container

Definition:

             It measures & lays out its children horizontally or vertically in exactly the same way as a Box container. But, it inserts a draggable dividers in the gaps between the children. We can drag any divider to resize the children on each side. The direction property determines whether it is horizontal or vertical layout.

Source Code:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

    <mx:Panel title=”DividedBox Container ” width=”530″ height=”307″  paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″                        paddingBottom=”10″ x=”213.5″ y=”143″ borderColor=”#A56060″ fontSize=”12″>

        <mx:Text width=”100%” color=”#834355″ text=”Drag the divider side to side to resize the children.” fontWeight=”bold” fontSize=”11″/>

        <mx:HDividedBox width=”100%” height=”100%”>
           <mx:VDividedBox width=”100%” height=”100%” >
             <mx:Canvas label=”Canvas 0″ width=”100%” height=”100%” backgroundColor=”#868717″ >
                 <mx:Label text=”Add components here” fontWeight=”bold” color=”#E4BEE0″  fontSize=”12″  height=”22″/>
             </mx:Canvas>
             <mx:Canvas label=”Canvas 1″ width=”100%” height=”100%” backgroundColor=”#868717″ >
                 <mx:Label text=”Add components here” fontWeight=”bold” color=”#E4BEE0″ fontSize=”12″/>
            </mx:Canvas>
           </mx:VDividedBox>

            <mx:Canvas label=”Canvas 2″ width=”100%”  height=”100%” backgroundColor=”#2C6198″>
                <mx:Label text=”Add components here” fontWeight=”bold” color=”#CDDC28″ fontSize=”12″/>
            </mx:Canvas>

        </mx:HDividedBox>

    </mx:Panel>
</mx:Application>

Thanks & Regards,
R.Kasi Ruby