- 浏览: 763598 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
Flex中[Bindable]的使用心得
- 博客分类:
- flex
在Flex编程中,Bindble使用到最多的元数据。该标签可以应用在变量或者类或者方法上。同在在MXML中使用”{}”引用设置为Bindable的变量,从而实现对于变量赋值与界面元素的自动同步。
Bindable的实现采用了GoF的Observer模式,或者Publisher/Subscriber模式。该实现允许一个类(或者变量)可以将自身的变化自动通知给感兴趣的对象。
对应Observer模式,GoF的说法是:
定义对象间的一种一对多的依赖关系,当一个对象状态发生改变的时候,所有依赖于他的对象都得到通知并被自动更新。这种交互也成为发布-订阅。目标是通知的发布者。他发布通知是不需要知道谁是他的订阅者(观察者)。可以有任意数目的观察着订阅并接受通知。
在ActionScript中,编译器将会为该标签给特定的属性或类或者方法的变化增加事件关联。
简单的例子,如果定义了变量和一个组件:
[Bindable] var displayName :String;
<mx:TextInput id= "textA" text="{dispayName}"/>,
编译器在后台自动增加事件对应伪代码如下:
function set DispayName(newvar :String) :void
{
displayName= newvar;
this.dispatchEvent(new Event("_dispayNameChanged"));
}
// 类型初始化时被调用
function MxmlInit(){ textA.addEventListener("_dispayNameChanged")) , UpdateDisplay);
}
function UpdateDisplay(){
textA.text = displayName;
}
可见,编译器在背后做了大量的工作,为我们节省了很多的重复劳动来建立这种观察关系。
对于初学Flex的人,对于bindable的误解往往是认为Bindable是双向的数值链接,事实上Observer模式对应的一个要素就是被观察者对观察者一无所知。
比如上面的例子,对于textA的修改,其值并不会自动的体现在displayName上。Bindable只是建立单项的观察者的关系,这一点至关重要。
对应MVC架构中,被观察者往往对应Model(数据模型?)的角色,而观察者则对应于View(视图)的角色,事实上很多的MVC架构也是非常依赖于Bindable这个工具。
那么什么情况下应该应用Bindable?Leaf的个人经验和理解是:
在不知道有哪些观察者,或者需要动态的增加观察者的时候,才需要是用Observer模式!
当观察者不需要彼此之间的知识的时候。
当被观察者对观察者的信息不关心的时候。
当仅仅是简单的界面数值映射关系的时候。
注意Bindable是有额外的开销的,别忘了那些编译器自动生成的代码,如果需要复杂的逻辑(并非简单的数值赋值)对应的时候,不要使用bindable。
其实也是因为这一点,ActionScript中,即使指定了Bindable,如果对应的set或者get中逻辑比较复杂,则不会自动的创建事件关联操作,而是忽略Bindable标签。
可以自己使用Bindable[事件名称]的方式建立关联,Adobe给出了这样的例子:
private var _maxFontSize:Number = 15;
[Bindable(event="maxFontSizeChanged")]
// Define public getter method.
public function get maxFontSize():Number
{
return _maxFontSize;
}
// Define public setter method.
public function set maxFontSize(value:Number):void
{
if (value <= 30) {
_maxFontSize = value;
}
else
{
_maxFontSize = 30;
}
// Create event object.
var eventObj:Event = new Event("maxFontSizeChanged");
dispatchEvent(eventObj);
}
注意在这个例子里,复杂的逻辑是在setter里面做的,而不是getter,为什么? 因为setter调用的次数在正常的情况下总是要比getter少,原则上,
复杂的逻辑通常在赋值时完成,用空间换时间,而不是在每一次取值时计算。
特别信息:
在Flex4里面,新增加了允许对于表达式的观察! 例如:
<mx:Button enabled="{state == 'ready'}"/>
同样的代码在Flex3中无效。
附,Flex3中对于Bindable的解释的LiveDoc 链接如下。
Bindable的实现采用了GoF的Observer模式,或者Publisher/Subscriber模式。该实现允许一个类(或者变量)可以将自身的变化自动通知给感兴趣的对象。
对应Observer模式,GoF的说法是:
定义对象间的一种一对多的依赖关系,当一个对象状态发生改变的时候,所有依赖于他的对象都得到通知并被自动更新。这种交互也成为发布-订阅。目标是通知的发布者。他发布通知是不需要知道谁是他的订阅者(观察者)。可以有任意数目的观察着订阅并接受通知。
在ActionScript中,编译器将会为该标签给特定的属性或类或者方法的变化增加事件关联。
简单的例子,如果定义了变量和一个组件:
[Bindable] var displayName :String;
<mx:TextInput id= "textA" text="{dispayName}"/>,
编译器在后台自动增加事件对应伪代码如下:
function set DispayName(newvar :String) :void
{
displayName= newvar;
this.dispatchEvent(new Event("_dispayNameChanged"));
}
// 类型初始化时被调用
function MxmlInit(){ textA.addEventListener("_dispayNameChanged")) , UpdateDisplay);
}
function UpdateDisplay(){
textA.text = displayName;
}
可见,编译器在背后做了大量的工作,为我们节省了很多的重复劳动来建立这种观察关系。
对于初学Flex的人,对于bindable的误解往往是认为Bindable是双向的数值链接,事实上Observer模式对应的一个要素就是被观察者对观察者一无所知。
比如上面的例子,对于textA的修改,其值并不会自动的体现在displayName上。Bindable只是建立单项的观察者的关系,这一点至关重要。
对应MVC架构中,被观察者往往对应Model(数据模型?)的角色,而观察者则对应于View(视图)的角色,事实上很多的MVC架构也是非常依赖于Bindable这个工具。
那么什么情况下应该应用Bindable?Leaf的个人经验和理解是:
在不知道有哪些观察者,或者需要动态的增加观察者的时候,才需要是用Observer模式!
当观察者不需要彼此之间的知识的时候。
当被观察者对观察者的信息不关心的时候。
当仅仅是简单的界面数值映射关系的时候。
注意Bindable是有额外的开销的,别忘了那些编译器自动生成的代码,如果需要复杂的逻辑(并非简单的数值赋值)对应的时候,不要使用bindable。
其实也是因为这一点,ActionScript中,即使指定了Bindable,如果对应的set或者get中逻辑比较复杂,则不会自动的创建事件关联操作,而是忽略Bindable标签。
可以自己使用Bindable[事件名称]的方式建立关联,Adobe给出了这样的例子:
private var _maxFontSize:Number = 15;
[Bindable(event="maxFontSizeChanged")]
// Define public getter method.
public function get maxFontSize():Number
{
return _maxFontSize;
}
// Define public setter method.
public function set maxFontSize(value:Number):void
{
if (value <= 30) {
_maxFontSize = value;
}
else
{
_maxFontSize = 30;
}
// Create event object.
var eventObj:Event = new Event("maxFontSizeChanged");
dispatchEvent(eventObj);
}
注意在这个例子里,复杂的逻辑是在setter里面做的,而不是getter,为什么? 因为setter调用的次数在正常的情况下总是要比getter少,原则上,
复杂的逻辑通常在赋值时完成,用空间换时间,而不是在每一次取值时计算。
特别信息:
在Flex4里面,新增加了允许对于表达式的观察! 例如:
<mx:Button enabled="{state == 'ready'}"/>
同样的代码在Flex3中无效。
附,Flex3中对于Bindable的解释的LiveDoc 链接如下。
发表评论
-
Flex 非常实用的资料
2012-05-31 15:38 1189【改变输出swf的尺度,背景颜色或帧频】 在"Na ... -
Flex正则表达式规则
2012-05-31 15:35 16671.Flex正则表达式规则 1.1普通字符 字母、数字、汉 ... -
FLEX元标签_Bindable
2012-05-30 16:46 10581 概述 [Bindable ... -
Flex Bindable
2012-05-30 16:41 806对一个类声明绑定,相当于给这个类里的所有属性都声明了绑定。等同 ... -
Flex [Bindable] 以及使用方法
2012-05-30 16:37 1103绑定: 举个例子: 给下面的public变量加上[Bind ... -
关于flex开发自定义组件需要注意的问题
2012-05-23 14:24 1120一.首先回答,为什么要 ... -
Flex中自定义组件
2012-05-23 14:17 1087如要重写组件,就不得不了解Flex中组件初始化过程。初始化过程 ... -
flex,datagrid多列排序
2012-03-21 15:01 1052<?xml version="1.0" ... -
flex,datagrid 按照列来排序
2012-03-21 13:56 2111排序部分 import mx.controls.DateFie ... -
flex 动态给控件赋值,通过反射遍历MXML中的组件
2012-03-21 13:52 1316flex 动态给控件赋值,通过反射遍历MXML中的组件。当有1 ... -
flex双击不生效问题
2012-03-21 13:50 908今天用到flex的doubleclick的事件,但是不生效,原 ... -
FLEX datagrid 点击列头排序后,行编辑问题
2012-03-21 13:45 952点击列头排序后。行编辑事件结束后,adobe默认会自己重新将d ... -
flex内存管理机制
2012-03-20 13:44 921一.简述Flex内存释放优 ... -
Flex 内存处理的方法
2012-03-20 11:25 8281.当任何对象unload后,fl ... -
Flex3 Profile的使用
2012-03-13 15:38 928flex的profile就是一个性能监测器,也是adobe向传 ... -
FLEX内存释放优化原则
2012-03-13 15:36 796FLEX内存释放优化原则: 1. 被删除对象在外部的所有引 ... -
flashplayer的缓存目录
2012-03-13 15:34 3027flashplayer的缓存目录是: XP系统下是C:/Do ... -
swf 更新后,客户端不需要清空缓存即可查看最新版本
2012-03-13 14:20 2343我们在用Flex开发应用的时候,每次修改了swf,上传到服务器 ... -
用RSL来为你的flex程序减肥
2012-03-13 14:19 1123用RSL来为你的flex程序减肥 问题:一个只有几个控件的 ... -
Flex控制session方法
2011-12-07 08:52 1041采用filter 监控 MessageBrokerServle ...
相关推荐
什么是元数据(metadata):[Bindable]大概又是Flex用得最多的元数据了。
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 异步调用导致模型数据不一致...
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 ...
[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...
Bindable是一个设计系统,旨在在工具中提供视频产品,以构建紧密一致的界面。 Bindable将为设计者和工程师提供一种通用的模式。 Bindable是作为插件开发的,并使用构建。 目录 背景 我们是由设计师和工程师组成的...
算是flex初学者的的笔记吧,首先可以概览一下下文中的代码,然后我们主要是看看[Bindable]的这种用法。
AngularJS ng-non-bindable 指令 AngularJS 实例 以下段落不需要使用 AngularJS 来编译: <!DOCTYPE html> <html> <head> <meta charset=utf-8> [removed][removed] </head> <body...
*" creationComplete="initTree();... change="iFrame.source=tree.selectedNode.path" /> ... // TODO: determine whether we can ... // TODO: add some links here to Flex sites } ]]> </mx:Application>
[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 { ...
提供使用流利的语法创建自定义@observable功能: @observable.custom / @observable.custom() 提供4个基本的自定义可观察对象: @observable.date , @observable.number , @observable.string , @observable....
open flash chart 2 的swc文件包 可以在flex里面调用了. [Bindable] private var chart:String='{ "elements": [ { "type": "bar","alpha":0.8,"colour":"#663366", "values": [ 0 ] } ], "title": { "text": "...
##ShowLoadingFrame (bool, bindable) true将等待指示器包装在一个框架中。 false仅显示等待指示器本身。 ##ShowLoadingMessage (bool, bindable) true显示消息和等待指示器, false仅显示等待指示器本身。 ##...
木偶的可绑定路径参数此路由器允许您使用前导@char 绑定控制器方法以路由参数。 路由器示例: appRoutes: { 'users/@user/edit' : 'onUserEdit' , 'users/@user/copy' : 'onUserCopy' , '*default' : 'onDefault' } ...