flex----常规组件

1.Alert

Alert.OK = 1;
Alert.YES = 2;
Alert.NO = 4
Alert.CANCEL = 8;
Alert.show("Do you want to save your changes?","Save Changes",3,this,alertClickHandler);//this代表父对象，Save Changes是显示的标题
Alert.show("Do you want to save your changes?","Save Changes",1|2,this,alertClickHandler);//效果一样，因为|就是二进制求和表达
//这里3=1+2意思是显示ok和yes按钮

 private function alertClickHandler(event:CloseEvent):void {
                if (event.detail==Alert.YES)
                    status.text="You answered Yes";
                else
                    status.text="You answered No";
            }
  private function secondClickHandler(event:Event):void { //在Alert.show之前可以设置宽度等一系列的属性
                Alert.buttonWidth = 100;
                Alert.yesLabel = "Magenta";
                Alert.noLabel = "Blue";
                Alert.cancelLabel = "Green";

                Alert.show("Select a color:","Color Selection",1|2|8,this);
                
                // Set the labels back to normal:
                Alert.yesLabel = "Yes"; //因为修改了，这里修改回来
                Alert.noLabel = "No";                
            }     

2.颜色拾取器 ColorPicker 

<mx:ColorPicker id="cp" showTextField="true" selectedColor="0xFFFFFF"/>
    
        <mx:VBox width="100%" height="100%" backgroundColor="{cp.selectedColor}" borderStyle="solid"/>

3。下拉列表，相当于html中的select

<mx:ComboBox dataProvider="{cards}" width="150" 
            close="closeHandler(event);"/>

//他可以解析这样的json ,close表示在选择改变的时候触发

             [Bindable]
            public var cards:ArrayCollection = new ArrayCollection(
                [ {label:"Visa", data:1}, 
                  {label:"MasterCard", data:2}, 
                  {label:"American Express", data:3} ]);
        
            private function closeHandler(event:Event):void {
                myLabel.text = "You selected: " +  ComboBox(event.target).selectedItem.label;
                myData.text = "Data: " +  ComboBox(event.target).selectedItem.data;
            }  

4。横向列表，columnCount="3"表示只有三列，columnWidth="125"表示每一列的长度

 <mx:HorizontalList id="CameraSelection" height="250" columnCount="3" columnWidth="125">
 //这里的数据提供者也可以用json  ,这里是用的标签的形式
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="Nokia 6630" icon="{phone1}"/>
                    <mx:Object label="Nokia 6680" icon="{phone2}"/>
                    <mx:Object label="Nokia 7610" icon="{phone3}"/>
                   <mx:Object label="Nokia 7610" icon="{phone4}"/>

                </mx:Array>
            </mx:dataProvider>
        </mx:HorizontalList>
            
             [Bindable]
             [Embed(source="../assets/nokia6630.png")]
             public var phone1:Class;
             
             [Bindable]
             [Embed(source="../assets/Nokia6680.png")]
             public var phone2:Class;
             
             [Bindable]
             [Embed(source="../assets/Nokia7610.png")]
             public var phone3:Class;            

5。纵向列表
 <mx:TileList id="CameraSelection" height="250" width="300" 
            maxColumns="2" rowHeight="225" columnWidth="125">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="Nokia 6630" icon="{phone1}"/>
                    <mx:Object label="Nokia 6680" icon="{phone2}"/>
                    <mx:Object label="Nokia 7610" icon="{phone3}"/>
                    <mx:Object label="Nokia LGV" icon="{phone4}"/>
                    <mx:Object label="Nokia LMV" icon="{phone5}"/>
                </mx:Array>
            </mx:dataProvider>
        </mx:TileList>
和横向差不多       



6。List 相当于html中select被展开后的样子

              [Bindable]
            public var selectedItem:Object;//使得这个对象可以联动


 <mx:List id="source" width="100%" color="blue"
            dataProvider="{mystates.state}"
            change="this.selectedItem=List(event.target).selectedItem"/>

 <mx:Model id="mystates">
      <states>
        <state label="Alabama" data="AL"/>
        <state label="Alaska" data="AK"/>
        <state label="Arizona" data="AZ"/>
        <state label="Arkansas" data="AR"/>
        <state label="California" data="CA"/>
        <state label="Colorado" data="CO"/>
        <state label="Connecticut" data="CT"/>
      </states>
    </mx:Model>

 
7。Tree
labelField="@label"是告诉组件，自定义的xml的lable是什么，showRoot="false" 表示不显示像 <node label="Mail Box">这样的根元素


 <mx:Script>
        <![CDATA[

            [Bindable]
            public var selectedNode:XML; //为什么要转换成xml，因为这样可以使用xpath

            // Event handler for the Tree control change event.
            public function treeChanged(event:Event):void {
                selectedNode=Tree(event.target).selectedItem as XML;
            }
        ]]>
    </mx:Script>

    <mx:XMLList id="treeData">
	    <node label="Mail Box">
	        <node label="Inbox">
	            <node label="Marketing"/>
	            <node label="Product Management"/>
	            <node label="Personal"/>
	        </node>
	        <node label="Outbox">
	            <node label="Professional"/>
	            <node label="Personal"/>
	        </node>
	        <node label="Spam"/>
	        <node label="Sent"/>
		</node>	
    </mx:XMLList>

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

        <mx:Label width="100%" color="blue" 
            text="Select a node in the Tree control."/>

        <mx:HDividedBox width="100%" height="100%">
            <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
                showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
            <mx:TextArea height="100%" width="50%"
                text="Selected Item: {selectedNode.@label}"/>
        </mx:HDividedBox>
        
    </mx:Panel>    

8。数据表格
 <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>[e-mail]</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>[e-mail]</email>
            <active>true</active>
        </employee>   
 </mx:XMLList>        
        
 <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
 </mx:DataGrid>
 
 把xml中的对应东西放到这个数据表格中，headerText是表头文字，
 注意，组件本身就是一个能动态感知的对象
 
 <mx:Label text="{dg.selectedItem.name}"/>