Flex2使用BindingUtils动态绑定

关于Flex2绑定的例子,大都是使用[Bindable]注释,或在mx视图组件中使用大括号{}来实现的。基本都是象下面的代码

xml 代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
  3.        
  4.     <mx:Script>  
  5.         [CDATA[   
  6.                
  7.             [Bindable]   
  8.             private var myText : String;   
  9.                
  10.         ]]   
  11.     </mx:Script>  
  12.        
  13.     <mx:TextInput id="textInput" x="10" y="10" change="myText = textInput.text + '!'"/>  
  14.     <mx:Label id="textLabel" x="10" y="40" text="{textInput.text}" width="160" height="20" fontWeight="bold" fontSize="12"/>  
  15.     <mx:Text x="10" y="68" text="{myText}" fontSize="12" fontWeight="bold" width="260"/>  
  16.        
  17. </mx:Application>  

但实际项目中,并非都是这种理想的情况,有时你的视图组件是动态生成的,有时你需要动态的改变绑定,有时你使用Sprite动态生成的图形也需要绑定数据,或者你就是喜欢完全使用AS来写。
这时就可以使用mx.binding.utils.BindingUtils类,改写上面的例子

xml 代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">  
  3.        
  4.     <mx:Script>  
  5.         [CDATA[   
  6.             import mx.controls.Label;   
  7.             import mx.controls.TextInput;   
  8.             import mx.binding.utils.BindingUtils;   
  9.                
  10.             private function init():void {   
  11.                 var textInput : TextInput = new TextInput();   
  12.                 var textLabel : Label = new Label();   
  13.                    
  14.                 myBox.addChild(textInput);   
  15.                 myBox.addChild(textLabel);   
  16.                    
  17.                 BindingUtils.bindProperty(textLabel, "text", textInput, "text");   
  18.             }   
  19.                
  20.         ]]   
  21.     </mx:Script>  
  22.        
  23.     <mx:VBox id="myBox" x="10" y="10"/>  
  24.        
  25. </mx:Application>  

这个例子将textInput.text与textLabel.text进行了绑定,而且没有使用[Bindable],也没有使用{}。
使用这种方法,可以将多个视图组件与一个Value Object对象(或叫DTO、Bean等)进行绑定,当VO对象改变时,所有绑定的视图都会改变。也可以在纯as文件中实现动态绑定了。

xml 代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">  
  3.        
  4.     <mx:Script>  
  5.         [CDATA[   
  6.             import model.UserVO;   
  7.             import mx.controls.Label;   
  8.             import mx.controls.TextInput;   
  9.             import mx.binding.utils.BindingUtils;   
  10.                
  11.             private var userVO : UserVO = new UserVO();   
  12.                
  13.             private function init():void {   
  14.                    
  15.                 for (var i : int = 0; i < 3; i++) {   
  16.                     var nameLabel : Label = new Label();   
  17.                     var emailLabel : Label = new Label();   
  18.                        
  19.                     myBox.addChild(nameLabel);   
  20.                     myBox.addChild(emailLabel);   
  21.                        
  22.                     BindingUtils.bindProperty(nameLabel, "text", userVO, "name");   
  23.                     BindingUtils.bindProperty(emailLabel, "text", userVO, "email");   
  24.                 }   
  25.             }   
  26.                
  27.         ]]   
  28.     </mx:Script>  
  29.        
  30.     <mx:HBox x="10" y="10" width="234">  
  31.         <mx:TextInput id="nameInput" width="113" change="userVO.name = nameInput.text"/>  
  32.         <mx:TextInput id="emailInput" width="107" change="userVO.email = emailInput.text"/>  
  33.     </mx:HBox>  
  34.     <mx:VBox id="myBox" x="10" y="38" width="234" height="175"/>  
  35.        
  36. </mx:Application>  
  1. package model   
  2. {   
  3.     [Bindable]   
  4.     public class UserVO   
  5.     {   
  6.         public var name: String;   
  7.            
  8.         public var email: String;   
  9.            
  10.         public var online: Boolean = false;   
  11.     }   
  12. }  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值