flex Data Binding

数据绑定发生的时机
1.当源数据属性已经改变，数据绑定源发出一个事件，这个事件可以在应用执行的任何时候发出，这个事件会触发
Flex将源属性的值复制到目的属性中
2.在应用启动过程中，当源对象发出initialize事件时，所有数据绑定都一次性的被触发以初始化
目的属性，如果源属性是只读的或者静态的常量，那么就只有这一次机会会自动执行这个数据绑定
3.通过程序控制绑定，UIComponent类的executeBindings()方法可以让Flex执行以UIComponents为目的
上的所有绑定，所有容器和控件，以及Repeater组件都是从UICompoent类继承的，Container类和REpeater类的
executeChildBindings()方法可以让自己及其所有子对象上的所有绑定执行，所有容器都是从Container类继承
只有在确保绑定没有自动发生时才能使用executeBindings()方法


[Bindable]元数据标签通过三种方式：
1.在类中定义使用
package com.demo
{
import flash.events.EventDispatcher;
[Bindable]
public class DataObject extends EventDispatcher{

}
}
2.在字段中使用
[Bindable] private var _lastName:String;
3.在方法中使用

<fx:Declarations>
<mx:CurrencyFormatter id="formatter" precision="2" />
</fx:Declarations>
<s:RichText text="{formatter.format( amtInput.text )}" />

4.字段set 监听 绑定自定义事件

<fx:Declarations> 
<s:ArrayCollection id="fruitCollection"> 
<fx:String>Apple</fx:String> 
<fx:String>Banana</fx:String> 
<fx:String>Orange</fx:String> 
</s:ArrayCollection> 
</fx:Declarations> 
<fx:Script> 
<![CDATA[ 
private var _selectedFruit:String; 
[Bindable(event="Demo")] 
private function isOrangeChosen():Boolean 
{ 
return _selectedFruit == "Orange"; 
} 
public function get selectedFruit():String 
{ 
return _selectedFruit; 
} 
public function set selectedFruit( value:String ):void 
{ 
_selectedFruit = value; 
dispatchEvent( new Event( "Demo" ) ); 
} 
]]> 
</fx:Script> 
<s:layout> 
<s:VerticalLayout /> 
</s:layout> 
<s:Label text="Select a Fruit:" /> 
<s:HGroup> 
<s:DropDownList id="fruitCB" 
dataProvider="{fruitCollection}" 
change="{selectedFruit = fruitCB.selectedItem}" /> 
<s:Button label="eat the orange." 
  enabled="{isOrangeChosen()}" /> 
</s:HGroup> 

4.双向绑定

<s:VGroup>
<s:Label text="From Input 2:" />
<s:TextInput id="input1" text="{input2.text}" />
<s:Label text="From Input 1:" />
<s:TextInput id="input2" text="{input1.text}" />
</s:VGroup>

<s:VGroup>
<s:Label text="From Input 2:" />
<s:TextInput id="input1" text="@{input2.text}" />
<s:Label text="From Input 1:" />
<s:TextInput id="input2" />
</s:VGroup>

<fx:Binding source="input1.text" destination="input2.text" twoWay="true" />
<!-- source 源属性
-- destination 目标属性
-->
<s:VGroup>
<s:Label text="From Input 2:" />
<s:TextInput id="input1" />
<s:Label text="From Input 1:" />
<s:TextInput id="input2" />
</s:VGroup>

5.使用 BindingUtils 绑定 定义绑定观察者 （watchers）

<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"
creationComplete="handleCreationComplete();">
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.binding.utils.ChangeWatcher;
private var nameWatcher:ChangeWatcher;
private function handleCreationComplete():void
{
nameWatcher = BindingUtils.bindProperty( nameField, "text",
nameInput, "text" );
}
private function handleClick():void
{
if( nameWatcher.isWatching() )
{
nameWatcher.unwatch();
btn.label = "watch";
}
else
{
nameWatcher.reset( nameInput );
btn.label = "unwatch";
}
}
]]>

</fx:Script>
<s:Panel title="User Entry.">
<s:layout>
<s:VerticalLayout paddingLeft="5" paddingRight="5"
paddingTop="5" paddingBottom="5" />
</s:layout>
<s:HGroup verticalAlign="bottom">
<s:Label text="Name:" />
<s:TextInput id="nameInput" />
</s:HGroup>
<s:HGroup verticalAlign="bottom">
<s:Label text="You Entered:" />
<s:RichText id="nameField" />
</s:HGroup>
<s:Button id="btn"
label="unwatch"
click="handleClick();" />
</s:Panel>
</s:Application>

<fx:Binding source="textInput1.text"
destination="textInput2.text"
twoWay="false" />

5.1 使用@ 符号绑定数据

<s:TextInput id="textInput2" text="@{text}" />

6.获取xml中相关数据

<mx:Binding source="myTI.text" destination="myText.text"/>
	<fx:XML id="itemData" xmlns="">

	<fx:Binding source="{itemData..item.(@id == '1').name} {itemData..item.(@id ==
				'1').description.toLowerCase()}" destination="lab.text" />

-- 绑定一个Object对象 当然这个类只要继承 Object

private var obj:Object = {name:'Tom Waits',
				album:'Rain Dogs',
				genre:'Rock'};
[Bindable]
private var proxy:ObjectProxy = new ObjectProxy( obj );
private function handleClick():void
{
	proxy.name = nameField.text;
	proxy.album = albumField.text;
	proxy.genre = genreField.text;
}

package com
{
[Bindable]
public class BindableObject extends Object {
public var stringProp:String = "String property";
public var intProp:int = 52;
public function BindableObject() {
	super();
}
}
}

<fx:Declarations>
<fx:Script>
	<![CDATA[
		import com.BindableObject;
		[Bindable]
		public var myObj:BindableObject = new BindableObject();
		[Bindable]
		public var anotherObj:BindableObject =new BindableObject();
		public function initObj():void {
			anotherObj.stringProp = 'anotherObject';
			anotherObj.intProp = 8;
		}
	]]>
</fx:Script>
</fx:Declarations>
<mx:Text id="text1" text="{myObj.stringProp}"/>
<mx:Text id="text2" text="{myObj.intProp}"/>
<mx:Button label="Change myObj" click="myObj = anotherObj;"/>

7.动态绑定 extends Proxy implements IEventDispatcher

package com
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.IEventDispatcher;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.utils.Proxy;
	import flash.utils.flash_proxy;
	import mx.events.PropertyChangeEvent;
	[Bindable(event="propertyChange")]
	dynamic public class Properties extends Proxy implements IEventDispatcher
	{
		private var _evtDispatcher:EventDispatcher;
		private var _data:XML;
		public function Properties( source:XML )
		{
			_evtDispatcher = new EventDispatcher();
			data = source;
		}
		public function get data():XML
		{
			return _data;
		}
		public function set data( xml:XML ):void
		{
			_data = xml;
		}
		// use E4X to return property value held on XML
		override flash_proxy function getProperty( name:* ):*
		{
			if( _data == null ) return "";
			var attributeValue:String = QName( name ).toString();
			var value:* = _data..property.(@id == attributeValue );
			return value;
		}
		// use E4X to modify property value on XML, and dispatch 'propertyChange'
		override flash_proxy function setProperty( name:*, value:* ):void
		{
			var attributeValue:String = QName( name ).toString();
			var oldVal:String = _data..property.(@id == attributeValue );
			var index:Number = _data..property.(@id == attributeValue ).
				childIndex();
			_data.replace( index, <property id={name}>{value}</property> );
			var evt:Event = PropertyChangeEvent.createUpdateEvent( this, name,
				oldVal, value );
			dispatchEvent( evt );
		}
		// IEventDispatcher implementation
		public function addEventListener( type:String,
										  listener:Function,
										  useCapture:Boolean = false,
										  priority:int = 0,
										  useWeakReference:Boolean = false):void
		{
			_evtDispatcher.addEventListener( type, listener, useCapture,
				priority, useWeakReference );
		}
		// IEventDispatcher implementation
		public function removeEventListener( type:String,
											 listener:Function,
											 useCapture:Boolean = false ):void
		{
			_evtDispatcher.removeEventListener( type, listener, useCapture );
		}
		// IEventDispatcher implementation
		public function dispatchEvent( evt:Event ):Boolean
		{
			return _evtDispatcher.dispatchEvent( evt );
		}
		// IEventDispatcher implementation
		public function hasEventListener( type:String ):Boolean
		{
			return _evtDispatcher.hasEventListener( type );
		}
		// IEventDispatcher implementation
		public function willTrigger( type:String ):Boolean
		{
			return _evtDispatcher.willTrigger( type );
		}
	}
}

<fx:Declarations>
<fx:XML id="propertiesData" source="assets/properties.xml" />
<!-- 这个xml资源可以是一个url  -->
<!-- 基本格式如下
<fx:XML id="propertiesData" xmlns="">
<properties>
<property id="name">Tom Waits</property>
<property id="album">Rain Dogs</property>
<property id="genre">Rock</property>
</properties>
</fx:XML>
-->
</fx:Declarations>
<fx:Script>
	<![CDATA[
		import com.Properties;
		import mx.binding.utils.BindingUtils;
		private var properties:com.Properties;
		private function handleCreationComplete():void
		{
			properties = new Properties( propertiesData );
			establishBindings();
		}
		private function establishBindings():void
		{
			BindingUtils.bindProperty( nameOutput, "text",
				properties, "name" );
			BindingUtils.bindProperty( albumOutput, "text",
				properties, "album" );
			BindingUtils.bindProperty( genreOutput, "text",
				properties, "genre" );
		}
		private function handleSubmit():void
		{
			properties.name = nameInput.text;
			properties.album = albumInput.text;
			properties.genre = genreInput.text;
		}
	]]>
</fx:Script>
<s:Button label="ok" click="handleSubmit();" />

8.绑定数组

<fx:Declarations>
<fx:Script>
	<![CDATA[
	import mx.collections.ArrayCollection;
	[Bindable]
	public var myAC:ArrayCollection = new ArrayCollection(["One", "Two", "Three", "Four"]);
	[Bindable]
	public var myAC2:ArrayCollection = new ArrayCollection(["Uno", "Dos", "Tres", "Quatro"]);
	]]>
</fx:Script>
</fx:Declarations>
<mx:Text id="text1" text="{myAC[0]}"/>
<mx:Text id="text2" text="{myAC.getItemAt(0)}"/>

9.绑定Model

<mx:String id="areaCode">707</mx:String>
<mx:Model id="model">
<info>
<name>
<firstName>Tim</firstName>
<lastName>O'Reilly</lastName>
</name>
<email>tim@oreilly.com</email>
<phone>{areaCode}827-7000</phone>
</info>
</mx:Model>
<mx:Binding source="model.phone" destination="nameLabel.text"/>
<mx:Label id="nameLabel"/>

使用[Bindable元数据标记]
1.在public 类中定义之前使用
在这个地方使用[Bindable]使得类中定义的全部public变量以及同时具有的set get方法
的public 属性能成为数据绑定表达式的源，在这中情况下，[Bindable]不使用任何参数
[Bindable]
public class MyDemo{}
在public class 之前使用[Bindable]只是将绑定作用与public属性，它不会作用与private 和
protected属性以及那些定义其他namespace中的属性，必须在非public属性前插入[Bindable]
标记才能成为数据绑定的源。
2.在public,protected 或者private 属性之前使用
在public,protected或者private属性之前使用[Bindable]可以将这个特定的属性定义为支持数据绑定的
例如：
[Bindable]
private var demo:String;
[Bindable (event="nameChanged")]
public var name:String ;
flex编译器自动为那个属性名产生 propertyChange，类型瓦尔PropertyChangeEvent的事件
如果写入的属性不变，那么flex不会发出事件或者更新属性。
3.在由get set 方法所有定义public ,private 或protected属性之前使用
在这种情况下使用 [Bindable]必须同时为属性定义get set 方法，如果只有一个set 方法，那么就创建了一个只写的属性，这个的属性不能
作为数据源绑定，如果只定义了一个set 方法那么就创建了一个只读的属性，把只读属性当作数据源绑定而不是用
[Bindable]标记，就相当于使用了一个const关键字定义的变量来作为数据绑定的源；这样的属性只能在引用启动时触发绑定一次，以后就不会在触发
[Bindable]
public function set demo(value:String):void
{
this.demo=value;
}

4.关于绑属性事件的方法
[Bindable(event="changeName")]
public function set name(value:String):void
{
//创建并分发事件
dispatchEvent(new Event("changeName"));
}
public function get name():String
{

}