flex----container

1。ApplicationControlBar主要用于导航的，dock="true"表示这个组件会自动放到容器最上面，他只能进行水平布局.

2。Canvas 只能进行绝对布局的容器

3。HBox和VBox当水平或者垂直一部分组件的时候，使用它们。gap是元素之间的间隔

4。HDividedBox和VDividedBox通常用于把panel分成几个区域，重要属性：live dragging 如果为true,那么中间的那个分割线被拖动时候，两边大小实时改变，
false表示当鼠标拖动结束放下后两边大小才改变

5。Panel 的重要属性：title.

6。TitleWindow 就比panel多了一个属性：showCloseButton=“true”的时候多一个小叉叉，点击这个叉叉就会触发doClose()事件
要不然就和面板一样了,他主要用于弹出框

下面是弹出窗口的例子：
先自定义一个弹出窗口
【1】。
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" showCloseButton="true" title="动态TitleWindow演示" fontSize="12" backgroundColor="#FBFCFB" borderColor="#4BF00A" themeColor="#039BFC" cornerRadius="8" alpha="1.0" close="doClose()">
	<mx:Script>
	<![CDATA[
	
		import mx.managers.PopUpManager;
		
		internal function doClose():void
		{
			PopUpManager.removePopUp(this);//关闭就是销毁自己
			
		}
	]]>
</mx:Script>
</mx:TitleWindow>

【2】。

<?xml version="1.0" encoding="utf-8"?>
<!-- Main application to demonstrate TitleWindow layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">

    <mx:Script>
        <![CDATA[
       
            import mx.managers.PopUpManager;
            import mx.containers.TitleWindow;
             import flash.geom.Point;

            private var point1:Point = new Point();
      
            // Open the TitleWindow container.
            // Cast the return value of the createPopUp() method
            // to SimpleTitleWindowExample, the name of the 
            // component containing the TitleWindow container.
            private function showWindow():void {
                //var login:SimpleTitleWindowExample=SimpleTitleWindowExample(PopUpManager.createPopUp( this, SimpleTitleWindowExample , true));
                 
                var newWin:MyTitleWindow=new MyTitleWindow();
                               
                point1.x=0;
                point1.y=0;                
                point1=newWin.localToGlobal(point1);//本地转全局坐标
                newWin.x=point1.x+25;
                newWin.y=point1.y+25;
                                

				PopUpManager.addPopUp(newWin,this,false); //弹出窗口管理器，弹出谁，在谁上弹出，false表示可拖动模式
				
                // Calculate position of TitleWindow in Application's coordinates.
                // Position it 25 pixels down and to the right of the Button control.

             
                // Pass a reference to the TextInput control
                // to the TitleWindow container so that the 
                // TitleWindow container can return data to the main application.

            }
            
        ]]>
    </mx:Script>

    <mx:Panel id="win" title="TitleWindow Container Example" height="220" width="300" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" x="68" y="24">

        <mx:Button id="myButton" label="Click to open the TitleWindow container" 
            click="showWindow();"/>
        
        <mx:Text id="returnedName" text="点击上面按钮弹出个TitleWindow" width="100%" fontSize="12" color="#09C7F0" fontWeight="bold"/>

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


------------------------------------------------------------
7。表单容器

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate Form layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
		]]>
	</mx:Script>
	
	
    <mx:Model id="checkModel">
        <User>
            <FirstName>{fname.text}</FirstName>
            <DOB>{dob.text}</DOB>
            <Email>{email.text}</Email>
            <Age>{age.text}</Age>
            <SSN>{ssn.text}</SSN>
            <Zip>{zip.text}</Zip>
            <Phone>{phone.text}</Phone>
        </User>
    </mx:Model>

    <mx:Panel title="Form Container Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue"
            text="Moving from one form field to another triggers the validator."/>

        <mx:Form width="100%" height="100%" fontSize="12">
            <mx:FormHeading label="Enter values into the form."/>

            <mx:FormItem label="First name">
                <mx:TextInput id="fname" width="200"/>
            </mx:FormItem>

            <mx:FormItem label="Date of birth (mm/dd/yyyy)">
                <mx:TextInput id="dob" width="200"/>
            </mx:FormItem>

            <mx:FormItem label="E-mail address">
                <mx:TextInput id="email" width="200"/>
            </mx:FormItem>

            <mx:FormItem label="Age">
                <mx:TextInput id="age" width="200"/>
            </mx:FormItem>

            <mx:FormItem label="SSN">
                <mx:TextInput id="ssn" width="200"/>
            </mx:FormItem>

            <mx:FormItem label="Zip">
                <mx:TextInput id="zip" width="200"/>
            </mx:FormItem>

            <mx:FormItem label="Phone">
                <mx:TextInput id="phone" width="200"/>
            </mx:FormItem>
        </mx:Form>

    </mx:Panel>

    <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12" 
    	tooShortError="名字太短了" tooLongError="名字太长了"/>
    <mx:PhoneNumberValidator source="{phone}" property="text"/>
    <mx:DateValidator source="{dob}" property="text"/>
    <mx:EmailValidator source="{email}" property="text"/>
    <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
        minValue="18" maxValue="100" domain="int" invalid="Alert.show('请输入数字！');"/>
    <mx:SocialSecurityValidator source="{ssn}" property="text"/>
    <mx:ZipCodeValidator source="{zip}" property="text"/>

</mx:Application>

--------------------------------------------------------------------

8。Tile  瓦片，就是平铺的布局，重要属性：direction,按照什么方向来平铺

9。Grid: 网格容器
例子：
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Grid layout container.-->
<mx:Application borderStyle="none" xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Panel title="Grid Container Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Label width="100%" color="blue" 
            text="A 3 by 3 Grid container of Button controls."/>

        <mx:Grid>
            <mx:GridRow>
                <mx:GridItem rowSpan="3">
                    <mx:Button label="Row 1 Col 1" width="100" height="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:CheckBox label="Checkbox"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 1 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <mx:Button label="Row 2 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem colSpan="2">
                    <mx:Button label="Row 2 Col 2" width="200"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 2 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <mx:Button label="Row 3 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 3 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 3 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>
        </mx:Grid>

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

10.Accordion 相当于qq展开好友列表的效果

   <mx:Accordion id="accordion" width="100%" height="100%">
            <!-- Define each panel using a VBox container. -->
            <mx:VBox label="Accordion Button for Panel 1" id="num1">
                <mx:Label text="Accordion container panel 1"/>
            </mx:VBox>

            <mx:VBox label="Accordion Button for Panel 2">
                <mx:Label text="Accordion container panel 2"/>
            </mx:VBox>

            <mx:VBox label="Accordion Button for Panel 3">
                <mx:Label text="Accordion container panel 3"/>
            </mx:VBox>
        </mx:Accordion>

        <mx:Label width="100%" color="blue"
            text="Programmatically select the panel using a Button control."/>

        <mx:HBox>
            <mx:Button label="Select Panel 1" click="accordion.selectedChild=num1;"/>
            <mx:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>
            <mx:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>
        </mx:HBox>

11。ViewStack 就是eclipse里面的Preferences里面的效果

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ViewStack layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

     <mx:Panel title="ViewStack Container Example" height="95%" width="95%" 
         paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue"
            text="Use the Button controls to change panels of the ViewStack container."/>

        <mx:HBox borderStyle="solid" width="100%"
            paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
            
            <mx:Button id="searchButton" label="Search Panel"
                click="myViewStack.selectedChild=search;"/>
            <mx:Button id="cInfoButton" label="Customer Info Panel"
                click="myViewStack.selectedChild=custInfo;"/>
            <mx:Button id="aInfoButton" label="newPanel"
                click="myViewStack.selectedChild=newPanel;"/>
        </mx:HBox>

        <!-- Define the ViewStack and the three child containers and have it
        resize up to the size of the container for the buttons. -->
        <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

            <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">
                <mx:Label text="Search Screen" color="#000000"/>
            </mx:Canvas>
            <mx:Panel id="newPanel" label="我的新面板" width="100%" height="100%" borderColor="#F01A1A">
            </mx:Panel>

            <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
                <mx:Label text="Customer Info" color="#000000"/>
            </mx:Canvas>

            <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%">
                <mx:Label text="Account Info" color="#000000"/>
            </mx:Canvas>
        </mx:ViewStack>

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


11。TabNavigator 听名字就知道是什么