Flex学习笔记_05 使用组件处理数据和交互_01常用组件

数据处理，实现交互动作的组件在mx.controls包中。

 

1. 常用组件的使用

 

1.1 Button 按钮

      Flex Button控件是Flex中最基本也是相对简单的控件之一，基本对他没有什么特殊需求，他的那么多属性完全可以满足我们的需求，而且我们只需要了解几个关键的常用属性便OK。如下常用属性：

1、emphasized：获取或设置一个布尔值，指示当按钮处于弹起状态时，Button组件周围是否绘有边框。默认为：false

2、Label:按扭上显示的文本。

3、Icon:按扭上显示的图标。如：icon="@Embed('Images/mm-icon.png')",button有基本各种状态都有icon，要把Flex Button控件搞好最主要还是看美工的功底。

4、click:按扭的监听单击事件所的方法。除了click也可以监听它的其他识见，如mouseMove、mouseOver、mouseOut、rollOver、rollOut、mouseDown和mouseUp。

下面是tourFlex中的一个例子

viewplaincopytoclipboardprint?  <?xmlversionxmlversion="1.0"encoding="utf-8"?> <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="horizontal"viewSourceURL="srcview/index.html" verticalAlign="middle"horizontalAlign="center"backgroundGradientColors="[0x000000,0x323232]"> <mx:Script> <!--[CDATA[  importmx.controls.Alert;  ]]--> </mx:Script> <mx:Paneltitlemx:Paneltitle="ButtonControlExample"layout="vertical"height="100"color="0xffffff"borderAlpha="0.15" paddingTop="10"paddingRight="10"paddingBottom="10"paddingLeft="10"horizontalAlign="center">  <mx:HBoxhorizontalGapmx:HBoxhorizontalGap="10"verticalAlign="middle"> <!--normalbutton--> <mx:Buttonidmx:Buttonid="defaultButton"color="0x323232"label="DefaultButton"click="{Alert.show('DefaultButtonPressed');}"/>  <mx:Buttonidmx:Buttonid="iconButton"label="ButtonWithIcon"labelPlacement="right"paddingLeft="2"  icon="@Embed('assets/Flex_icon.png')"downIcon="@Embed('assets/Flex_icon_dwn.png')"  color="0x323232"click="{Alert.show('ButtonWithIconPressed');}"/>  <mx:Buttonidmx:Buttonid="skinnedButton"label="SkinnedButton"width="150"upSkin="@Embed('assets/btn_up.png')"  overSkin="@Embed('assets/btn_over.png')"downSkin="@Embed('assets/btn_down.png')"  focusSkin="@Embed('assets/btn_focus.png')"disabledSkin="@Embed('assets/btn_disabled.png')"  color="0x323232"textRollOverColor="0xffffff"textSelectedColor="0xffffff"paddingLeft="20"  click="{Alert.show('SkinnedButtonPressed');}"/>  <mx:Buttonidmx:Buttonid="customButton"label="CUSTOMBUTTON"fontFamily="Arial"fontStyle="italic"fontWeight="normal"cornerRadius="12"  color="0xffffff"fillColors="[0x55C0FF,0x0050AA]"fillAlphas="[1.0,1.0]"highlightAlphas="[1.0,0.2]"focusAlpha="0.2" textRollOverColor="0xffffff"textSelectedColor="0x55C0FF"click="{Alert.show('CUSTOMBUTTONPressed');}"/> </mx:HBox> </mx:Panel> </mx:Application> <?xmlversionxmlversion="1.0"encoding="utf-8"?> <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="horizontal"viewSourceURL="srcview/index.html" verticalAlign="middle"horizontalAlign="center"backgroundGradientColors="[0x000000,0x323232]"> <mx:Script> <!--[CDATA[  importmx.controls.Alert;  ]]--> </mx:Script> <mx:Paneltitlemx:Paneltitle="ButtonControlExample"layout="vertical"height="100"color="0xffffff"borderAlpha="0.15" paddingTop="10"paddingRight="10"paddingBottom="10"paddingLeft="10"horizontalAlign="center">  <mx:HBoxhorizontalGapmx:HBoxhorizontalGap="10"verticalAlign="middle"> <!--normalbutton--> <mx:Buttonidmx:Buttonid="defaultButton"color="0x323232"label="DefaultButton"click="{Alert.show('DefaultButtonPressed');}"/>  <mx:Buttonidmx:Buttonid="iconButton"label="ButtonWithIcon"labelPlacement="right"paddingLeft="2"  icon="@Embed('assets/Flex_icon.png')"downIcon="@Embed('assets/Flex_icon_dwn.png')"  color="0x323232"click="{Alert.show('ButtonWithIconPressed');}"/>  <mx:Buttonidmx:Buttonid="skinnedButton"label="SkinnedButton"width="150"upSkin="@Embed('assets/btn_up.png')"  overSkin="@Embed('assets/btn_over.png')"downSkin="@Embed('assets/btn_down.png')"  focusSkin="@Embed('assets/btn_focus.png')"disabledSkin="@Embed('assets/btn_disabled.png')"  color="0x323232"textRollOverColor="0xffffff"textSelectedColor="0xffffff"paddingLeft="20"  click="{Alert.show('SkinnedButtonPressed');}"/>  <mx:Buttonidmx:Buttonid="customButton"label="CUSTOMBUTTON"fontFamily="Arial"fontStyle="italic"fontWeight="normal"cornerRadius="12"  color="0xffffff"fillColors="[0x55C0FF,0x0050AA]"fillAlphas="[1.0,1.0]"highlightAlphas="[1.0,0.2]"focusAlpha="0.2" textRollOverColor="0xffffff"textSelectedColor="0x55C0FF"click="{Alert.show('CUSTOMBUTTONPressed');}"/> </mx:HBox> </mx:Panel> </mx:Application> 

 

不要被Flex Button控件那么多的属性给吓到，其实很多都是icon和style。

说到Button技术上，我用的最多的还是利用Flex Button控件的自定义事件：

viewplaincopytoclipboardprint?  
<mx:TitleWindowxmlns:mxmx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml" 
 
width="286"height="208"layout="absolute"title="用户登录"> 
<mx:Metadata> 
[Event("btnClicked")]  
</mx:Metadata> 
<mx:Script> 
<!--[CDATA[  
[Inspectable]  
publicvarstatus:String;  
 
privatefunctionlogin():void{  
dispatchEvent(newEvent("btnClicked"));  
}  
]]--> 
</mx:Script> 
<mx:Formwidthmx:Formwidth="248"height="100"label="Button"x="10"y="10"> 
<mx:FormItemlabelmx:FormItemlabel="用户名"fontSize="12"> 
<mx:TextInputidmx:TextInputid="username"width="158"height="28"fontSize="15"textAlign="left"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="密码"fontSize="12"> 
<mx:TextInputidmx:TextInputid="password"width="159"height="30"fontSize="15"textAlign="left" 
displayAsPassword="true"/> 
</mx:FormItem> 
</mx:Form> 
<mx:Buttonidmx:Buttonid="loginbtn"click="login()"label="登录"textAlign="center"fontSize="12"x="190"y="118"/> 
</mx:TitleWindow> 
<mx:TitleWindowxmlns:mxmx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml" 
 
width="286"height="208"layout="absolute"title="用户登录"> 
<mx:Metadata> 
[Event("btnClicked")]  
</mx:Metadata> 
<mx:Script> 
<!--[CDATA[  
[Inspectable]  
publicvarstatus:String;  
 
privatefunctionlogin():void{  
dispatchEvent(newEvent("btnClicked"));  
}  
]]--> 
</mx:Script> 
<mx:Formwidthmx:Formwidth="248"height="100"label="Button"x="10"y="10"> 
<mx:FormItemlabelmx:FormItemlabel="用户名"fontSize="12"> 
<mx:TextInputidmx:TextInputid="username"width="158"height="28"fontSize="15"textAlign="left"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="密码"fontSize="12"> 
<mx:TextInputidmx:TextInputid="password"width="159"height="30"fontSize="15"textAlign="left" 
displayAsPassword="true"/> 
</mx:FormItem> 
</mx:Form> 
<mx:Buttonidmx:Buttonid="loginbtn"click="login()"label="登录"textAlign="center"fontSize="12"x="190"y="118"/> 
</mx:TitleWindow> 

 

然后使用

viewplaincopytoclipboardprint?  <?xmlversionxmlversion="1.0"encoding="utf-8"?> <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:widget="*"> <mx:Script> <!--[CDATA[  importmx.controls.Alert;  privatefunctionbtnClick():void{  Alert.show("test","Test");  }  privatefunctionbtnClickHandler(event:Event):void{  Alert.show("EventbtnClickedCalled");  }  ]]--> </mx:Script> <mx:Buttonidmx:Buttonid="bb"x="107"y="37"label="Button"click="btnClick()"/> <widget:CLoginbtnClickedwidget:CLoginbtnClicked="btnClickHandler(event)"x="107"y="94"width="204"height="117"> </widget:CLogin> </mx:Application> 

 

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中。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">  
3.<mx:Style>  
4.    Application{   
5.        fontSize:12;       
6.        backgroundGradientColors: #c0c0c0, #c0c0c0   
7.    }   
8.</mx:Style>  
9.<mx:Script>  
10.    <![CDATA[  
11.        import mx.core.MovieClipAsset;  
12.        [Embed(source="expand.gif")]  
13.        [Bindable]   
14.        public var myIcon:Class;  
15. 
16. 
17.        import flash.events.MouseEvent;  
18.          
19.        internal function initApp():void{  
20.            btn.addEventListener(MouseEvent.CLICK,doClick);  
21.        }  
22.        internal function doClick(evt:MouseEvent):void{  
23.            btn.enabled = false;  
24.            label_tip.text = "我是点击后的标签";  
25.        }  
26.    ]]>  
27.</mx:Script>  
28.    <mx:Button id="btn" x="26" y="74" label="Button" width="76" fillColors="[#004080, #8080ff]" borderColor="#000000" icon="{myIcon}"/>      
29.    <mx:Label id="label_tip" x="26" y="121" text="我是一个标签" width="258" height="31"/>  
30.</mx:Application>  

 

1.2 CheckBox 复选框

由一段可选的文字和表示状态的图标组成，继承自Button。

记录用户的行为状态（是否选中），文字可选位置：位于组件的左边、右边（默认）、顶部、底部。

visible="{myCheck.selected}" 将visible和myCheck.selected绑定，一旦myCheck.selected变化，visible也会跟着变化。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="340" height="300" fontSize="12" backgroundGradientColors="[#c0c0c0, #c0c0c0]">  
3.    <mx:CheckBox id="myCheck" x="52" y="247" label="窗口不可见" selected="true" width="111" labelPlacement="right"/>  
4.    <mx:Panel id="myPanel" x="52" y="30" width="250" height="200" layout="absolute" title="窗口" visible="{myCheck.selected}">  
5.    </mx:Panel>      
6.</mx:Application> 

1.3 RadioButton 单选框

一组Button的集合，供用户多选一。

要保证RadioButton 成为一组，使得选择的结果具有唯一性，groupName属性必须相同。

或者使用RadioButtonGroup组件也可以实现，可以控制一组RadioButton的状态，在监听用户行为时非常方便。RadioButton的groupName属性必须与RadioButtonGroup的id同名。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" label="Radio" fontSize="12">     
3.    <mx:RadioButtonGroup id="flex"/>  
4.       
5.    <mx:RadioButton groupName="flex" x="67" y="106" label="1999" id ="item1"/>  
6.    <mx:RadioButton groupName="flex" x="67" y="184" label="2004" id ="item2"/>  
7.    <mx:RadioButton groupName="flex" x="67" y="210" label="2005" id ="item3"/>  
8.    <mx:RadioButton groupName="flex" x="67" y="132" label="2001" id ="item4"/>  
9.    <mx:RadioButton groupName="flex" x="67" y="158" label="2003" id ="item5"/>  
10.    <mx:Label x="55" y="78" text="Flex是哪一年发布的？"/>  
11.       
12.    <mx:Label id="answer_txt"  x="159" y="258" width="139"/>  
13.    <mx:Button x="55" y="257" label="提交" click="answer_txt.text =(flex.selection == item2?'正确!':'错误')"/>  
14.</mx:Application>  

 

1.4 ButtonBar

也是Button的集合，提供导航功能。

适合只有若干个相关选择，不需要记录用户的状态的情况下使用。

btns.dataProvider = data_arr; 利用AS给ButtonBar传递数据源。根据数据源自动显示。

MXML代码中对ButtonBard的itemClick事件进行了监听。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">  
3.<mx:Style source="style.css"/>           
4.<mx:Script>  
5.    <![CDATA[  
6.        import mx.events.ItemClickEvent;          
7.        internal function initUI():void{  
8.            var data_arr:Array = new Array();  
9.            data_arr.push("Flex");  
10.            data_arr.push("Flash");  
11.            data_arr.push("Flash Media Server");  
12.            data_arr.push("Flex Data Server");  
13.              
14.            btns.dataProvider = data_arr;  
15.        }  
16.          
17.        internal function btn_click_handler(evt:ItemClickEvent):void{  
18.            tip_txt.text = "点击的按钮："+evt.index+":"+evt.label;  
19.        }  
20.    ]]>  
21.</mx:Script>  
22.  
23.    <mx:ViewStack id="vs">  
24.        <mx:VBox label="Accounts"/>  
25.        <mx:VBox label="Leads"/>  
26.    </mx:ViewStack>    
27.       
28.    <mx:ButtonBar id="btns" styleName="Btns"  horizontalGap="5" x="10" y="122" itemClick="btn_click_handler(event)"/>  
29.    <mx:Label id="tip_txt" x="10" y="193" text="没有点击按钮" height="27" width="261"/>  
30.    <mx:TabBar x="69" y="276">  
31.    </mx:TabBar>  
32.  
33.</mx:Application>  

 

<mx:Style source="style.css"/> 从外部引入CSS样式表。

.Btns 定义一个样式。在组件的styleName可以设置，如：styleName="Btns"

文件内容如下：

1.Application{   
2.    fontSize:12;       
3.}   
4..Btns{   
5.    buttonStyleName: "mybuttonBarButtonStyle";   
6.    firstButtonStyleName: "mybuttonBarFirstButtonStyle";   
7.    lastButtonStyleName: "mybuttonBarLastButtonStyle";   
8.}   
9.  
10..mybuttonBarButtonStyle {   
11.    color: #990000;   
12.}   
13.  
14..mybuttonBarFirstButtonStyle {   
15.    cornerRadius: 4;   
16.}   
17.  
18..mybuttonBarLastButtonStyle {   
19.    cornerRadius: 4;   
20.}  

LinkBar和ButtonBar 用法相似。不过他是将LinkButton组合在一起。

 

1.5 ComboBox 下拉选择框

使用ComboBox 重点要理解 DropdownEvent 事件。在列表被弹出或收回时，会分别触发DropdownEvent 的OPEN 和 CLOSE 事件。

bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler) 对CLOSE事件进行了监听。

利用 selectedItem 属性，可以跟踪到用户当前的选择项，层级关系： ComboBox -> ComboBase -> UICompoent

 

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">  
3.    <mx:Script>  
4.        <![CDATA[  
5.            import mx.events.DropdownEvent;           
6.              
7.            internal function initUI():void{  
8.                var info:Array = new Array();  
9.                info.push({label:"Book 1" ,data:"1"});  
10.                info.push({label:"Book 2" ,data:"2"});  
11.                info.push({label:"Book 3" ,data:"3"});  
12.                bookList.dataProvider = info;  
13.                  
14.                bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler)  
15.            }  
16.            internal function chooseHandler(evt:DropdownEvent):void{  
17.                var item:Object = bookList.selectedItem;                  
18.                tip_txt.text = "Select:Label:"+item.label+":data:"+item.data;  
19.            }  
20.        ]]>  
21.    </mx:Script>  
22.    <mx:ComboBox id="bookList" x="30" y="86" width="160"></mx:ComboBox>  
23.    <mx:TextArea id="tip_txt" x="30" y="129" height="182" width="178"/>      
24.       
25.</mx:Application>  

 

1.6 List 列表组件

层级关系： List ->ListBse ->ScrollControlBase ->UICompoent

在获得数据源后，List组件会分析数据，将每条数据以默认的形式展现出来，这种用来控制数据表现形式的机制称之为itemRenderer 。

可以定义自己的itemRenderer 对象，覆盖默认的属性。

拥有data属性是 可以用来作为 itemRenderer 的组件的特点。

Model 标签主要用于定义数据，这些数据经过编译被转化为一般的AS数据对象，可以用做数据绑定。不同的是这些数据不可修改，并且没有明确的数据类型。

image.item 包括了XML数据中所有节点为item的数据，通过dataProvider 属性将数据传递给List组件。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">  
3.    <mx:Model id="images">  
4.      <image>  
5.        <item label="图片1" data="images/Baby01.gif"/>  
6.        <item label="图片2" data="images/Baby02.gif"/>  
7.        <item label="图片3" data="images/Baby03.gif"/>  
8.        <item label="图片4" data="images/Baby04.gif"/>  
9.      </image>  
10.    </mx:Model>      
11.    <mx:List dataProvider="{images.item}" itemRenderer="ImageItem" x="41" y="52" height="235" width="130">  
12.    </mx:List>  
13.</mx:Application>  

 

我们创建一个itemRenderer 上面的代码可调用。

itemRenderer="ImageItem" 证明我们使用刚创建的 itemRenderer 替换List默认的itemRendere 。

Flex是通过 data 属性将数据传递给 itemRenderer 的，在下面代码中直接调用data 就可以了，但并不对数据进行有效性验证。

这里的data代表了上面代码中的item元素。通过data.label来调用item的label属性。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">  
3.    <mx:Image width="32" height="32" source="{data.data}"/>  
4.    <mx:Button x="38" y="40" label="{data.label}"/>      
5.</mx:HBox>  

 

1.7 Alert 提示对话框

Alert 组件是一个带有提示信息的弹出式对话框。它出现之后，暂时中止当前的所有用户的交互动作，直到用户关闭窗口。

Alert.show(

  text,  提示信息

  title,  标题

  flags,  代表了窗口出现的按钮：Alert.OK | Alert.CANCEL | Alert.YES | Alert.NO

  parent,  对话框居中的参照对象

  closeHandle,  函数类型，用来捕捉用户的选择

  iconClass,  对话中出现的图标

  defaultButtonFlag  对话中默认处于被选状态的按钮

)

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" fontSize="12">  
3.<mx:Script>  
4.    <![CDATA[  
5.        import mx.controls.Alert;  
6.        import flash.events.MouseEvent  
7.        import mx.events.CloseEvent;  
8.          
9.        internal function initApp():void{  
10.            btn.addEventListener(MouseEvent.CLICK,handler);  
11.        }  
12.        internal function handler(evt:MouseEvent):void{  
13.            Alert.show("确定要删除所有的图片？","提示信息",Alert.YES | Alert.NO,this,selectHandler, null,Alert.NO);  
14.        }  
15.        internal function selectHandler(evt:CloseEvent):void{  
16.            if (evt.detail==Alert.YES){  
17.                status_txt.text = "选择的是：Yes"  
18.            }else{  
19.                status_txt.text = "选择的是：No"  
20.            }  
21.        }  
22.    ]]>  
23.</mx:Script>  
24.    <mx:Button id="btn" x="85" y="168" label="Delete All Images" width="187"/>  
25.    <mx:Label id="status_txt" x="85" y="128" text="目前还没有选择" width="105"/>  
26.       
27.</mx:Application>  

 

1.8 DataGrid 组件 -- 制作图书选购列表

DataGrid组件的作用和HTML页面中的表格类似，将数据以行、列的格式显示出来。

 

每一纵列的宽度不定，用户可以在运行时调整宽度。

可在运行时调整列的顺序

点击列标题栏可对列数据进行排序

可以自定义每列的标题栏

和List组件一样，可以自定义每个单元格的itemRenderer

 

使用Model定义数据源，

columns 定义了所有的列，其中DataGridColumn 代表一列的信息，dataField的值不可省略，这个值必须是数据源中每条数据包含的属性名，否则无法显示。headerText 表示列标题。

rowCount 表示显示的行数，如果height没有设置，则用这个属性来技术高度。height=rowCount*rowHeight行高。

selectedItem 属性代表当前选中行的数据，可以在数据绑定中，当它的值发生变化时，使用该属性的任何物件都会自动更新。

 

接着我们利用itemRenderer 在DataGrid中加入复选框创建组件：

在组件中添加一个复选框。并添加change事件的方法addCart。

this.parentApplication 表示父Application，就是我们后面使用该组件的Application。

new cartEvent(data,cart_check.selected)

addCart 方法创建了一个自定义事件 cartEvent 事件，并且将必要的属性传到该事件，

然后通过 dispatchEvent 派发该事件。

 

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">  
3.    <mx:Script>  
4.        <![CDATA[  
5.            import bookEvent.cartEvent;  
6.            internal function addCart():void{  
7.                this.parentApplication.dispatchEvent(new cartEvent(data,cart_check.selected));  
8.            }  
9.        ]]>  
10.    </mx:Script>  
11.    <mx:CheckBox id="cart_check" x="0" y="0" label="购买" change="addCart()"/>  
12.</mx:Canvas>  

 

以下为定义一个cartEvent 事件类：

所有的事件继承Event， 在构造函数中定义了两个参数：_data 和 _isAdd，创建事件的时候，将通过这两个参数将信息传入事件中。

super("AddBook") 调用父类Event 的构造函数，并把事件类型“AddBook”传递过去。只有调用了父类的构造函数，才能成为真正的事件对象。

1.package bookEvent   
2.{   
3.    import flash.events.Event;   
4.  
5.    public class cartEvent extends Event{   
6.        public var isAdd:Boolean;   
7.        public var book:Object;   
8.        function cartEvent(_data:Object,_isAdd:Boolean):void{   
9.            isAdd = _isAdd;   
10.            book = _data;   
11.               
12.            super("AddBook");   
13.        }   
14.    }   
15.}  

 

接下来是主程序。

在程序初始化函数中，addEventListener("AddBook",AddHandler) 为当前对象添加了对AddBook事件的监听。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12" creationComplete="initApp()">  
3.        <mx:Script>  
4.            <![CDATA[  
5.                import mx.events.DataGridEvent;  
6.                import mx.events.DataGridEventReason  
7.                import bookEvent.cartEvent;  
8.                import view.*;  
9.                  
10.                internal function initApp():void{  
11.                    addEventListener("AddBook",AddHandler);  
12.                }  
13.                internal function AddHandler(evt:cartEvent):void{  
14.                    if(evt.isAdd){  
15.                        tip_txt.text = "你选择购买："+evt.book.name;  
16.                    }else{  
17.                        tip_txt.text = "你放弃购买："+evt.book.name;  
18.                    }  
19.                }  
20.                  
21.                internal function checkInfo(evt:DataGridEvent):void{  
22.                    //如果没有作修改  
23.                    if (evt.reason == DataGridEventReason.CANCELLED){  
24.                        return;  
25.                    }  
26.                    //确定修改的属性  
27.                    if(evt.dataField == "date"){  
28.                        // 清除原来的数据  
29.                        evt.preventDefault();  
30.                        // 得到新的数据  
31.                        book_DG.editedItemRenderer.data.date = dateCell(DataGrid(evt.target).itemEditorInstance).num_year.value;  
32.                        // 关闭item editor  
33.                        book_DG.destroyItemEditor();   
34.                        //更新数据源   
35.                        book_DG.dataProvider.itemUpdated(evt.itemRenderer.data);  
36.                    }  
37.                }  
38.            ]]>  
39.        </mx:Script>  
40.        <mx:Model id="books">  
41.            <datas>  
42.                <book>  
43.                    <name>Flash第一步</name>  
44.                    <author>陈冰</author>  
45.                    <date>2006</date>  
46.                </book>  
47.                <book>  
48.                    <name>Flex第一步</name>  
49.                    <author>walktree</author>  
50.                    <date>2007</date>  
51.                </book>  
52.                <book>  
53.                    <name>Apollo第一步</name>  
54.                    <author>还不知道呢</author>  
55.                    <date>2008</date>  
56.                </book>  
57.            </datas>  
58.        </mx:Model>       
59.        <mx:Label width="100%" color="#004080" text="选择一本书购买"/>  
60.        <mx:DataGrid editable="true" id="book_DG" width="100%" height="156" itemEditEnd="checkInfo(event)" rowCount="5" dataProvider="{books.book}">  
61.            <mx:columns>  
62.                <mx:DataGridColumn dataField="name" headerText="书名"/>  
63.                <mx:DataGridColumn dataField="author" headerText="作者"/>  
64.                <mx:DataGridColumn dataField="date" headerText="出版日期" itemEditor="view.dateCell" />  
65.                <mx:DataGridColumn headerText="购买" itemRenderer="view.cartCell" editable="false"/>  
66.            </mx:columns>  
67.        </mx:DataGrid>  
68.           
69.        <mx:Canvas height="150" width="100%" backgroundColor="#ffffff">  
70.        <mx:Label id="tip_txt" text="还没有选择书目"/>      
71.        </mx:Canvas>  
72.  
73.</mx:Application>  

 

此外还有headerRenderer 控制标题栏的界面 和 itemEditor 控制单元格中编辑状态下的界面，使用跟itemRenderer一样。要使用itemEditor必须将DataGrid 的editable 属性设为true。还要设置函数来处理编辑完成事件，更新数据。主程序代码见上面 。

 

接着我们再定义一个组件：

在下面的组件中，使用了NumericStepper 数字选择控件来提供便捷操作。

在用户完成编辑单元格数据后，itemEditEnd事件将被触发，DataGridEvent 事件被派发出去，因此使用监听函数：itemEditEnd="checkInfo(event)"

if (evt.reason == DataGridEventReason.CANCELLED) 检查事件的类型

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="180">  
3.    <mx:NumericStepper id="num_year" x="0" y="0" minimum="1900" maximum="2100" value="{data.date}"/>  
4.    <mx:Label text="请选择年份" x="96" y="2"/>  
5.</mx:Canvas>  

 

1.9 Tree 一个使用XML作为Tree组件数据源的小例子

树型组件，是List 变异后的产物。在显示数据时保留了层级结构，每个元素都是一个分支或者叶子，分支包含其他分支或叶子，叶子不可再分。

结构和XML一样，所以用XML 作为Tree的数据源再适合不过了。

 

tree的事件：

change 在选中列改变时触发。

itemClick 点击某一列时被触发。

itemOpen 、itemClose 在节点展开和关闭时触发。

 

属性：

labeField 表示显示的文本所对应的XML字段，这里的值为@label ，

@ 符号表示后面的名字是XML节点的属性名，是AS3 中的XML数据的专用表达方式。

@label 指得是folder 节点中的label属性。

 

change="treeChanged(event) 节点改变事件

在treeChanged 监听函数中，通过Tree 的selectedItem 属性得到当前被选中节点的XML 数据。

Tree(event.target) 强制将 event.target 转换成Tree类型。event.target 代表的就是Tree。

as 操作符 是类型转换符，用来将selectedItem 的值转换为XML 类型。如果类型匹配返回该类型的值，否则返回null 。

 

itemClick="clickItem(event)" 单击节点事件

其实itemClick 事件包括了change 事件，因此treeChanged 并不会被执行。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">    <mx:Script>  
3.        <![CDATA[  
4.            import mx.events.TreeEvent;  
5.            import mx.events.ListEvent  
6.              
7.            public var selectedNode:XML;  
8.            //  
9.            public function treeChanged(event:Event):void {  
10.                selectedNode=Tree(event.target).selectedItem as XML;                  
11.                //res_txt.text = "选择的文件夹："+selectedNode.@label  
12.            }  
13.            internal function clickItem(evt:ListEvent):void{  
14.                res_txt.text = "点击的节点："+evt.rowIndex  
15.            }  
16.            internal function openItem(evt:TreeEvent):void{  
17.                res_txt.text = "带开的节点："+evt.item  
18.            }  
19.            internal function closeItem(evt:TreeEvent):void{  
20.                res_txt.text = "关闭的节点："+evt.item  
21.            }  
22.        ]]>  
23.    </mx:Script>  
24.    <mx:XMLList id="files">  
25.        <folder label="C:">  
26.            <folder label="My Documents">  
27.                <folder label="Adobe"/>  
28.            </folder>  
29.            <folder label="Windows">  
30.                <folder label="soft"/>  
31.                <folder label="drive"/>  
32.            </folder>  
33.            <folder label="Image"/>  
34.            <folder label="Music"/>  
35.        </folder>       
36.    </mx:XMLList>  
37.    <mx:Tree id="myTree" width="165" height="265" labelField="@label" itemRenderer="nodeItem"  
38.                showRoot="true" dataProvider="{files}" itemClick="clickItem(event)" itemOpen="openItem(event)" itemClose="closeItem(event)" change="treeChanged(event)" x="38" y="40"/>  
39.    <mx:TextArea id="res_txt" x="211" y="40" height="197"/>    
40.</mx:Application>  

Tree 默认采用的itemRenderer是 mx.controls.treeClasses 包中的TreeItemRenderer 类。接着我们来扩展使用它。

data 方法是 itemRenderer 获得数据的核心方法，重写这个方法，并简单修改了节点文字的颜色。

1.package   
2.{   
3.    import mx.controls.treeClasses.*;   
4.    import mx.collections.*;   
5.       
6.  
7.    public class nodeItem extends TreeItemRenderer   
8.    {   
9.        //          
10.        public function nodeItem() {   
11.            super();   
12.        }   
13.        //这是接收外部数据的核心方法          
14.        override public function set data(value:Object):void {   
15.            super.data = value;   
16.            //判断是否还有子节点，采用不同的颜色和字样   
17.            if(TreeListData(super.listData).hasChildren)   
18.            {   
19.                setStyle("color", 0x006699);   
20.                setStyle("fontWeight", 'bold');   
21.            }   
22.            else   
23.            {   
24.                setStyle("color", 0x000000);   
25.                setStyle("fontWeight", 'normal');   
26.            }     
27.        }   
28.    }   
29.}  

 

1.10 TileList 和 HorizontalList

TileList 和 容器Tile 没有联系，不过两者实现的效果基本相似，都是采用块的形式布局。TileList = Tile + List

columnCount 属性用来设定每行显示的元素个数，组件根据每行的个数自动计算出元素的位置。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.    <mx:Style source ="style.css"/>  
4.    <mx:Model id="images">  
5.      <image>  
6.        <item label="图片1" data="images/Baby01.gif"/>  
7.        <item label="图片2" data="images/Baby02.gif"/>  
8.        <item label="图片3" data="images/Baby03.gif"/>  
9.        <item label="图片4" data="images/Baby04.gif"/>  
10.        <item label="图片5" data="images/Baby01.gif"/>  
11.        <item label="图片6" data="images/Baby02.gif"/>  
12.        <item label="图片7" data="images/Baby03.gif"/>  
13.        <item label="图片8" data="images/Baby04.gif"/>  
14.      </image>  
15.    </mx:Model>  
16.    <mx:TileList itemRenderer="ImageItem" x="29" y="49" height="196" columnCount="3" dataProvider="{images.item}">  
17.    </mx:TileList>       
18.</mx:Application>  

 

创建itemRenderer 来定义每个元素的界面。

data.data对应数据源中item.data

data.label对应数据源中item.label

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="98" height="64" horizontalAlign="center">  
3.    <mx:Image width="32" height="32" source="{data.data}"/>  
4.    <mx:Button x="38" y="40" label="{data.label}"/>      
5.</mx:VBox>

 

1.11 文本处理

文本处理组件：

Text： 可以使用HTML不过要借助htmlText 标签或 htmlText 属性。插入HTML代码时需要使用CDATA标签。

TextArea： editable属性为true时，相当于一个支持多行的TextInput。支持HTML和内置滚动条。

TextInput 和 RichTextEditor 以及 Label

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.       
4.    <mx:Style>  
5.        Application{   
6.            fontSize:12;       
7.            backgroundGradientColors: #c0c0c0, #c0c0c0;   
8.        }   
9.    </mx:Style>  
10.  
11.    <mx:Text x="51" y="56" width="253" height="23" text="简单文本"/>  
12.       
13.    <mx:TextArea x="51" y="96" text="文本区" editable="false" width="172" height="48"/>  
14.    <mx:TextInput x="51" y="171" text="输入框" displayAsPassword="true"/>  
15.  
16.    <mx:Text width="253" height="96" x="51" y="226">  
17.        <mx:htmlText>  
18.            <![CDATA[<font color="#0000FF">HTML文本</font> <u>支持html标签</u><img src="images/Baby01.gif"/>...  ]]>  
19.        </mx:htmlText>  
20.    </mx:Text>  
21.</mx:Application>  

 

1.12 一个强有力的组件 -- RichTextEditor

它实现了HTML所有功能。

是一个集成了文本处理功能的Panel组件，主要包括：TextArea 文本区 和 控制文字格式的容器。

在容器中包括了其他的组件，如 字体选择的ComboBox 、选择文本颜色的 ColorPicker 、选择文本对齐方式的ToggleButtonBar 等等。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="442" height="420">  
3.    <mx:RichTextEditor x="10" y="10" width="403" height="281" id="myRich">  
4.    </mx:RichTextEditor>  
5.    <mx:TextArea id="output_txt" x="10" y="309" width="330" height="101"/>  
6.       
7.    <mx:Button x="348" y="308" label="查看文本" click="output_txt.text= myRich.text"/>  
8.    <mx:Button x="348" y="388" label="HTML代码" width="70" click="output_txt.text= myRich.htmlText"/>  
9.       
10.</mx:Application>  

1.13 设备字体和嵌入字体的应用实例

设备字体：用户机器上所有字体都最大可能地模拟其外观，保持文本的样式不会出现较大变化。支持三种设备字体：_sans, _serif, _typewriter。

设备字体必须使用引号""包含。

 

嵌入字体：将字体文件编译进SWF文件中或者运行时加载到SWF文件中，供SWF文件使用。并使文本具有抗锯齿特性，边缘更平滑，同时文本可以设置透明度，还可以旋转。缺点就是增加程序的文件大小，字体小于10时就很难辨认。

1.<mx:Style>  
2.        @font-face {   
3.            src:local("Arial"); //嵌入字体local,表示本机系统中的字体   
4.            src:url("./Arial.swf"); //指定的字体文件地址，将字体房子SWF文件中，然后加载它。   
5.            fontFamily: myFont; //字体的别名，必须定义   
6.            fontStyle: normal;  //可选项，默认normal 正常，italic 斜体 oblique 倾斜   
7.            fontWeight: normal; //可选项，默认normal 正常，bold 粗体 heavy 加倍粗体   
8.            flashType: true;  //可选项，默认true，添加文本的额外信息，使得文本抗锯齿，平滑显示   
9.  
10.                       //限制嵌入的字符。字符编码必须采用Unicode标准。   
11.                       unicodeRange:   
12.                U+0041-U+005A, //大写字母A-Z   
13.                U+0061-U+007A, //小写字母a-z   
14.                U+0030-U+0039, //数字0-9   
15.                U+002E-U+002E, //点.   
16.        }   
17.  
18.</mx:Style> 

 

定义字符的方法也可以在Flex SDK 2\frameworks\flex-config.xml中添加相关信息。

在@font-face中就可以这样使用：unicodeRange:"englishRange"

1.<fonts>  
2.        <languages>  
3.          <language-range>  
4.            <lang>englishRange</lang>  
5.            <range>U+0020-U+007E</range>  
6.          </language-range>  
7.        </languages>  
8.</fonts> 

 

flash-unicode-table.xml列出了绝大部分语言的Unicode的字符范围。可以参考并将copy到flex-config.xml中。