- 浏览: 16762 次
最新评论
Flex中Bindable的原理
2011年11月01日
[Bindable]:元数据标签,它在代码中的作用就是向编译器提供如何编译程序的信息。它的最大作用是使程序组件间的数据同步变得容易。在开发中通常用上Bindable作用在视图控件上,如给它绑定一个对象,则以后只需要在逻辑层更改这个对象的值,则视图层的控件数据会自动更新(同步),而不再需要手动去更新视图。
现在来探索一下Bindable的工作原理:
先来实现一个简单的绑定例子:
单击按钮则改变了text的文字,这个就是bindable。那么它是怎样工作的呢?以下是flex编译器处理后的代码:
[Bindable(event="propertyChange")]
private var bind_String:String="hi";
private function onChange():void
{
var oldValue:String = bind_String;
bind_String = "hello";
if(bind_String!==oldValue) {
this.dispatchEvent(PropertyChangeEvent.createUpdat eEvent(this,
"bind_String", oldValue, bind_String));
}
}
由上面可以看到数据源更改的时候抛出了一个PropertyChangeEvent事件,通知事件侦听器该数据源发生了变化,并更新视图。
“这也说明了,绑定不过是事件游戏而已,flex为用户隐藏了很多底层算法。”这句概括说明了Bindable的原理。
================================================== ===================================
Flex中提供了[Bindable]标签,可以方便的实现数据绑定。但是其背后的原理是什么呢?可以用flash.utils.describeType这个工具来分析。
假设有如下的类,对成员变量声明了数据绑定:
package test
...{
import mx.collections.ArrayCollection;
public class BindablePropertity
...{
[Bindable]
public var list:ArrayCollection = new ArrayCollection();
}
}
用flash.utils.describeType输出的xml如下:
可以看出,增加了[Bindable]声明后,相当于这个类实现了IEventDispatcher接口,并且在数据发生变化时会分发propertyChange事件。这样,其他监听了这一事件的组件就可以在数据变化时得到通知。
Flex组件的属性大多可以用花括号“{}”进行绑定,也可以将一个组件的属性绑定到另一个组件的属性。同样用describeType进行分析,可以看到:
组件是通过监听propertyChange事件来更新数据的。但是前面的数据绑定声明并没有指定事件名称,这是因为[Bindable]是简化的写法,相当于[Bindable(event="propertyChange")]。这里的事件名称可以改变,但是Flex组件默认监听了名为propertyChange的事件,如果自己更改了事件名称,则必需在Flex中自己监听相应的事件并编写事件处理。
发表评论
-
如何高效地进行远程大规模字符串比较问题
2012-07-06 09:52 680关键字 (keywords):大规模 字符串 匹配 远程 ... -
java 使用正则来过滤字符串中的特殊字符
2012-07-06 09:45 985Pattern pattern1 = Pattern.co ... -
正则表达式(初识笔记)
2012-07-06 09:38 649............................. ... -
ps画个矩形框,如何设置线宽
2012-07-06 09:30 1876i am now in university(HIT@We ... -
父页面iframe自适应子页面高度
2012-07-05 20:45 1363父页面有table,有tr,td。td中有iframe。页 ... -
ADF中组件无法显示问题
2012-07-03 13:44 800在ADF开发过程中,偶尔会遇到一些组件甚至页面无法显示到问 ... -
Flex 4 设置背景图片 Canvas backgroundImage BitmapFill fillMode
2012-07-02 12:45 969Flex 3中Canvas是可以设置backgroundI ... -
Flex中,跨List实现SHIFT多选的例子
2012-07-02 12:45 615最近工作中遇到的问题,客户要求做这么个东西。还是稍微 ... -
Flex中本地图片上传前的预览
2012-07-02 12:45 782height="345" h ... -
Flex Panel 拖动效果例子
2012-07-02 12:45 6232010-08-06 今天在flex下尝试了下panel ... -
Ext 4 概述(六)之Grid
2012-07-01 10:07 568这次升级Ext 4全部 ... -
也谈jQuery之学习
2012-07-01 10:07 671由于之前一直是做 ... -
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法
2012-07-01 10:07 782这段时间做个项目 ... -
深度剖析WinPcap之(十)――数据包的内核过滤(13)
2012-07-01 10:07 1394数据包到达网络接 ... -
Flash Builder 4-找不到所需的 Adobe Flash Player
2012-07-01 10:07 659比较懒,比较少上csdn的,如果发现留言给我没有回复,望见 ... -
Flex组件:Style的使用
2012-06-30 16:32 699Flex组件:Style的使用 2010 ... -
Flex AIR)创建“不规则形状”的Air透明窗体
2012-06-30 16:32 884Flex AIR)创建“不规则形状”的Air透明窗体 201 ... -
如何在flex当中使用swc
2012-06-30 16:32 763如何在flex当中使用swc 2 ... -
FLEX和Actionscript开发FLASH游戏7-3
2012-06-30 16:32 411FLEX和Actionscript开发FLASH游戏7-3 ...
相关推荐
什么是元数据(metadata):[Bindable]大概又是Flex用得最多的元数据了。
10.2 在Flex中使用Flash CS所开发的控件 306 10.3 Flex访问.Net 308 10.3.1 Fluorine的安装和配置 309 10.3.2 Flex通过Fluorine访问.NET 311 10.4 小结 314 附录 Flex Builder 3中的项目如何迁移至Flash ...
2.5 Flex中的组件化编程 2.5.1 认识Flex组件和组件容器 2.5.2 组件生命周期与布局 2.5.3 组件的失效机制 2.5.4 使用ActionScript创建自定义组件 2.6 异步调用 2.6.1 异步调用导致模型数据不一致...
2.5 Flex中的组件化编程 2.5.1 认识Flex组件和组件容器 2.5.2 组件生命周期与布局 2.5.3 组件的失效机制 2.5.4 使用ActionScript创建自定义组件 2.6 异步调用 2.6.1 异步调用导致模型数据不一致...
[Bindable] private var dp:Array = [ {idx:1, names: "test1", sex: "b" }, {idx:2, names: "test2", sex: "g" } ]; public function doSelect(o:Object):void { Alert.show("行的数据分别是...
Bindable.js 实现了灵活、快速的双向数据绑定的 JavaScript 库。 Two-way data binding means linking properties of two separate objects - when one changes, the other will automatically update with that ...
[Bindable] private var slides:ArrayCollection private function resultHandler(event:ResultEvent):void { slides = event.result.album.slide; } private function faultHandler...
算是flex初学者的的笔记吧,首先可以概览一下下文中的代码,然后我们主要是看看[Bindable]的这种用法。
Bindable是一个设计系统,旨在在工具中提供视频产品,以构建紧密一致的界面。 Bindable将为设计者和工程师提供一种通用的模式。 Bindable是作为插件开发的,并使用构建。 目录 背景 我们是由设计师和工程师组成的...
*" creationComplete="initTree();... change="iFrame.source=tree.selectedNode.path" /> ... // TODO: determine whether we can ... // TODO: add some links here to Flex sites } ]]> </mx:Application>
本文主要讲解AngularJS ng-non-bindable 指令,这里帮大家整理了ng-non-bindable指令的基本知识资料,有需要的小伙伴可以参考下
[Bindable] var result:String; function sendRequest(){ var name=name1.text; var password=password1.text; ro.validateLogin(name,password); ro.addEventListener(ResultEvent.RESULT,results); } function ...
var BindableObject = require ( "bindable-object" ) ; var person = new BindableObject ( { name : "craig" , last : "condon" , location : { city : "San Francisco" } } ) ; person . bind ( "location....
可结合成分 公开BindableComponent以轻松绑定组件方法以用作react中的处理程序。 还提供了BaseComponent ,唯一的区别是包含了PureRenderMixin 。安装npm install --save bindable-component用法import { ...
open flash chart 2 的swc文件包 可以在flex里面调用了. [Bindable] private var chart:String='{ "elements": [ { "type": "bar","alpha":0.8,"colour":"#663366", "values": [ 0 ] } ], "title": { "text": "...
提供4个基本的自定义可观察对象: @observable.date , @observable.number , @observable.string , @observable.boolean ,5个@bindable以及额外的内置值: @bindable.booleanAttr @bindable 安装与提醒 npm i ...
##ShowLoadingFrame (bool, bindable) true将等待指示器包装在一个框架中。 false仅显示等待指示器本身。 ##ShowLoadingMessage (bool, bindable) true显示消息和等待指示器, false仅显示等待指示器本身。 ##...
木偶的可绑定路径参数此路由器允许您使用前导@char 绑定控制器方法以路由参数。 路由器示例: appRoutes: { 'users/@user/edit' : 'onUserEdit' , 'users/@user/copy' : 'onUserCopy' , '*default' : 'onDefault' } ...