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