Flex 绑定机制 (ChangeWatcher & BindingUtils )

Flex的绑定机制也是一个亮点，对于数据和显示分离提供很好的支持。在Flex绑定分为xml 绑定和纯As绑定。

这里不讲原理只讲用法，欲了解原理可以查看adobe官方文档，非常详细。

BindingUtils 其实是对ChangeWatcher的一个封装类，可以参考BindingUtils的两个方法的源码。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600" initialize="initializeHandler(event)">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import com.mode.clone.Company;
			import com.mode.clone.Person;
			
			import mx.binding.utils.BindingUtils;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			[Bindable]/* 对于一个基本类型的属性来说，加上 [Bindable]标签默认是在属性改变时候触发绑定*/
			private var inputStr:String;
			/* 对于 复制类型的属性来说，如果绑定是person整个对象，那么只有在对person赋值的时候才会触发绑定.
			如果你想绑定person对象内部的一个属性，那么它内部的那个属性也必须加上[Bindable]标签。*/
			[Bindable]
			public var person:Person;
			[Bindable]
			public var asBindInputStr:String;/* 对于用as绑定的属性必须为public */
			protected function initializeHandler(event:FlexEvent):void
			{
				person ||= new Person();
				person.name = "kenny";
				var company:Company = new Company();
				company.name = "lomboard";
				person.company = company;
			}
			
			protected function changInputStrClickHandler(event:MouseEvent):void
			{
				asBindInputStr = inputStr = 'base one' + Math.random().toString();
			}
			
			[Bindable(event="customEvent")]
			private function bindFun():String
			{
				return "bindFun" +　Math.random().toString();
			}
			
			[Bindable(event="customEvent")]
			public function asBindFun(host:UIComponent):String
			{
				return "asBindFun" +　Math.random().toString();
			}
			
			private function bindFunClickHandler(event:MouseEvent):void
			{
				dispatchEvent(new Event("customEvent"));
				
			}
			
			[Bindable]
			public function get getterFun():String
			{
				return "getterFun" +　Math.random().toString();
			}
			
			public function set getterFun(value:String):void
			{
				
			}
			
			private function getterFunClickHandler(event:MouseEvent):void
			{
				getterFun = "some string" +　Math.random().toString();
				
			}
			
			private function bindComplexObjectClickHandler(event:MouseEvent):void
			{
				person.name = "kenny"+　Math.random().toString();
			}
			
			protected function bindComplexObjectComplexAttClickHandler(event:MouseEvent):void
			{
				person.company.name = "lomboard"+　Math.random().toString();
				
			}
			
			protected function bindPropertyClickHandler(event:MouseEvent):void
			{
				//BindingUtils.bindProperty(baseBindInput,"text",this,"asBindInputStr");//绑定基本数据类型,属性都必须为public
				//BindingUtils.bindProperty(baseBindInput,["person","company","name"]);//绑定复杂数据类型,"getterFun");//绑定get,set方法,属性都必须为public
				BindingUtils.bindProperty(baseBindInput,{name:"asBindInputStr",getter:asBindFun});
				/* 绑定方法,最后这个objec参数是强制的格式，必须还有name和getter属性，name的值必须为host的一个public属性，getter
				方法必须为host的一个pulic方法，并且必须含有参数，次参数代表host。 */
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		
	</fx:Declarations>
	<s:TextInput text="{inputStr}"/><!--绑定-->
	<s:TextInput text="@{inputStr}"/><!--双向绑定-->
	<s:Button click="changInputStrClickHandler(event)" label="base One"/>
	<s:TextInput id="sourceInput"/>
	<s:TextInput id="destinationInput"/>
	<fx:Binding source="sourceInput.text" destination="destinationInput.text" twoWay="true"/>
	<!--twoWay 属性标志是否是双向绑定-->
	<s:Label text="{bindFun()}" click="bindFunClickHandler(event)"/>
	<!--绑定到自定义函数中时，你必须自定义绑定的事件，不然不会绑定-->
	<s:Label text="{getterFun}" click="getterFunClickHandler(event)"/>
	<!--绑定到get set函数中时，你必须保证get set方法配对,然后当调用set方法时,flex就会自动触发PropertyChangeEvent事件-->
	<s:Label text="{person.name}" click="bindComplexObjectClickHandler(event)"/>
	<!--对于复杂类型的绑定,如果你只想绑定person的属性，那么那个属性必须加上[Bindable]标签，person对象不设置[Bindable]标签也可以，只不过有一个warning而已。-->
	<s:Label text="{person.company.name}" click="bindComplexObjectComplexAttClickHandler(event)"/>
	<!--如果你想绑定复杂类型的复杂属性下面的属性，那么这个复杂属性也必须的加上[Bindable]标签。也就是说整个绑定链都得是可以绑定的。-->
	<s:Button label="BindingUtils bindProperty" click="bindPropertyClickHandler(event)"/>
	<s:TextInput id="baseBindInput" />
</s:Application>

 Person:

package com.mode.clone
{
	public class Person
	{
		private var _name:String;
		[Bindable]
		public var company:Company;//另一个自定义对象
		[Bindable]
		public function get name():String
		{
			return _name;
		}

		public function set name(value:String):void
		{
			_name = value;
		}
	}
}

 Company:

package com.mode.clone
{
	public class Company
	{
		[Bindable]
		public var name:String;
	}
}