|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-06-26
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.MouseEvent
import 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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
浏览 5706 次
