- 浏览: 248190 次
- 性别:
- 来自: 厦门
文章分类
最新评论
-
topbox163:
图片显示不了
Flex 学习曲线图 -
彭利贤:
你好,想请教您一些关于flash的问题,您可以加我qq吗 59 ...
全屏flash的尺寸分析 -
jingj6:
是开源的吗?
小日本做的非常强大的一款AS3 3D引擎 -
hugh52066:
LZ牛B。
Flex 学习曲线图 -
sweed0:
a dream~~
一个让人瞠目结舌的传奇电脑高手!
9.1 认识数据绑定
9.1.1 数据绑定的概念
使用数据绑定时,Flex 会自动把一个对象的数据复制,提供给另一个对象使用,提供数据一方称为数据源对象,使用数据的一方称为目标对象。当数据源对象的数据发生变化时,目标对象的数据会自动更新。
实质上,绑定的实现也是借助事件机制来完成的,当目标使用了数据绑定,目标对象就会侦听数据源的某一个固定事件。如果数据源改变,就派发事件,通知目标对象更新最新数据。当然这个过程都是由Flex来完成。
作为绑定的数据源对象,必须支持绑定--对象有派发改变事件的能力。
使用数据绑定的多数情况:
实质上,绑定的实现也是借助事件机制来完成的,当目标使用了数据绑定,目标对象就会侦听数据源的某一个固定事件。如果数据源改变,就派发事件,通知目标对象更新最新数据。当然这个过程都是由Flex来完成。
作为绑定的数据源对象,必须支持绑定--对象有派发改变事件的能力。
使用数据绑定的多数情况:
- 将后台数据(通过Web Service 或 Remoting 方式得到的数据)绑定给控件
- 把控件数据绑定给后台通信对象,发送给后台服务端
- 后台返回数据和数据模型 进行绑定
- 组件或对象属性的数据绑定
9.1.2 如何使用数据绑定
将数据源对象房子大括号{}中,作为目标对象的值就可以了。
backgroundColor="{mColor.value.toString()}"
在{}中也可以使用AS:
text="{(Number(age_txt.text)>= 16)?'成年':'未成年'}"
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style source="style.css" /> <mx:ColorPicker id="mColor" x="30" y="30"/> <mx:Canvas styleName="box" id ="box" x="30" y="80" backgroundColor="{mColor.value.toString()}" width="200" height="172"> </mx:Canvas> </mx:Application>
也可以使用函数:
scaleX="{doResize(scale)}"
定义scale 到时候使用了[Bindable]来使它具有绑定功能,[Bindable]是元标签的一种,专门用来定义绑定中的数据源对象,event事件名指当前数据源发生变化时,数据源所在对象派发的事件类型,可选的,默认:propertyChange :
[Bindable]
[Bindabl(event="eventname")]
比如我们定义scale:
[Bindable]
private var scale:Number = 1;
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style source="style.css" /> <mx:Script> <![CDATA[ [Bindable] private var scale:Number = 1; internal function doResize(n:Number):Number{ zoom.zoomWidthTo = n; zoom.play(); return box.scaleX; } ]]> </mx:Script> <mx:Zoom id="zoom" originX="0" originY="0" target="{box}" /> <mx:HSlider id="slider" x="120" y="301" change="scale =slider.value" minimum="0" maximum="1"/> <mx:Canvas id="box" styleName="box" x="100" y="56" scaleX="{doResize(scale)}" width="200" height="200"> </mx:Canvas> </mx:Application>
使用<mx:Binding> 标签来定义数据绑定:
<mx:Binding source="users.user.blogURL" destination="pic.toolTip" />
其中source指定数据源,destination指定目标对象的属性,两者的数据类型必须相同
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style source="style.css" /> <mx:Model id="users"> <users> <user> <name>Peter Ent</name> <blogURL>http://weblogs.macromedia.com/pent</blogURL> <rss>http://weblogs.macromedia.com/pent/index.xml</rss> <pic>pic_1.png</pic> </user> </users> </mx:Model> <mx:Binding source="users.user.name" destination="name_txt.text" /> <mx:Binding source="users.user.blogURL" destination="blog_btn.label" /> <mx:Binding source="users.user.rss" destination="rss_btn.label" /> <mx:Binding source="users.user.pic" destination="pic.source" /> <mx:Binding source="users.user.blogURL" destination="pic.toolTip" /> <mx:Panel styleName="myPanel" x="74" y="78" width="327" height="309" layout="absolute" title="查看信息"> <mx:Image id="pic" x="10" y="19" width="277" height="76" scaleContent="true"/> <mx:Label id="name_txt" x="10" y="135" width="154"/> <mx:LinkButton id ="blog_btn" x="10" y="163" width="236" textAlign="left"/> <mx:LinkButton id="rss_btn" x="10" y="195" width="236" textAlign="left"/> </mx:Panel> </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 31316.3.1 模糊效果和发光效 ... -
Flex学习笔记_06 使用行为对象和动画效果_认识行为对象、行为和组件
2008-08-17 01:30 21796.1 认识行为对象 6.1.1 什么是行为对象 行 ... -
Flex学习笔记_09 数据绑定_运用实例
2008-07-28 23:41 32159.3.1 实现界面的多语言切换 <?xml vers ... -
Flex学习笔记_09 数据绑定_晋级篇
2008-07-28 22:27 28329.2.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 46097.3 数据类型和数据运算 7.3.1 关于数据类型 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础
2008-07-09 23:15 28527.1 了解 ActionScript 3.0 7.1 ... -
Flex学习笔记_06 使用组件处理数据和交互_03控件的实例应用
2008-07-06 14:26 25533. 控件的实例应用 3.1 制作一个简单的涂鸦板 ... -
Flex学习笔记_06 使用组件处理数据和交互_02导航类组件
2008-07-02 00:04 29612. 导航类组件 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学习笔记_06 使用组件处理数据和交互_01常用组件(上)
2008-06-26 23:11 4490Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局
2008-06-25 08:40 6680本文的相关文章: 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 54211. MXML语法 MXML语言是专门用于Flex程序中, ...
相关推荐
Flex学习笔记_09 数据绑定_概念、使用 - Java&Flex - JavaEye技术网站 希望对爱好有帮助!!
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
学习了一段时间的flex... 上传点资源,大家分享。 flex,怎么学习flex,Flex_3_Cookbook_中文版
Flex_3_with_JavaFlex_3_with_JavaFlex_3_with_JavaFlex_3_with_Java
amcharts_flex_components_1.8.1 和开发示例
Flex_CookBook_读书笔记(精品) Flex_CookBook_读书笔记(精品)
flex数据交互_方式
arcgis_api_for_flex_3_6 api库文件,现在esri官网需哟注册才能下载了,而且网速超慢,我下了好几次才下载完,希望对大家有用
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
flex数据绑定的原理
MAPABC_FLEX_API_WEB_V2.4
Flex万年历记事本_flex源码
Flex_I_O_简介
map_flex_1_9map_flex_1_9map_flex_1_9map_flex_1_9map_flex_1_9map_flex_1_9map_flex_1_9
flex4源码 超酷menu导航 flex4
Flex_4.0_RIA开发详解讲义.rar Flex_4.0_RIA开发详解讲义.rar Flex_4.0_RIA开发详解讲义.rar Flex_4.0_RIA开发详解讲义.rar
flex_and_bison flex_and_bison
Flex_4_界面设计实战.pdf Flex_4_界面设计实战.pdf Flex_4_界面设计实战.pdf Flex_4_界面设计实战.pdf
flex_video_帮助
最近开始学习Flex,其中用到了AS,AS2到AS3发生了很大的变化,完全的面向对象,知道这个特点以后我也一直没有特意的好好去学学AS3,但是随着最近学习的深入,还是有必要学习一下