Flex数据绑定

关于数据绑定

      

   数据绑定是将一个组件中的数据同另外一个组件中的数据联系起来的过程，它为不同的层次之间传输数据提供了一个便捷的方法，数据绑定需要一个源属性，一个目的属性，以及何时将数据从源属性拷贝到目的属性的触发事件，当源属性发生变化的时候，将触发事件。

   在Flex中，提供了数据绑定的三种方法，在MXML中利用<mx:Binding>和{},以及在ActionScript使用BindingUtils的相关方法，下面我们将逐个谈谈下面几个方法的利用。

a.使用MXML的<mx:binding>来实现数据绑定

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >  
   <mx:Binding source="bindFrom.text" destination="bindTo.text"/>
	<mx:Panel width="1024" height="768" layout="absolute">
		<mx:Form x="10" y="22" width="300" height="100">
			<mx:FormItem label="BindFrom:">
				<mx:TextInput id="bindFrom"/>
			</mx:FormItem>
			<mx:FormItem label="BindTo:">
				<mx:TextInput id="bindTo"/>
			</mx:FormItem>
		</mx:Form>
	</mx:Panel>
 </mx:Application>  

   从这个例子我们可以看出，我们是将bindFrom和bindTo两个文本框绑定起来，这样当bindForm文本框的内容发生变化时，bindTo文本框的内容将发生变化；该例子只是实现一个单向的绑定，若想实现双向绑定，我们只需要，再加一个<mx:Binding>标记就可以实现了。

 

b.利用{}实现数据绑定

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >  
  	<mx:Panel width="1024" height="768" layout="absolute">
		<mx:Form x="10" y="22" width="300" height="100">
			<mx:FormItem label="BindFrom:">
				<mx:TextInput id="bindFrom" text="{bindTo.text}"/>
			</mx:FormItem>
			<mx:FormItem label="BindTo:">
				<mx:TextInput id="bindTo" text="{bindFrom.text}"/>
			</mx:FormItem>
		</mx:Form>
	</mx:Panel>
 </mx:Application>  

 利用这种形式，我们很容易将同一个层次的数据绑定起来，使数据能够实时的发生变化

c.使用[Bindable]实现数据绑定

  Flex允许使用ActionScript实现数据绑定，利用[Bindable]元数据标签声明变量或者类，开发人员就可以将变量绑定到组件，这时无论绑定的变量发生了变化，Flex组件都将及时更新。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >  
<mx:Script>
[Bindable]
public var myLableName :String="hello world";
</mx:Script>
  	<mx:Panel width="1024" height="768" layout="absolute">
		<mx:Label text="{myLableName}"/>
		<mx:Label text=" Type into text field below to hange text above"/>
		<mx:TextInput id="newText" change="myLableName=newText.text"/>
	</mx:Panel>
 </mx:Application>  

  

 从这里例子，我们可以看出，任何一个组件发生变化，界面也将发生变化。