Making a dashboard with DividedBox : DividedBox « Container « Flex

1. Flex
2. Container
3. DividedBox

Making a dashboard with DividedBox

  

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="Report Dashboard" verticalCenter="0" horizontalCenter="0">
        <mx:DividedBox direction="horizontal" width="100%">
            <s:VGroup height="100%">
                <mx:Text text="A" fontWeight="bold" />
                <mx:Button label="B" width="100%" />
                <mx:Button label="C" width="100%" />
            </s:VGroup>
            <mx:VDividedBox width="50%" height="100%">
                <s:VGroup width="100%">
                    <mx:Text text="Reports" fontWeight="bold" />
                    <mx:Text text="Q1 Sales" />
                    <mx:Text text="Q2 Sales" />
                </s:VGroup>
                <s:VGroup width="100%">
                    <mx:Text text="Q1 Sales" fontWeight="bold" />
                    <mx:Text text="America: $2" />
                    <mx:Text text="Europe:  $1" />
                </s:VGroup>
            </mx:VDividedBox>
        </mx:DividedBox>
    </mx:Panel>
</mx:Application>

   
    
  

Related examples in the same category

1.	Creating a DividedBox, HDividedBox, and VDividedBox container
2.	Use VDividedBox
3.	Use VDividedBox to hold List
4.	Use DividedBox
5.	Use HDividedBox