変数へのバインディングと双方向バインディング

Flex/AIR

BindingってクラスがFlexにはあったんですね。
知らなかったです。
これを利用すると簡単に双方向バインディングが実現できる。


今から紹介するソースは、
双方向バインディングの例ではないですけど、
これに使えると思ったソースです。


今まで、僕はmxmlのScriptタグないで宣言した変数へのバインディングは、
テキストフィールドの値が変更されたときのイベントである
changeイベントの送出があったときに
テキストフィールドの値を変数へ代入するというように実装していました。


しかし、それだと、コードが長くなって大変でした。
以下のようなコードが必要で、Changeイベントの送出をとるために、
コンポーネントにもchange属性を設定しなくてはいけない。

<mx:Script>
	<![CDATA[
		private var text:String = "";
		
		public function onChange(event:Event):void {
			text = textInput.text;
		}
	]]>
</mx:Script>



だけど、Bindingを使うと、以下の１行だけでOKである。
テキストフィールドが１個の場合は上の例でも大丈夫だが、
テキストフィールドの数が多いと、下の例の方がコードがすっきりします。

<mx:Binding source="textInput.text" destination="text"/>



一応、Bindingを使用したサンプルコードを載せておきます。

<?xml version="1.0" encoding="utf-8"?>
<!--　変数へのバインディング　-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var text:String = "";
		]]>
	</mx:Script>
	
	<mx:Binding source="tinTest.text" destination="text"/>
	
	<mx:TextInput id="tinTest" fontSize="14"/>
	<mx:Label text="{text}" fontSize="14"/>
</mx:Application>