Flex数据绑定大全-守望者-AIR技术交流

破晓发表于 2016-7-27 14:11:28

Flex数据绑定大全

总结一下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 将公用属性（<code>site</code> Object 上的 <code>prop</code>）绑定到可绑定属性                  bindSetter    将setter 函数（<code>setter</code>）绑定到可绑定属性 4、元数据标签大概又是Flex用得最多的元数据了。刚开始用用确实好简单，效率真是没的说。不过这几天用着却碰到了些问题，我自己搜集了些资料，想着有必要在blog里总结一下吧。 啥是元数据（metadata） 首先要明白元数据不是语法的一部分，而是专门给编译器用的，说白了是告诉编译器做某些事情，学过java之类的应该知道。那Bindable来讲，它的作用是告诉 flex编译器，给某些某些东西建立绑定关系，flex编译器会在编译过程中给AS（flex编译器就是把mxml编译成as，再编译到swf，也可能直接编译倒swf，我这里假设有as这么个环节）加一点事件发生和处理之类的代码，由此绑定的关系便建立了，如果我们用纯粹as3代码来写也是可以实现的，就是太麻烦。 啥是绑定 知道继续跳过。举个例子：给下面的public变量加上 public var name:String = ""; 作为一个public变量，肯定既可以被赋值，也能赋值给别的变量。绑定的作用就是，当name改变的时候（被赋值了），可能通知其它被name影响（赋值给它们）的变量发生改变。这里的“可能”就需要编译器来判断，这就是为什么元数据是给编译器用的原因了。在mxml里用{}的语法的地方就是绑定的对象，比如label={xxx.name}，当name变化，label也跟着变化。这样，我们只是很简单的改变了name的值，由于有绑定，界面上的label也跟着自动变化了，爽吧。 能用在哪里 纯标签只能用在三个地方：①类② 变量③ getter/setter。是不是public没有关系，private的就只能给自家用呗。用在Class上就是简单的给所有的public属性（包括变量，getter/setter，普通方法）加上，可是一般的方法（除了getter和setter之外的方法都是一般的方法）不能用呀（后面会讲到怎么用在一般的方法上），于是一般就能看到flex给了个warning，直接无视<img src="http://image4.360doc.com/DownloadImg/2009/6/9/18042_3827637_1.gif" border="0" alt="" style="border: none; max-width: 100%;">。变量嘛就是上面讲的，很简单略掉。 用在只读，只写属性（getter/setter）上面 终于讲到关键地方了，因为getter和setter很像方法，用起来会有点不同。看看这个例子： private var content:Array = new Array(); public function set _content(ct:String):void {        content = ct.split(SEP); }                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 + "/r/n";               }               return _w;        } } 原来的设想是content绑定_wholeText，可它是不工作的。为什么？_wholeText太复杂了，被编译器排除在“可能”之外，编译器认为没有绑定关系，如果只是简单的return content，倒是可以的。原来为了降低复杂度和提高效率，系统对于复杂情况的getter会被忽略。如何解决？可以手动建立绑定，即。把代码改成这样： private var content:Array = new Array(); public function set _content(ct:String):void {        content = ct.split(SEP);         this.dispatchEvent(new Event("_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 + "/r/n";               }               return _w;        } } 这样就避免了编译器去自动识别。自己加上绑定关系，当_content被赋值，发出_contentChanged事件，通知所有被绑定的getter方法执行一遍。这也说明了，绑定不过是事件游戏而已，flex为用户隐藏了很多底层算法。这也就是下面要讲的。。。 5、绑定到一个普通函数利用元数据标签进行绑定其实等价与,Flex中的数据绑定的基础其实是一个基于事件的系统。默认的数据绑定的事件类型是分发到propertyChange事件。有时我们可以自定义一个时间类型，通过使用标签中的event属性。这样我们就可以对于一个类中的一般方法（非getter和setter方法）作为数据源进行绑定。例子：<fx:Script>   <!;        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;    }            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

页: [1]

守望者--AIR技术交流's Archiver

Flex数据绑定大全