flex----常规组件

[code]

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>ccoenraets@fictitious.com</email>
<active>true</active>
</employee>
<employee>
<name>Joanne Wall</name>
<phone>555-219-2012</phone>
<email>jwall@fictitious.com</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}"/>

[/code]