- 浏览: 248213 次
- 性别:
- 来自: 厦门
文章分类
最新评论
-
topbox163:
图片显示不了
Flex 学习曲线图 -
彭利贤:
你好,想请教您一些关于flash的问题,您可以加我qq吗 59 ...
全屏flash的尺寸分析 -
jingj6:
是开源的吗?
小日本做的非常强大的一款AS3 3D引擎 -
hugh52066:
LZ牛B。
Flex 学习曲线图 -
sweed0:
a dream~~
一个让人瞠目结舌的传奇电脑高手!
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>
发表评论
-
如何使用Cairngorm3的导航库(Spring AS)
2011-08-29 17:39 2855一、概述 二、LIB库包配置 下载需要的LIB库 ... -
Flex学习笔记_06 使用行为对象和动画效果_ 放缩\调整大小效果
2008-09-28 16:47 37656.3.2 放缩效果和调整大 ... -
Flex学习笔记_06 使用行为对象和动画效果_模糊、发光效果
2008-09-27 22:33 31326.3.1 模糊效果和发光效 ... -
Flex学习笔记_06 使用行为对象和动画效果_认识行为对象、行为和组件
2008-08-17 01:30 21806.1 认识行为对象 6.1.1 什么是行为对象 行 ... -
Flex学习笔记_09 数据绑定_运用实例
2008-07-28 23:41 32159.3.1 实现界面的多语言切换 <?xml vers ... -
Flex学习笔记_09 数据绑定_晋级篇
2008-07-28 22:27 28349.2.1 函数和类级别的绑 ... -
Flex学习笔记_09 数据绑定_概念、使用
2008-07-21 23:32 20429.1 认识数据绑定 9.1.1 数据绑定的概念 ... -
Flex学习笔记_08 Flex的事件机制_高级应用
2008-07-16 23:11 31728.3 事件机制的高级应用 8.3.1 事件的优先级别和 ... -
Flex学习笔记_08 Flex的事件机制_事件工作流程
2008-07-15 09:05 26878.2 事件机制的工作流程 8.2.1 关于事件流 ... -
Flex学习笔记_08 Flex的事件机制_事件架构
2008-07-14 08:54 24558.1 一切从事件开始 8.1.1 关于事件 事件有 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础_数据类型及其运算、程序流程
2008-07-13 19:21 46107.3 数据类型和数据运算 7.3.1 关于数据类型 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础
2008-07-09 23:15 28537.1 了解 ActionScript 3.0 7.1 ... -
Flex学习笔记_06 使用组件处理数据和交互_03控件的实例应用
2008-07-06 14:26 25543. 控件的实例应用 3.1 制作一个简单的涂鸦板 ... -
Flex学习笔记_06 使用组件处理数据和交互_02导航类组件
2008-07-02 00:04 29622. 导航类组件 2.1 ToggleButtonBa ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(下)
2008-06-30 10:37 4576Flex学习笔记_06 使用组 ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(中)
2008-06-29 22:50 3934Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局
2008-06-25 08:40 6682本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_02窗口布局
2008-06-24 09:07 5070本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_01管理程序的布局
2008-06-23 23:52 5609本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_04 MXML语言简介
2008-06-17 22:52 54221. MXML语法 MXML语言是专门用于Flex程序中, ...
相关推荐
内容包括:F1ex简介、Flex的安装和开发环境的建立、MXML语法简介、使用容器控制界面布局、使用组件处理数据和交互、使用行为对象和动画效果、ActionScript3.0编程知识、Flex的事件机制、数据绑定、组件的使用、F1ex...
Flex学习笔记_09 数据绑定_概念、使用 - Java&Flex - JavaEye技术网站 希望对爱好有帮助!!
flex数据交互_方式
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
学习了一段时间的flex... 上传点资源,大家分享。 flex,怎么学习flex,Flex_3_Cookbook_中文版
Flex 组件Flex 组件Flex 组件Flex 组件Flex 组件
Table of Contents ...8.1基本组件使用[Tree,datagrid,TitleWindow,ViewStack] 40 8.2读写XML 40 8.3读写ShareObject 40 8.4 BlazeDS配置及使用 40 8.5 回溯 40 8.6 Event 40 8.7 代码优化 40 8.8 Demo 40
Flex_3_with_JavaFlex_3_with_JavaFlex_3_with_JavaFlex_3_with_Java
S32KSDKCAN组件详解-CANPAL-FLEXCAN,学习S32K系列CAN组件的使用和原理
amcharts_flex_components_1.8.1 和开发示例
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
Flex_CookBook_读书笔记(精品) Flex_CookBook_读书笔记(精品)
* fnd_id_flex_segments where id_flex_code=""GL#"" and id_flex_num=50671 * fnd_profile_options_vl * fnd_concurrent_programs 法度表 * fnd_concurrent_requests 恳求表 * fnd_concurrent_processes 过程表 --...
最近开始学习Flex,其中用到了AS,AS2到AS3发生了很大的变化,完全的面向对象,知道这个特点以后我也一直没有特意的好好去学学AS3,但是随着最近学习的深入,还是有必要学习一下
arcgis_api_for_flex_3_6 api库文件,现在esri官网需哟注册才能下载了,而且网速超慢,我下了好几次才下载完,希望对大家有用
将_Adobe_Flex_和_JavaFX_与_JavaServer_Faces_2.0_结合使用.pdf
MAPABC_FLEX_API_WEB_V2.4
Flex万年历记事本_flex源码
Flex_I_O_简介
这是作者自己亲自编写的教程,里面包含的有图解教程,各式jar,及配置文件,全部包含在内,如果你是一个决定学习flex初学者,我敢保证它肯定适合你!带上你走上flex开发旅途!