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.        

</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.        

</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. }  

     

关键字：BindingUtils.bindProperty

需导入：import mx.binding.utils.BindingUtils;

/**
    * 动态绑定
    * @params site:Object 被绑定对象
    * @params prop:String 被绑定对象的属性,如textInput的text属性
    * @params host:Object 监视者对象
    * @params chain:Object 监视者对象的属性
    * @return ChangeWatcher
    * **/

BindingUtils.bindProperty(site:Object,prop:String,host:Object,chain:Object)；

view plaincopy to clipboardprint?
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"   
    layout="absolute" initialize="init();">  
      
    <mx:Script>  
        <!--[CDATA[  
            import mx.binding.utils.BindingUtils;  
            import mx.binding.utils.ChangeWatcher;  
              
              
            private var watcher1:ChangeWatcher;  
            private var watcher2:ChangeWatcher;  
              
            /** 
             * 动态绑定 
             * @return void 
             * **/ 
            private function Binding():void {  
                  
                 //绑定ID为txt2的txtInput  
                //绑定属性为txtInput的text  
                //监视者ID为txt1的txtInput  
                //监视者属性为txtInput的text  
                watcher1 = BindingUtils.bindProperty(txt2,"text",txt1,"text");  
                  
                 //绑定ID为txtComb的txtInput  
                //绑定属性为txtInput的text  
                //监视者ID为comb的ComboBox  
                //监视者属性为ComboBox的value  
                watcher2 = BindingUtils.bindProperty(txtComb,"text",comb,"value");  
            }  
              
            /** 
             * 解除绑定 
             * @return void 
             * **/ 
            private function UnBinding():void {  
                //解除绑定  
                watcher1.unwatch();  
                watcher2.unwatch();  
            }         
        ]]-->  
    </mx:Script>  
      
    <mx:ApplicationControlBar dock="true">  
        <mx:Button label="动态绑定" click="Binding();"/>  
        <mx:Button label="解除绑定" click="UnBinding();"/>  
    </mx:ApplicationControlBar>  
      
      
      
    <mx:VBox width="200" height="200">  
          
        <mx:Spacer height="30"/>  
          
        <mx:TextInput id="txt1"/>  
        <mx:TextInput id="txt2"/>  
          
        <mx:Spacer height="30"/>  
              
        <mx:ComboBox id="comb">  
            <mx:dataProvider>  
                <mx:Array>  
                    <mx:String>Beijing</mx:String>  
                    <mx:String>Shanghai</mx:String>  
                    <mx:String>Hangzhou</mx:String>  
                </mx:Array>  
            </mx:dataProvider>  
        </mx:ComboBox>  
              
        <mx:TextInput id="txtComb"/>  
        </mx:VBox>  
</mx:Application> 

3.--------------------------------------------------

可以取代事件派发 的技巧就是用
BindingUtils.bindSetter，这个函数可以把一个类的属性绑定到一个函数上执行
所以有以下：
1、你可以在主文件中绑定几个属性
2、你可以把这个属性在放到cairngorm的全局绑定model中
3、然后更新model的这个属性
4、然后就会激发BindingUtils.bindSetter的绑定函数
 


下面看下这个方法的官方说明
bindSetter () 方法   

public static function bindSetter(setter:Function, host:Object, chain:Object, commitOnly:Boolean = false):ChangeWatcher


将 setter 函数（setter）绑定到可绑定属性或属性链。如果已成功创建 ChangeWatcher 实例，则使用 chain 的当前值调用 setter 函数。

参数  setter:Function — chain 的当前值更改时使用该值的参数进行调用的 Setter 方法。  

host:Object — 属性的宿主。有关详细信息，请参阅 bindProperty() 方法。  

chain:Object — 属性或属性链的名称。有关详细信息，请参阅 bindProperty() 方法。  

commitOnly:Boolean (default = false) — 如果应仅在提交 change 事件时调用处理函数，则设置为 true。有关详细信息，请参阅 bindProperty() 方法。  



返回 ChangeWatcher — 如果已为 chain 参数指定了至少一个属性名称，则返回 ChangeWatcher 实例；否则返回 null。




接下来看看一个具体的实例

1. import mx.binding.utils.BindingUtils;
2. [Bindable]private var model:ModelLocator=ModelLocator.getInstance();
3. BindingUtils.bindSetter(playerStatesWatch, model, "playerStates");
5. private function playerStatesWatch(playerstates:PlayerStates):void
6.                         {
7. //执行代码
9.                         }
12. model.playerStates=new PlayerStates(PlayerStates.LOGINED, playermodel);

复制代码

这 样 当model.playerStates变化时候 就会被BindingUtils.bindSetter的绑定函数检测到 然后开始执行检测函数
又因为playerStates是一个类，随时可以更新信息，所以检测函数就可以分析playerStates的不同属性 做不同的事情了
利用这个可以实现cairngorm这样的全局事件功能
认为可以用这个功能抽象出一个客 户端的扭转流程和modellocator区别开来