flex组件学习3_DividedBox_VDividedBox_HDividedBox

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<!--The DividedBox layout container lays out its children horizontally or vertically, 
	
	similar to a Box container, except that it inserts a divider between each child. 
	
	You can use a mouse pointer to move the dividers in order to resize the area of the container allocated to each child.
	
	 You use the direction property of a DividedBox container to determine vertical (default) or horizontal layout. 
	 
	The HDividedBox and VDividedBox containers are DividedBox containers with horizontal and vertical direction property values-->
	
	<!--这个dividedBox 规定来他的子组件 横向或者纵向 ，你可以用鼠标点 移动这些分隔符？分配给每个子组件 
	 
	 你可以用 direction 这个属性 来确定 垂直（vertical默认）或者水平horizontal 
	 
	 这个HDividedBox 和 VDividedBox 容器其实是 DividedBox direction属性指定的不同value的实现而已
	 
	 文档中还说可拖动？拖动divided分隔那块？？没明白
	 -->
	  <mx:Script>
      <![CDATA[
        private function myGrid_initialize():void {
          myGrid.dataProvider = [
            {Artist:'Pavement', Album:'Slanted and Enchanted', 
                Price:11.99, Comment:'One of their best. 4 Stars.'},
            {Artist:'Pavement', Album:'Brighten the Corners', 
                Price:11.99, Comment:'My favorite.'}
          ];
        }
      ]]>
    </mx:Script>
	<!--HDividedBox指定水平，所以 tree1与 DataGird,TextArea左右有空格
		--> 
    <mx:HDividedBox width="100%" height="100%">
        <mx:Tree id="tree1" 
            width="30%" height="100%"
            labelField="@label" 
            showRoot="true">
            <mx:XMLList>
                <menuitem label="Products">
                    <menuitem label="Posters" isBranch="true"/>
                    <menuitem label="CDs">
                        <menuitem label="Pavement"/>
                        <menuitem label="Pavarotti"/>
                        <menuitem label="Phish"/>
                    </menuitem>
                    <menuitem label="T-shirts" isBranch="true"/>
                    <menuitem label="Tickets" isBranch="true"/>
                </menuitem>
            </mx:XMLList>
        </mx:Tree>

        <mx:VDividedBox width="70%" height="100%" >
        	<!--应为是vertical Divided BOx(垂直布局) 所以 myGrid&currentMessage上下有分隔-->
            <mx:DataGrid id="myGrid" 
                width="100%" height="100%" 
                initialize="myGrid_initialize();"
                change="currentMessage.text=
                    event.currentTarget.selectedItem.Comment;"/>
            <!--这有分割符号-->
            <mx:TextArea id="currentMessage"
                width="100%" 
                height="60" 
                text="One of their best. 4 Stars."/>
        </mx:VDividedBox>

    </mx:HDividedBox>

</mx:Application>