Flex学习笔记_06 使用组件处理数据和交互_01常用组件（上）
Flex学习笔记_06 使用组件处理数据和交互_01常用组件（中）Flex学习笔记_06 使用组件处理数据和交互_01常用组件（下）
?
?
数据处理，实现交互动作的组件在mx.controls包中。
?
1. 常用组件的使用
?
1.1 Button 按钮
btn.addEventListener(MouseEvent.CLICK.doClick); 为按钮添加鼠标单击事件监听器。
所有可视化组件都有addEventListener方法，用于添加对特定事件的监听函数。它有5个参数：
type:String, 事件的类型
listener:Function, 执行的函数名
useCapture:Boolean=false,
priority:int=0,
useWeakReference:Boolean=false
?
MouseEvent 包含所有的鼠标事件。
?
使用<mx:Style>为程序设置样式，以下定义了整个程序的字体为12，背景颜色。
?
在按钮上插入图标： 点选按钮，找到Icon属性，在这里选择图标。对应的MXML代码：icon="@Embed('expand.gif')"。 必须将图标嵌入到SWF中。
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()"><mx:Style>Application{fontSize:12;backgroundGradientColors: #c0c0c0, #c0c0c0}</mx:Style><mx:Script><![CDATA[import mx.core.MovieClipAsset;[Embed(source="expand.gif")][Bindable] public var myIcon:Class;import flash.events.MouseEvent;internal function initApp():void{btn.addEventListener(MouseEvent.CLICK,doClick);}internal function doClick(evt:MouseEvent):void{btn.enabled = false;label_tip.text = "我是点击后的标签";}]]></mx:Script><mx:Button id="btn" x="26" y="74" label="Button" width="76" fillColors="[#004080, #8080ff]" borderColor="#000000" icon="{myIcon}"/><mx:Label id="label_tip" x="26" y="121" text="我是一个标签" width="258" height="31"/></mx:Application>?
1.2 CheckBox 复选框
由一段可选的文字和表示状态的图标组成，继承自Button。
记录用户的行为状态（是否选中），文字可选位置：位于组件的左边、右边（默认）、顶部、底部。
visible="{myCheck.selected}" 将visible和myCheck.selected绑定，一旦myCheck.selected变化，visible也会跟着变化。
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="340" height="300" fontSize="12" backgroundGradientColors="[#c0c0c0, #c0c0c0]"><mx:CheckBox id="myCheck" x="52" y="247" label="窗口不可见" selected="true" width="111" labelPlacement="right"/><mx:Panel id="myPanel" x="52" y="30" width="250" height="200" layout="absolute" title="窗口" visible="{myCheck.selected}"></mx:Panel></mx:Application>?1.3 RadioButton 单选框
一组Button的集合，供用户多选一。
要保证RadioButton 成为一组，使得选择的结果具有唯一性，groupName属性必须相同。
或者使用RadioButtonGroup组件也可以实现，可以控制一组RadioButton的状态，在监听用户行为时非常方便。RadioButton的groupName属性必须与RadioButtonGroup的id同名。
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" label="Radio" fontSize="12"><mx:RadioButtonGroup id="flex"/><mx:RadioButton groupName="flex" x="67" y="106" label="1999" id ="item1"/><mx:RadioButton groupName="flex" x="67" y="184" label="2004" id ="item2"/><mx:RadioButton groupName="flex" x="67" y="210" label="2005" id ="item3"/><mx:RadioButton groupName="flex" x="67" y="132" label="2001" id ="item4"/><mx:RadioButton groupName="flex" x="67" y="158" label="2003" id ="item5"/><mx:Label x="55" y="78" text="Flex是哪一年发布的？"/><mx:Label id="answer_txt" x="159" y="258" width="139"/><mx:Button x="55" y="257" label="提交" click="answer_txt.text =(flex.selection == item2?'正确!':'错误')"/></mx:Application>
?
1.4 ButtonBar
也是Button的集合，提供导航功能。
适合只有若干个相关选择，不需要记录用户的状态的情况下使用。
btns.dataProvider = data_arr; 利用AS给ButtonBar传递数据源。根据数据源自动显示。
MXML代码中对ButtonBard的itemClick事件进行了监听。
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()"><mx:Style source="style.css"/><mx:Script><![CDATA[import mx.events.ItemClickEvent; internal function initUI():void{var data_arr:Array = new Array();data_arr.push("Flex");data_arr.push("Flash");data_arr.push("Flash Media Server");data_arr.push("Flex Data Server");btns.dataProvider = data_arr;}internal function btn_click_handler(evt:ItemClickEvent):void{tip_txt.text = "点击的按钮："+evt.index+":"+evt.label;}]]></mx:Script><mx:ViewStack id="vs"> <mx:VBox label="Accounts"/> <mx:VBox label="Leads"/> </mx:ViewStack> <mx:ButtonBar id="btns" styleName="Btns" horizontalGap="5" x="10" y="122" itemClick="btn_click_handler(event)"/><mx:Label id="tip_txt" x="10" y="193" text="没有点击按钮" height="27" width="261"/><mx:TabBar x="69" y="276"></mx:TabBar></mx:Application>?
<mx:Style source="style.css"/> 从外部引入CSS样式表。
.Btns 定义一个样式。在组件的styleName可以设置，如：styleName="Btns"
文件内容如下：
Application{fontSize:12;}.Btns{ buttonStyleName: "mybuttonBarButtonStyle"; firstButtonStyleName: "mybuttonBarFirstButtonStyle"; lastButtonStyleName: "mybuttonBarLastButtonStyle";}.mybuttonBarButtonStyle { color: #990000;}.mybuttonBarFirstButtonStyle { cornerRadius: 4;}.mybuttonBarLastButtonStyle { cornerRadius: 4;}?LinkBar和ButtonBar 用法相似。不过他是将LinkButton组合在一起。
?
1.5 ComboBox 下拉选择框
使用ComboBox 重点要理解 DropdownEvent 事件。在列表被弹出或收回时，会分别触发DropdownEvent 的OPEN 和 CLOSE 事件。
bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler) 对CLOSE事件进行了监听。
利用 selectedItem 属性，可以跟踪到用户当前的选择项，层级关系： ComboBox -> ComboBase -> UICompoent
?
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()"><mx:Script><![CDATA[import mx.events.DropdownEvent;internal function initUI():void{var info:Array = new Array();info.push({label:"Book 1" ,data:"1"});info.push({label:"Book 2" ,data:"2"});info.push({label:"Book 3" ,data:"3"});bookList.dataProvider = info;bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler)}internal function chooseHandler(evt:DropdownEvent):void{var item:Object = bookList.selectedItem;tip_txt.text = "Select:Label:"+item.label+":data:"+item.data;}]]></mx:Script><mx:ComboBox id="bookList" x="30" y="86" width="160"></mx:ComboBox><mx:TextArea id="tip_txt" x="30" y="129" height="182" width="178"/></mx:Application>?1.6 List 列表组件
层级关系： List ->ListBse ->ScrollControlBase ->UICompoent
在获得数据源后，List组件会分析数据，将每条数据以默认的形式展现出来，这种用来控制数据表现形式的机制称之为 itemRenderer。
可以定义自己的itemRenderer对象，覆盖默认的属性。
拥有data属性是 可以用来作为 itemRenderer 的组件的特点。
Model 标签主要用于定义数据，这些数据经过编译被转化为一般的AS数据对象，可以用做数据绑定。不同的是这些数据不可修改，并且没有明确的数据类型。
image.item 包括了XML数据中所有节点为item的数据，通过dataProvider 属性将数据传递给List组件。
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12"><mx:Model id="images"> <image> <item label="图片1" data="images/Baby01.gif"/> <item label="图片2" data="images/Baby02.gif"/> <item label="图片3" data="images/Baby03.gif"/> <item label="图片4" data="images/Baby04.gif"/> </image> </mx:Model><mx:List dataProvider="{images.item}" itemRenderer="ImageItem" x="41" y="52" height="235" width="130"></mx:List></mx:Application>?
我们创建一个itemRenderer 上面的代码可调用。
itemRenderer="ImageItem" 证明我们使用刚创建的 itemRenderer 替换List默认的itemRendere。
Flex是通过 data 属性将数据传递给 itemRenderer 的，在下面代码中直接调用data 就可以了，但并不对数据进行有效性验证。
这里的data代表了上面代码中的item元素。通过data.label来调用item的label属性。
<?xml version="1.0" encoding="utf-8"?><mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Image width="32" height="32" source="{data.data}"/><mx:Button x="38" y="40" label="{data.label}"/></mx:HBox>?1.7 Alert 提示对话框
Alert 组件是一个带有提示信息的弹出式对话框。它出现之后，暂时中止当前的所有用户的交互动作，直到用户关闭窗口。
Alert.show(
? text,? 提示信息
? title,? 标题
? flags,? 代表了窗口出现的按钮：Alert.OK | Alert.CANCEL | Alert.YES | Alert.NO
? parent,? 对话框居中的参照对象
? closeHandle,? 函数类型，用来捕捉用户的选择
? iconClass,? 对话中出现的图标
? defaultButtonFlag? 对话中默认处于被选状态的按钮
)
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" fontSize="12"><mx:Script><![CDATA[import mx.controls.Alert;import flash.events.MouseEventimport mx.events.CloseEvent;internal function initApp():void{btn.addEventListener(MouseEvent.CLICK,handler);}internal function handler(evt:MouseEvent):void{Alert.show("确定要删除所有的图片？","提示信息",Alert.YES | Alert.NO,this,selectHandler, null,Alert.NO);}internal function selectHandler(evt:CloseEvent):void{if (evt.detail==Alert.YES){status_txt.text = "选择的是：Yes"}else{status_txt.text = "选择的是：No"}}]]></mx:Script><mx:Button id="btn" x="85" y="168" label="Delete All Images" width="187"/><mx:Label id="status_txt" x="85" y="128" text="目前还没有选择" width="105"/></mx:Application>