flex-container
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 听名字就知道是什么