「データバインディング」は、あるオブジェクトのデータを別のオブジェクトに結び付けるプロセスです。データバインディングによって、アプリケーションの異なるレイヤー間でデータの受け渡しを簡単に行うことができます。データバインディングには、ソースプロパティ、宛先プロパティ、およびソースから宛先にデータをいつコピーするかを指定するトリガが必要です。ソースプロパティが変更されるときに、オブジェクトがトリガを送出します。
Adobe Flex でデータバインディングを指定するには、3 つの方法があります。MXML で中括弧({})シンタックスを使用する方法、MXML で <mx:Binding> タグを使用する方法および ActionScript で BindingUtils メソッドを使用する方法です。次の例では、中括弧({})シンタックスを使用して、TextInput コントロールの text プロパティのデータが Text コントロールに取り込まれます。
<?xml version="1.0"?>
<!-- binding/BasicBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="myTI" text="Enter text here"/>
<mx:Text id="myText" text="{myTI.text}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
中括弧内のプロパティ名がバインディング式のソースプロパティです。ソースプロパティの値を変更すると、Flex によって、ソースプロパティ myTI.text の現在の値が、宛先プロパティである Text コントロールの text プロパティにコピーされます。
ActionScript コードおよび E4X 式をデータバインディング式の一部として含めることができます。次に例を示します。
<?xml version="1.0"?>
<!-- binding/BasicBindingWithAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="myTI"/>
<mx:Text id="myText" text="{myTI.text.toUpperCase()}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、ActionScript の String.toUpperCase() メソッドを使用して、Flex がソースプロパティ内のテキストを宛先プロパティにコピーするときに、そのテキストを大文字に変換しています。詳しくは、データバインディング式での ActionScript の使用とデータバインディング式での E4X 式の使用を参照してください。
中括弧シンタックスの代わりに、<mx:Binding> タグを使用できます。<mx:Binding> タグを使用する場合、<mx:Binding> タグの source プロパティにソースプロパティを指定し、destination プロパティに宛先プロパティを指定します。次の例では、<mx:Binding> タグを使用し、TextInput コントロールから Text コントロールへのデータバインディングを定義しています。
<?xml version="1.0"?>
<!-- binding/BasicBindingMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="myTI"/>
<mx:Text id="myText"/>
<mx:Binding source="myTI.text" destination="myText.text"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
中括弧シンタックスとは対照的に、<mx:Binding> タグではビュー(ユーザーインターフェイス)をモデルから完全に分離することができます。さらに、<mx:Binding> タグは、複数の <mx:Binding> タグに同一の宛先を指定できるので、複数のソースのプロパティを同じ宛先のプロパティにバインドすることができます。例については、複数のソースプロパティから 1 つの宛先プロパティへのバインディングを参照してください。
中括弧シンタックスおよび <mx:Binding> タグはいずれもコンパイル時にデータバインディングを定義します。次の例のように、ActionScript コードを使用して実行時にデータバインディングを定義することもできます。
<?xml version="1.0"?>
<!-- binding/BasicBindingAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.binding.utils.*;
// Define data binding.
public function initBindingHandler():void {
BindingUtils.bindProperty(myText, "text", myTI, "text");
}
]]>
</mx:Script>
<mx:TextInput id="myTI"/>
<mx:Text id="myText" preinitialize="initBindingHandler();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、静的メソッドの BindingUtils.bindProperty() を使用してバインディングを定義しています。BindingUtils.bindSetter() メソッドを使用して、関数へのバインディングを定義することもできます。詳しくは、ActionScript でのデータバインディングの定義を参照してください。
この例では、preinitialize イベントを使用してデータバインディングを定義します。この処理が必要な理由は、Flex では、アプリケーションの起動時にソースオブジェクトが initialize イベントを送出し、すべてのデータバインディングがトリガされるからです。詳しくは、データバインディングの実行時期を参照してください。
バインディングは、以下の場合に実行されます。
このイベントは、アプリケーションの実行中にいつでも発生する可能性があります。イベントが Flex をトリガし、ソースプロパティの値が宛先プロパティにコピーされます。
すべてのデータバインディングは、宛先プロパティを初期化するために、アプリケーションの起動時に 1 回トリガされます。
データバインディングを監視するには、データバインディングの発生時にイベントハンドラをトリガするバインディング Watcherを定義します。詳しくは、バインディング Watcher の定義を参照してください。
UIComponent クラスの executeBindings() メソッドは、UIComponent オブジェクトを宛先とするすべてのバインディングを実行します。Repeater コンポーネントを含むすべてのコンテナおよびコントロールは、UIComponent クラスを拡張したものです。Container クラスおよび Repeater クラスの executeChildBindings() メソッドは、Container クラスまたは Repeater クラスの子 UIComponent コンポーネントを宛先とするすべてのバインディングを実行します。コンテナはすべて、Container クラスを拡張したものです。
これらのメソッドにより、意図したとおりに行われないバインディングを実行できます。変更を加えてもバインディングが実行されない場合にユーザインタフェースを更新するには、executeChildBindings() メソッドへの呼び出しなどのコードを 1 行追加します。ただし、executeBindings() メソッドは、バインディングが自動的に実行されないことがわかっている場合にのみ使用します。
オブジェクトのプロパティはすべて、データバインディング式の宛先として使用できます。ただし、プロパティをデータバインディング式のソースとして使用するには、データバインディングをサポートするようにソースオブジェクトを実装する必要があります。つまり、プロパティの値が変更されてバインディングがトリガされると、オブジェクトからイベントが送出されます。このトピックでは、データバインディング式のソースとして使用できるプロパティを「バインド可能」プロパティと呼びます。
Adobe Flex リファレンスガイドでは、データバインディング式のソースとして使用できるプロパティについて、次の文章が説明の中に記載されています。
「このプロパティはデータバインディングのソースとして使用できます。」
データバインディング式のソースとして使用できるプロパティの作成について詳しくは、データバインディングのソースとして使用するプロパティの作成を参照してください。
データバインディングのソースとしての読み取り専用プロパティの使用
getter メソッド(setter メソッドなし)によって定義した読み取り専用プロパティをデータバインディング式のソースとして使用することもできます。Flex は、アプリケーションの起動時にデータバインディングを 1 回実行します。
静的定数をデータバインディング式のソースとして自動的に使用することもできます。Flex は、アプリケーションの起動時にデータバインディングを 1 回実行します。
静的変数をデータバインディング式のソースとして使用することもできます。Flex は、アプリケーションの起動時にデータバインディングを 1 回実行します。
データバインディング式のソースとして使用するプロパティを作成する場合、Flex はソースプロパティの変更時に自動的にソースプロパティの値を宛先プロパティにコピーします。Flex にコピーを実行するように通知するには、[Bindable] データタグを使用して、プロパティを Flex に登録する必要があります。
[Bindable] メタデータタグのシンタックスは次のとおりです。
[Bindable] [Bindable(event="eventname")]
イベント名を省略すると、Flex は propertyChange という名前のイベントを自動的に作成し、Flex は このイベントをプロパティの変更時に送出して、そのプロパティをデータバインディングソースとして使用するすべてのデータバインディングをトリガします。イベント名を指定する場合は、開発者がソースプロパティの変更時にイベントを送出する必要があります。[Bindable] メタデータタグの使用法の詳細と使用例については、Bindable メタデータタグの使用を参照してください。
次の例では、変数として定義した maxFontSize プロパティおよび minFontSize プロパティをデータバインディング式のソースとして使用できるようにします。
<?xml version="1.0"?>
<!-- binding/FontPropertyBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Define public vars for tracking font size.
[Bindable]
public var maxFontSize:Number = 15;
[Bindable]
public var minFontSize:Number = 5;
]]>
</mx:Script>
<mx:Text text="{maxFontSize}"/>
<mx:Text text="{minFontSize}"/>
<mx:Button click="maxFontSize=20; minFontSize=10;"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
Button コントロールをクリックすると、maxFontSize プロパティと minFontSize プロパティの値が更新され、Text コントロールに対するデータバインディングの更新がトリガされます。
データバインディングの一般的な用途は以下のとおりです。
バインディングは強力なメカニズムですが、あらゆる状況に適しているわけではありません。例えば、個別の設定を厳密なタイミングで更新する必要がある複雑なユーザインタフェースでは、プロパティを順番に割り当てるメソッドを用いたほうが好ましいと考えられます。また、バインディングはプロパティが変更されるたびに実行されるので、毎回ではなく特定の変更時にのみ変更を認識させる場合、最良のソリューションではありません。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート