`

flex中的数据绑定 bindable

    博客分类:
  • flex
阅读更多
一个类声明绑定,相当于给这个类里的所有属性都声明了绑定。等同于你把这个类里的所有属性都声明绑定。
那么这个类的属性如果发生了变化,则会触发绑定。

比如
[Bindable]
public ClassA{
    //这里用static是为了调用方便,非static是一样的
    public static var data:Object
}
如果在外面引用,比如<mx:Label text="{ClassA.data}" />
当data属性改变后,这个label是可以变化的。

但是有个细节要注意到,绑定之所以会被触发,是因为被绑定的对象的引用变化了,如果引用没有改变则不会触发绑定。详细举例来说明

刚才说到。ClassA.data其实也被声明了绑定,如果我们这么写
ClassA.data="Test Binding"是会触发绑定的,
因为,data属性从null变为了一个string

如果我们在定义data时,他不是一个基础类型(as里,基础数据类型是String,int,uint,Number),是一个封装类型时(XML,Object,Array。。。),我们就要考虑到在封装类型内部是否实现了抛出绑定。什么意思呢

如果这个data属性被定义为某个 不为null 的封装类,比如是一个Array
public static var data:object = [ {name:'user1'}, {name:'user2'} ];

如果我们在组件中这样引用
<datagrid dataprovider="{ClassA.data}"> ...<column datafield="name" />

当我们在代码中这样改变data时
ClassA.data[0].name="change!"

结果是:没有发生改变?为什么呢?

刚刚说到了,绑定是检测声明了绑定对象(或属性)的引用是否改变,实际上,我们声明只到达data这个属性(对象)为止,至于里面的每个元素的每个属性我们并没有绑定,如果这些发生了改变,绑定是不会触发的。

这点,即使不是对类进行绑定,直接绑定其他变量时也是相同遵守的。

因此,很多人使用bindable去绑定结果集的时候,对结果集的操作不会影响到引用的控件,
有种避免的办法就是对所有自定义类型对象都声明绑定,比如这个data属性,可以定义为User类,并对这个User类声明绑定。
这样只要单个对象有绑定,那么就不会存在这个问题,但是这样也带来不少麻烦,定义如此多的VO,也会很繁琐。
特别是如果不是使用的ro,而是用的httpservice之类的请求,返回结果都是xml、xmllist等对象的情况下,这个办法就不是很好用了。因为必须转换到自定义的集合中去。

因此绑定也并非是万能的,某些时候还是需要手动的去处理一下。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~以上来自RIACHINA
[Bindable]专门用来定义绑定中的数据源对象,
       [Bindable]的用法:
       1.变量前定义:使用[Bindable]后,下一行表达式定义的变量就可以被用在绑定中。
              方法一:[Bindable]
         方法二:[Bindable(event=”eventname”)]   event事件名指当数据源发生变化时,
数据源所在对象派发的事件类型,它是可选的。如果不写,默认事件名是“propertyChange”
       2.函数前定义:此函数必须通过setter和getter方式定义, [Bindable]要用在setter函数前面。
              [Bindable]   
              public function set Num(n:Number):void{
                     num=n;
              }
              public function get Num():void{
                     return num;
              }
              虽然是方法,但使用时,也是用 .  语法,即 ~ . Num。
3. 公用类前定义:当使用了绑定标签后,这个类的所有公有变量,包括setter和getter都可以用于绑定。
package tree{
        [Bindable]
        public class myTest{
              private  var num:Number=0;
               public var className:String=”aaa”; //可用数据绑定
                            public function set Num(n:Number):void{   //可用数据绑定
                                   num=n;
                            }
                            public function get Num():void{
                                return num;
                            }
        }
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~来自血色残阳的blog

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/gongfy/archive/2008/09/01/2862852.aspx


http://www.noupe.com/adobe/flex-developers-toolbox-free-components-themes-and-tutorials.html经典中的经典
http://www.efflex.org/EfflexExplorer.html堪称经典
http://mofeichen.iteye.com/blog/466171里面有好多特效例子
http://www.marcusschiesser.de/?p=67 3D相册,还不错
http://www.switchonthecode.com/tutorials/getting-started-with-adobe-flex-and-away3d 3D旋转-有源码
http://actionscriptnotes.com/showcase/renju/Main.html flex 开发的五子棋,效果很好
http://dougmccune.com/blog/2008/02/26/examples-from-my-360flex-session-using-open-source-community-projects/
包括:VistaFlow效果、MP3Flow等其他
http://dougmccune.com/360Flex_ATL/FlexSpyEventListeners/flex图表和datagrid切换效果


在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中无效。






[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 &quot;&quot;;
       }
       else
       {
              var _w:String = &quot;&quot;;
              for(var i:int=0 ; i&lt;content.length ; i++)
              {
                     _w += content[i] + &quot;\r\n&quot;;
              }
              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(&quot;_contectChanged&quot;));
}
[Bindable(&quot;_contectChanged&quot;)]             
public function get _wholeText():String
{
       if(content.length == 0)
       {
              return &quot;&quot;;
       }
       else
       {
              var _w:String = &quot;&quot;;
              for(var i:int=0 ; i&lt;content.length ; i++)
              {
                     _w += content[i] + &quot;\r\n&quot;;
              }
              return _w;
       }
}
这样就避免了编译器去自动识别。自己加上绑定关系,当_content被赋值,发出_contentChanged事件,通知所有被绑定的getter方法执行一遍。这也说明了,绑定不过是事件游戏而已,flex为用户隐藏了很多底层算法。

分享到:
评论

相关推荐

    flex数据绑定的原理

    在Flex开发中,数据绑定(Data Binding)是一种强大的机制,它允许UI组件的状态与应用程序的数据模型之间自动同步。数据绑定的原理是通过监听数据源的变化,并自动更新与之绑定的UI组件,反之亦然,从而简化了代码并...

    Flex Bind数据绑定实例代码

    本实例代码将深入探讨Flex中数据绑定的工作原理以及如何在ActionScript 3.0中实现它。 数据绑定的基本概念是将UI组件的属性(如文本框的文本)与应用程序中的数据源(如数组或对象的属性)关联起来。当数据源发生...

    Flex初级数据绑定代码

    本文将详细介绍一个Flex应用程序中的初级数据绑定实例。通过分析HelloWorld2.mxml文件,我们将深入了解Flex中的数据绑定机制及其基本用法。 #### 二、Flex与数据绑定 Flex是一种用于构建跨平台富互联网应用(RIA)的...

    FLEX数据绑定四种方式

    本文将详细介绍Flex中数据绑定的四种主要方式:“{}”绑定表达式、[Bindable]绑定符号、`&lt;mx:Binding&gt;`标签以及BindingUtils动态绑定。 #### 二、“{}”绑定表达式 **简介** “{}”绑定表达式是一种最直接和简单的...

    FLEX 数据绑定专题一(转)

    2. ActionScript数据绑定:在ActionScript代码中,可以使用Bindable元标签声明类的属性为可绑定的,然后使用`bindable`关键字定义绑定表达式。 数据绑定的应用场景: 数据绑定在FLEX中广泛应用于各种场景,包括但不...

    FLEX数据绑定专题

    在Flex开发中,数据绑定是一项核心特性,它允许开发者轻松地将用户界面组件与应用程序的数据模型关联起来。本文将深入探讨“FLEX数据绑定专题”,包括其多种实现方式以及如何结合Java作为后端来实现数据交换。 首先...

    flex页面跳转及数据绑定

    在Flex开发中,页面跳转和数据绑定是两个核心概念,它们对于构建动态且交互性强的应用至关重要。让我们分别深入探讨这两个主题。 首先,Flex页面跳转。在Flex中,有多种方式来实现场景间的切换: 1. **ViewStack...

    flex数据绑定

    数据绑定是Flex开发中的核心概念,它允许UI组件与应用程序数据之间建立动态的连接,使得当数据发生变化时,界面可以自动更新,反之亦然。这种特性极大地简化了开发者的工作,提高了代码的可维护性和效率。 标题...

    flex [bindadle]标签数据绑定经典案例

    本案例通过一个简单的水果选择场景,生动展示了Flex中数据绑定的原理和应用。数据绑定不仅简化了UI与数据模型之间的交互逻辑,还提高了程序的响应速度和用户体验。对于初学者而言,掌握数据绑定的基本概念和技术,是...

    Flex DataGrid从XML文件中加载数据

    在Flex编程中,`Flex DataGrid` 是一个用于展示数据集的组件,它允许用户以表格形式查看和操作数据。本示例展示了如何从XML文件加载数据并将其显示在Flex DataGrid中。以下是对该话题的详细解释: 1. **XML数据源**...

    FLEX数据传输与交互

    1. 数据绑定:FLEX中的数据绑定是其强大功能之一,它允许UI组件的属性自动反映模型数据的变化,反之亦然。这简化了UI与数据模型之间的同步工作。 2. Model-View-Controller(MVC):FLEX鼓励使用MVC设计模式,分离...

    Flex Data Binding详解

    在Flex中,要使属性具备数据绑定的能力,通常需要在属性声明前添加`[Bindable]`元数据标签。例如: ```actionscript [Bindable] private var ss:String = "aaa"; ``` 如果没有指定触发绑定的特定事件(如`...

    flex学习记录非常详细

    在本文中,我们将深入探讨Flex中的数据绑定机制,这是Flex应用中一个至关重要的概念。 数据绑定是Flex中的一种强大特性,它使得UI组件的属性可以直接与应用程序的数据模型进行连接。这意味着,当数据模型发生改变时...

    Flex 2 中的元数据标签

    ### Flex 2 中的元数据标签 在Flex 2中,元数据标签是用于提供类、方法或属性的额外信息的一种特殊标记。这些标签通常位于类定义或成员声明之前,并被ActionScript编译器用来控制类的行为或者为开发工具提供有关...

    flex绑定资源文件1

    在Flex中,我们可以通过[Bindable]和[Embed]元标签来加载和绑定资源。[Bindable]标记意味着该变量的改变会触发视图的更新,而[Embed]则用于将外部资源如图片嵌入到编译后的SWF文件中。例如,在资源类中,我们可以...

    Flex4 AIP 中文说明

    此外,还增加了 Bindable、Observer 和 Bindable Event 等元数据,让数据绑定更加灵活和强大。 5. **MXML改进**:MXML作为Flex的声明式语言,在Flex4中变得更加强大。它可以用来定义组件、事件处理函数甚至...

    flex4-binding-custom-Class.rar_flex_flex4

    在Flex 4中,数据绑定是一项强大的特性,它允许开发者创建动态、响应式的用户界面,无需编写大量的事件处理代码。本教程将深入讲解如何在Flex 4中对自定义类进行数据绑定,通过一个实际的MXML文件和AS文件示例来阐述...

    Flex Bindable 的用法

    `[Bindable]`是Flex中最常用的元数据之一,它主要用于实现数据绑定功能。数据绑定是Flex应用中的核心概念,它允许视图组件与应用程序模型之间的数据自动同步。 元数据不是语言本身的一部分,而是为编译器设计的,...

    flex 绑定元数据

    Flex绑定元数据是Flex技术中的一个高级话题,它允许开发者通过元数据标记语言来动态地定义和引用外部资源,比如图片或者Flash文件。在Flex初学者的笔记中,主要强调了如何使用[Bindable]关键字和[Embed]标记来实现...

    Flex 实时曲线图(定时获取后台数据)

    通过上述分析,我们了解到这个Flex实时曲线图的核心实现是利用`setInterval`定时器不断向`ArrayCollection`数据集合中添加新生成的数据,并通过`mx:LineChart`组件将这些数据可视化展示出来。这种方式简单而有效,...

Global site tag (gtag.js) - Google Analytics