守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 340|回复: 0

[技术资料] Flex数据绑定大全

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51822
    钢镚
    1422

    开源英雄守望者

    发表于 2016-7-27 14:11:28 | 显示全部楼层 |阅读模式

    总结一下Flex中的一般的数据绑定的几种实现方法。

    首先先讲一下啥叫绑定呢?说白了就是把两个或几个东西绑在一起,一个变化的时候其他的也得跟着他变。这就产生了动态的效果了。其实叫数据绑定,到不如叫自动刷新合适。

    1、用“{}”来进行绑定

    <mx:TextInput id="txtSource" />
    <mx:Text    id="txtDestination"   text="{txtSource.text}"/>

    如果希望双向绑定的话,可以这样

    <mx:TextInput  id="{txtDestination.text}" />
    <mx:Text   id="txtDestination"    text="{txtSource.text}"/>

    在“{}”这中间,可以计算表达式、连接字符串、条件表达式、函数,反正大概就是可以一句话写下的代码都可以。、

    连接字符串不用“+”,直接写在后面

    <mx:TextInput id="txtSource" />
    <mx:Text id="txtDestination" text="{Number(txtSource.text)*100}"/>

     

    2、用<mx:Binding>标签

    <mx:Binding source="Number(txtSource.text) * 100"   destination="txtDestination.text" />

    <mx:TextInput id="txtSource" />
    <mx:TextInput id="txtDestination"/>

    如果希望双向绑定的话,<mx:Binding>标签中有个 twoWay 属性,可以设置true或false来选择单向的还是双向的。

     

    3、使用ActionScript来进行数据绑定

    使用类mx.binding.utils.BindingUtils来创建mx.binding.utils.ChangeWatcher对象

    有两个方法,bindProperty 将公用属性(site Object 上的 prop)绑定到可绑定属性

                      bindSetter    将setter 函数(setter)绑定到可绑定属性

     

    4、[Bindable]元数据标签

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

    啥是元数据(metadata)

    首先要明白元数据不是语法的一部分,而是专门给编译器用的,说白了是告诉编译器做某些事情,学过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也跟着自动变化了,爽吧。

    能用在哪里

    纯[Bindable]标签只能用在三个地方: 变量 getter/setter。是不是public没有关系,private的就只能给自家用呗。用在Class上就是简单的给所有的public属性(包括变量,getter/setter,普通方法)加上[Bindable],可是一般的方法(除了getter和setter之外的方法都是一般的方法)不能用[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,倒是可以的。原来为了降低复杂度和提高效率,系统对于复杂情况的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为用户隐藏了很多底层算法。

    这也就是下面要讲的。。。


    5、绑定到一个普通函数

    利用[Bindable]元数据标签进行绑定其实等价与[Bindable(event="propertyChange")],Flex中的数据绑定的基础其实是一个基于事件的系统。默认的数据绑定的事件类型是分发到propertyChange事件。有时我们可以自定义一个时间类型,通过使用[Bindable]标签中的event属性。这样我们就可以对于一个类中的一般方法(非getter和setter方法)作为数据源进行绑定。

    例子:

    <fx:Script>
      <![CDATA[

       private var _fruit:String;
       private var _fruits:Array = ["Apple","Banana","Orange"];
       [Bindable]
       public var _label:String ="first";

       public function get fruit():String
       {
        return _fruit;
       }

       public function set fruit(value:String):void
       {
        _fruit = value;
        dispatchEvent(new Event("fruitChanged"));
       }

       private function initHandler():void{
        fruitCB.dataProvider = _fruits;
       }
       
       [Bindable(event="fruitChanged")]
       private function isOrangeChosen():Boolean{
        return _fruit == "Orange";
       }
       
       
       
      ]]>
     </fx:Script>
     
     <mx:Label text="select a fruit:"/>
     <mx:HBox>
      <mx:ComboBox id="fruitCB" change="{fruit = fruitCB.selectedLabel}" />
      <mx:Button label="Eat the orange." enabled="{isOrangeChosen()}" /> 
      <mx:Label text="{_label}" width="146"/>
      <mx:Button click="_label = 'second'"/> 
      
     </mx:HBox>

     

     

    来源:http://blog.csdn.net/liruizhuang/article/details/5835327

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-12-16 15:27 , Processed in 0.041948 second(s), 33 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表