数据处理，实现交互动作的组件在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中。
扫一扫
2074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
