`

Flex [Bindable] 以及使用方法

    博客分类:
  • flex
 
阅读更多
绑定:

举个例子: 给下面的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技术中AdvancedDataGrid使用方法

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

    细细品味Flex——新Flex学习手册.pdf

    - **工欲其善,先利其器(Flex Builder)**:介绍了如何使用Adobe Flex Builder进行Flex项目的开发,包括下载、安装、启动开发环境、创建“Hello World”项目及MXML编程模型。 - **建立扎实的ActionScript 3.0语法...

    flex与JS交互示例

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

    flex 4 生命周期

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

    FLEX和使用RemoteObject和后台通信

    这里通常会指定服务端使用的协议(如AMF或HTTP)以及目标URL,以便Flex客户端知道如何连接到服务器。 2. **创建RemoteObject实例** 在Flex代码中,创建一个`RemoteObject`实例,指定服务名称和服务端的命名空间。...

    flex 学习资料汇总

    通过学习MXML和ActionScript的基础知识、了解如何使用Flex Builder创建项目以及掌握MXML与ActionScript的交互方式,开发者可以有效地利用这些技术来开发出功能丰富且用户友好的应用。同时,参考《Flex 3 Cookbook》...

    Flex4 AIP 中文说明

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

    Flex与Java通过实体传递数据

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

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

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

    Flex4.5常见问题总结

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

    Flex分页技术

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

    flex remoteObject封装后和java通信

    例如,假设我们有一个名为`MyJavaClass`的Java类,其中包含一个名为`myServerMethod`的方法,我们需要在Flex客户端使用相同的名称来调用。 ```java public class MyJavaClass { public String myServerMethod...

    flex数据绑定的原理

    当我们使用`[Bindable]`元数据标签标记一个类的成员变量时,Flex编译器会自动为这个变量生成相关的访问器(getter和setter)。例如,在提供的代码段中,`list`变量被标记为`[Bindable]`: ```actionscript public ...

    flex学习心得

    除了使用选择器设置外观之外,Flex还允许直接通过调用`setStyle`方法来修改组件的样式属性。 #### 十、Flex 4中的类选择器 在Flex 4中,类选择器需要使用特定的命名空间,例如: ```css @namespace s "library://ns...

    Flex4 Declarations in ActionScript

    MXML是一种标记语言,它允许开发者用XML语法来声明UI组件,如按钮、文本框等,以及它们的属性和事件监听器。例如,我们可以声明一个Button组件: ```xml 点击我" click="handleClick(event)" /&gt; ``` 这段代码简洁...

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

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

    Flex之URLLoader加载XML

    通过以上解释,我们可以了解到如何在Flex应用中使用`URLLoader`加载XML文件,然后将数据解析并绑定到UI组件,从而实现动态数据展示。这在构建数据驱动的富互联网应用程序时非常常见,有助于提高用户体验和交互性。

Global site tag (gtag.js) - Google Analytics