数据绑定定义:
幻灯片 2
当数据源对象的数据发生变化时,目标对象的数据会自动更新,而不需要我们再编写代码去强制更新
绑定实际也是借助事件机制来完成的,当目标使用了数据绑定的时候,目标对象就会监听数据源对象的某一固定事件。当数据源发生变化时,数据源会派发改变事件(ChangeEvent),通知目标对象更新数据。这个过程由Flex完成,不用我们手动干预
绑定的前提条件:
源对象的数据和目标对象的数据格式相同


方法:
1 在对象的属性标签中,使用{ }把数据源直接绑定到对象的某个属性上。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    
<mx:HSlider x="47" y="170" width="283" id="fsize" minimum="10" maximum="50" />
    
<mx:Label x="47" y="34" text="Bingo" fontSize="{fsize.value}" width="306" height="91" id="msg" color="#F15906" fontWeight="bold"/>
</mx:Application>

2 在对象的属性标签中,使用{ }把某个函数的返回值作为数据源绑定到对象属性上。函数的参数要使用[Bindable]绑定符号
 
[Bindable],[Bindable(event=“eventname”)]Event表示当数据源发生变化时,数据源所在对象派发的事件类型,它是可选项,默认的事件名是“propertyChange”,一般情况下只需要使用[Bindable]标签
 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 n:int;                
 9             
10             internal function square(num:int):int{
11                 return num*num;
12             }        
13         ]]>
14     </mx:Script>
15     
16     
17     <mx:HSlider x="66" y="103" width="264" minimum="1" maximum="10"
18          snapInterval="1" id="s_num" change="{n=s_num.value}"/>
19     <mx:TextInput x="122" y="53" id="txt" fontSize="12" text="{square(n)}"/>
20     <mx:Label x="66" y="53" text="结果" width="48" fontSize="12" fontWeight="bold"/>
21     
22 </mx:Application>
23 

仿Java Getters&Setters
package com.classes
{

    [Bindable]
    
public class BindClass
    {  
        
public var n:int;       

        
public function BindClass()
        {
        }    
        
        
//[Bindable]
        public function get N():int{
                
return n;
        }    
        
            
        
public function set N(x:int):void{
                n
=x;

        }    
        

    }
}

 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             import com.classes.BindClass;
 8             internal var bc:BindClass=new BindClass();    
 9             
10
11             internal function square(num:int):int{
12                 return num*num;
13             }        
14         ]]>
15     </mx:Script>
16     
17     
18     <mx:HSlider x="66" y="103" width="264" minimum="1" maximum="10"
19          snapInterval="1" id="s_num" change="{bc.n=s_num.value}"/>
20     <mx:TextInput x="122" y="53" id="txt" fontSize="12" text="{square(bc.n)}"/>
21     <mx:Label x="66" y="53" text="结果" width="48" fontSize="12" fontWeight="bold"/>
22     
23 </mx:Application>
24 

3 使用标签
<mx:Binding>
source=“…” destination=“…”
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout
="absolute" creationComplete="init()">
    
    
<mx:Model id="books">
        
<books>
            
<book>
                
<name>城市</name>
                
<author>张悬</author>
            
</book>
            
<book>
                
<name></name>
                
<author>陈绮贞</author>
            
</book>
        
</books>
    
</mx:Model>
    
    
<mx:Binding source="books.book[0].name" destination="txt_name.text"/>
    
<mx:Binding source="books.book[0].author" destination="txt_author.text"/>
    
<mx:Panel x="44" y="24" width="379" height="178" layout="absolute" title="专辑信息" fontSize="12">
        
<mx:Label x="58" y="36" text="专辑" fontSize="12" fontWeight="bold"/>
        
<mx:Label x="58" y="71" text="作者" fontSize="12" fontWeight="bold"/>
        
<mx:TextInput x="111" y="36" id="txt_name" fontSize="12"/>
        
<mx:TextInput x="111" y="71" id="txt_author" fontSize="12"/>
    
</mx:Panel>
</mx:Application>



posted on 2010-03-06 14:48 Ying-er 阅读(352) 评论(0)  编辑  收藏 所属分类: Flex3.0

只有注册用户登录后才能发表评论。


网站导航: