2013/10/11

Flexのデータバインディング（Data binding）について

Flexにはデータバインディングという便利な機能があります。データバインディングとはあるオブジェクトの値を他のオブジェクトに伝えるというものです。別の言い方をすると、あるオブジェクトの値が変わったらデータバインディングしている他のオブジェクトの値も自動的に変わるという機能です。

これを使わずに普通に自前でコーディングするなら、「addEventListener」でその情報に”何か”あった際には通知してくれという機能を使います。でも、これだとだいぶコーディングが長くなってしまいます。１つなら問題ないですが、これが大量にあったらどうですか？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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" 
      applicationDPI="160"
      applicationComplete="init(event)">
 
 <!-- SCRIPT -->
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   protected function init(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
    textInput.addEventListener("change", textInput_CHANGE);
   }
   
   private function textInput_CHANGE(event:Event):void
   {
    label.text = textInput.text;
   }
  ]]>
 </fx:Script>
 
 <!-- UI COMPONENTS -->
 <s:VGroup horizontalCenter="0" verticalCenter="0">
  <s:Label text="テキストを入力してください。"/>
  <s:TextInput id="textInput"/>
  <s:Label id="label"/>
 </s:VGroup>
</s:Application>


これをFlexのデータバインディング機能を使って書くとこうなります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?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" 
      applicationDPI="160">
 
 <!-- UI COMPONENTS -->
 <s:VGroup horizontalCenter="0" verticalCenter="0">
  <s:Label text="テキストを入力してください。"/>
  <s:TextInput id="textInput"/>
  <s:Label id="label"
     text="{textInput.text}"/>
 </s:VGroup>
</s:Application>

これだとコードもだいぶすっきりするんじゃないでしょうか？！
結果は全く同じです。


http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_2.html
http://tech.nitoyon.com/ja/blog/2007/04/17/binding-example/

Labels: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)