Flex2でWebアプリ開発（4）
データバインディングで
オブジェクト間のデータ受け渡し

クラスメソッド
成瀬　勉
2007/3/14

Flexアプリケーションであるオブジェクトと別のオブジェクトとの間でデータの受け渡しをさせる「データバインディング」について見ていこう

　前回「イベントドリブンなアプリケーション構築」は、イベントとActionScript 3の処理について紹介しました。

■データバインディング

　Flexアプリケーションの開発を進めるうえで理解しておくべき特徴としてデータバインディングがあります。

　データバインディングとは、あるオブジェクトと別のオブジェクトとの間でデータの受け渡しを行うための手法です。

　この仕組みにより、UIコントロールのプロパティがユーザー入力によって変更されたときに自動でデータモデルの更新を行ったり、データサービスの結果をUIコントロールのプロパティに反映したりすることが可能になります。

　データバインディングでは、ソースとなるプロパティ、あて先のプロパティ、ソースからあて先へデータを渡すトリガとなるイベントの3つの要素が必要となります。

　まずは簡単な例から紹介します。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">     <mx:TextInput id="myTextInput" text="Hello" />     <mx:Label text="{myTextInput.text}" /> </mx:Application>

　このアプリケーションではユーザーがテキスト入力可能なTextInputコンポーネントとテキストを表示するためのLabelコンポーネントが配置されています。

　TextInputにはid属性とtext属性が記述されています。id属性はアプリケーションのスコープ内でコンポーネントを特定するための属性で、text属性は表示される文字列を指定するプロパティです。

　Labelにはtext属性が記述されています。ここでtext属性の値が中括弧({ })付きの値で記述されていることに注目してください。

　この中括弧がバインディングの定義です。ここではmyTextInput.textつまり上部のTextInputに表示される文字列をソースとしています。

　アプリケーションを実行することで、LabelにもTextInputに設定されたHelloという文字列が表示されていることが確認できます。

画面1表示文字列を text属性で指定

　さらに、実行中のアプリケーションでTextInputに対して文字を入力すると、即座にLabelの文字列も変更されることが確認できるかと思います。

　これは、コンポーネントのプロパティをソースとしたときには、ソースからあて先へデータを渡すトリガが、プロパティが変更されたときに対して行われるように自動で設定されるためです。

画面2 TextInputを変更すれば即座にLabelも変更される

　また、データバインディングを利用することでMVCモデルの実装が容易になります。

　MVCモデルとはModel（データ）-View（ユーザーインターフェイス）-Controller（データの相互接続）のことで、ユーザーインターフェイスとデータを分離することにより再利用性や保守性を高めるためのアーキテクチャです。

　単純なデータバインディングを利用したMVCの実装サンプルを紹介します。

・SampleView.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="vertical" xmlns:local="*">（本来は1行）     <local:SampleModel id="sampleModel" />     <local:SampleController id="sampleController" />     <mx:TextInput id="myTextInput" change="sampleController .setMessage(myTextInput.text)" />（本来は1行）     <mx:Label text="{sampleModel.message}" /> </mx:Application>

・SampleController.as

package {     import mx.core.Application;          public class SampleController     {         public function setMessage(message:String):void{             SampleView(Application.application).sampleModel. message = message;（本来は1行）         }     } }

・SampleModel.as

package {     public class SampleModel     {         [Bindable]         public var message:String;     } }

　SampleView.mxmlは先ほどのサンプルと同じくTextInputとLabelが配置されています。ただし今回は各コンポーネントの属性と内容が少し違います。

　またSampleModel.asとSampleController.asというクラスが定義されています。

それぞれの役割を説明します。

・SampleView.mxml

　ユーザーインターフェイスを定義する部分です。Flexでは通常MXMLで記述します。

　TextInputは受け取ったユーザーからの入力をSampleControllerに通知します。

・SampleController.as

　SampleViewからの通知によってSampleModelのプロパティを変更します。

・SampleModel.as

　SampleControllerによりプロパティが変更されたことをSampleViewに通知します。

　ただし明示的にSampleViewを参照するわけではなく、あくまでもプロパティに変更があったということをViewに通知します。

そのためにデータバインディングを利用します。プロパティ宣言の前に[Binding]と記述することでバインド可能なプロパティとして設定されます。

　これにより、SampleView.mxmlのLabelのtext属性に指定されたデータバインディングが利用可能になります。

　データバインディングの基本的な説明は以上ですが、データバインディングはさまざまな局面で利用できます。

　有効に利用することで開発効率を高めることが可能になると思います。データバインディングのより詳細な説明についてはFlex 2のオンラインドキュメントを参照してください。

　次回はサーバ通信とE4Xについて紹介します。

プロフィール：成瀬　勉（なるせ つとむ） クラスメソッド株式会社　エンタープライズサービス部門アーキテクト Macromedia FLASH MX 2004 Developer認定技術者 FlashエンジニアとしてWeb製作を経たのちWebアプリケーション開発に携わる。FlexやWPFなどのRIA開発および技術調査を日々行っている。 クラスメソッド株式会社での主な開発実績は、旭化成の電子ファイリングシステム、ひまわり証券のオンライントレードシステム、ベルシステム24の営業支援システムなど。 ブログ（C:\narun）も更新中。

---

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）