`
bence
  • 浏览: 29755 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

深入分析Flex [Bindable] 以及使用方法(转载)

阅读更多

  转载地址:http://www.gold98.net/blog/article.asp?id=1078

[Bindable]大概又是Flex用得最多的元数据了。刚开始用用确实好简单,效率真是没的说。不过这几天用着却碰到了些问题,我自己搜集了些资料,想着有必要在blog里总结一下吧。
啥是元数据(metadata)

知道就跳过吧。今天不晓得为什么livedoc.adobe.com这么慢,没办法,拿不到权威的解释了。我就按自己的理解随便解释一下:首先要明白元数据不是语法的一部分,而是专门给编译器用的,说白了是告诉编译器做某些事情,学过java之类的应该知道。那Bindable来讲,它的作用是告诉 flex编译器,给某些某些东西建立绑定关系,flex编译器会在编译过程中给AS(flex编译器就是把mxml编译成as,再编译到swf,也可能直接编译倒swf,我这里假设有as这么个环节)加一点事件发生和处理之类的代码,由此绑定的关系便建立了,如果我们用纯粹as3代码来写也是可以实现的,就是太太太麻烦。
啥是绑定

知道继续跳过。举个例子:给下面的public变量加上[Bindable]

[Bindable]
public var name:String = "";

作为一个public变量,肯定既可以被赋值,也能赋值给别的变量。绑定的作用就是,当name改变的时候(被赋值了),可能通知其它被name影响(赋值给它们)的变量发生改变。这里的“可能”就需要编译器来判断,这就是为什么元数据是给编译器用的原因了。在mxml里用{}的语法的地方就是绑定的对象,比如label={xxx.name},当name变化,label也跟着变化。这样,我们只是很简单的改变了name的值,由于有绑定,界面上的label也跟着自动变化了,爽吧。
能用在哪里

三个地方:类, 变量, getter/setter。是不是public没有关系,private的就只能给自家用呗。用在Class上就是简单的给所有的public属性(包括变量,getter/setter,普通方法)加上[Bindable],可是一般的方法不能用[Bindable]呀,于是一般就能看到flex给了个warning,直接无视:)。变量嘛就是上面讲的,很简单略掉。
用在只读,只写属性(getter/setter)上面

终于讲到关键地方了,因为getter和setter很像方法,用起来会有点不同。看看这个例子:

[Bindable]
private var content:Array = new Array();
[Bindable]
public function set _content(ct:String):void
{
       content = ct.split(SEP);
}
[Bindable]             
public function get _wholeText():String
{
       if(content.length == 0)
       {
              return "";
       }
       else
       {
              var _w:String = "";
              for(var i:int=0 ; i<content.length ; i++)
              {
                     _w += content[i] + "\r\n";
              }
              return _w;
       }
}

原来的设想是content绑定_wholeText,可它是不工作的。为什么?_wholeText太复杂了,被编译器排除在“可能”之外,编译器认为没有绑定关系,如果只是简单的return content,倒是可以的。我这里搜到了一些比较权威的解释。来自http://www.rubenswieringa.com/blog/binding-read-only-accessors-in-flex找到Ely Greenfield讲的。

    Now keep in mind that there’s no way for the compiler to actually tell if the value of a property get function would be different if called, short of doing an extensive code flow analysis of the get function, identifying all the inputs that might be affecting the value of the get function (i.e., member fields, statics, globals that are used in the get function and in any methods, global functions, closures, etc) it might call, and setting up watchers on every one of those to trigger the binding when any of them change. That’s prohibitively difficult, and expensive to do. So the compiler doesn’t try.

    Instead when you put [Bindable] on a get/set property, the compiler makes it bindable with a little creative rewriting that allows the framework to watch the get function, and dispatch a change event when the get function is triggered. This means that automatic bindable properties don’t work when the get function is computed from multiple values, or when you change its value by setting a backing field, rather than using the set function.

    It _also_ means that if you have no set function, we can pretty much guarantee that there’s no way automatically bindable get properties will be triggered. a read only propeerty is, to the compiler, completely opaque…at the moment, it has no idea where that value is coming from, and hence will never be able to ‘automatically’ trigger the binding.

说白了就是为了降低复杂度和提高效率,复杂情况的getter会被忽略。如何解决?可以手动建立绑定,即[Bindable("eventName")]。把代码改成这样:

[Bindable]
private var content:Array = new Array();
[Bindable]
public function set _content(ct:String):void
{
       content = ct.split(SEP);
        this.dispatchEvent(new Event("_contectChanged"));
}
[Bindable("_contectChanged")]             
public function get _wholeText():String
{
       if(content.length == 0)
       {
              return "";
       }
       else
       {
              var _w:String = "";
              for(var i:int=0 ; i<content.length ; i++)
              {
                     _w += content[i] + "\r\n";
              }
              return _w;
       }
}

这样就避免了编译器去自动识别。自己加上绑定关系,当_content被赋值,发出_contentChanged事件,通知所有被绑定的getter方法执行一遍。这也说明了,绑定不过是事件游戏而已,flex为用户隐藏了很多底层算法。

分享到:
评论

相关推荐

    Flex Bindable 的用法

    例如,`[Bindable]`元数据告诉Flex编译器,某个变量、属性或getter/setter方法需要支持数据绑定。这意味着当这些元素的值发生变化时,编译器会自动生成相应的事件处理代码,确保与之绑定的其他组件能实时反映这些...

    flex tree 修改icon方法

    标题"flex tree 修改icon方法"正好指出了这一需求。在这个场景下,我们需要通过编程方式来实现对Tree节点图标的个性化设置。 首先,我们要理解Flex Tree的基本结构。Tree组件由一系列的TreeItemRenderer组成,每个...

    flex 4 生命周期

    Flex 4的生命周期改进也体现在事件处理和元数据的使用上,例如` IOErrorEvent`和`StatusEvent`等事件,以及`[Bindable]`、`[SkinPart]`等元数据,这些都增强了组件与外部数据的交互和皮肤的自定义。 尽管Adobe提供...

    Flex技术中AdvancedDataGrid使用方法

    ### Flex技术中AdvancedDataGrid使用方法 #### 一、多列排序 在默认情况下,`AdvancedDataGrid`组件会按照数据被添加至其`DataProvider`的顺序来展示数据。与`DataGrid`组件类似,`AdvancedDataGrid`也支持用户在...

    flex与JS交互示例

    - **Flex调用JavaScript**: 使用`ExternalInterface.call()`方法,将ActionScript函数的返回值传递给JavaScript。例如: ```actionscript var result:Object = ExternalInterface.call("JavaScriptFunction", ...

    Flex4 AIP 中文说明

    Flex4引入了许多新特性,旨在提高开发效率和用户体验,尤其在图形渲染、组件设计以及数据绑定方面有显著提升。 1. **Spark组件架构**:Flex4引入了全新的Spark组件架构,与传统的 Halo 组件相比,Spark组件更加轻量...

    FLEX和使用RemoteObject和后台通信

    `RemoteObject` 可以方便地将Flex应用程序中的ActionScript方法映射到服务器上的业务逻辑方法,从而实现数据的传递和交换。以下将详细讲解如何使用`RemoteObject`以及它的工作原理。 1. **配置Flex项目** 在Flex...

    flex文件中使用html渲染文字等.txt

    通过本文,读者可以全面了解Flex框架下HTML文本渲染的方法与应用场景,以及如何结合Flex组件完成多媒体控制功能。 ### 一、Flex简介 Flex是一种开源的Web应用程序框架,用于构建桌面和移动设备上的高性能富互联网...

    Flex与Java通过实体传递数据

    在Flex中,为了能够将前端的数据对象与后端的服务进行有效映射,通常会在Flex端定义一个实体类,并使用`Bindable`和`RemoteClass`注解来关联前后端的数据模型。 ```as [Bindable] [RemoteClass(alias=...

    Flex4 Declarations in ActionScript

    本篇文章将深入探讨Flex4中的一项核心特性——声明式编程,并通过实际示例来解析其在ActionScript中的具体应用。 声明式编程是一种编程范式,与传统的命令式编程不同,它更注重描述“是什么”而非“怎么做”。在...

    自己整理的flex与java结合的学生管理系统-很好的入门及提升的例子

    5. 数据管理:在Flex客户端,数据通常被封装在Flex的Model类中,这些Model类通过Bindable注解与视图组件关联,当数据发生变化时,视图会自动更新。而在服务器端,数据管理通常涉及实体类(Entity)和DAO,实体类对应...

    flex 异步加载tree

    根据给定的信息,我们可以深入探讨Flex中的异步加载Tree组件的相关知识点。 ### 一、Flex与AsyncTree组件 #### 1. Flex简介 Flex是一种开源的框架,用于构建跨平台的桌面应用程序和移动应用程序。它提供了强大的...

    Flex 3 Cookbook[中文版].pdf

    通过以上介绍,我们可以看出,Flex 3 Cookbook[中文版] 不仅提供了丰富的基础知识,还深入探讨了如何利用 Flex Builder 这样的工具来提高开发效率。此外,书中还涵盖了 MXML 与 ActionScript 的交互方式,以及如何...

    Flex图片上传实例

    在本篇文章中,我们将深入探讨一个具体的Flex图片上传实例,并对其中涉及的关键技术点进行详细解读。此实例不仅提供了一个实际的上传图片的应用场景,而且还包含了一些实用的代码片段,这对于想要了解如何在Flex中...

    flex remoteObject封装后和java通信

    在本文中,我们将深入探讨如何使用Flex中的RemoteObject组件封装后与Java应用程序进行通信。RemoteObject是Adobe Flex框架的一部分,它允许Flex客户端与服务器端的业务逻辑进行交互,通常是通过AMF(Action Message ...

    sql flex (最简单的连接方式)

    例如,可以使用`RemoteObject`或`WebService`组件来调用后端的Java方法,这些方法可以执行SQL查询。 5. 连接配置:在描述中提到的文件如`newScript.as`, `personScript.as`, `personconfig.as`, `newconfig.as`可能...

    Flex分页技术

    在Flex中,我们可以使用DataGrid组件来实现这些功能,提高用户体验并优化性能。 1. **Flex DataGrid 分页技术**: Flex DataGrid 提供了分页功能,以处理大量数据。分页允许用户按页面浏览数据,而不是一次性加载...

    Flex4.5常见问题总结

    除了选择器设置组件外观,Flex还允许直接调用`setStyle`方法进行实时样式调整。效果(effect)用于实现组件的视觉变换,如淡入淡出、位移等,增强用户界面的动态感。 #### 八、数据绑定 数据绑定是Flex的核心特性之...

Global site tag (gtag.js) - Google Analytics