データバインディングは、実行時に、オブジェクトのプロパティ（source プロパティ）の値を自動的に別のオブジェクトのプロパティ（destination プロパティ）にコピーするシンタックスを定義します。通常、データバインディングは、ソースのプロパティ値が変化するとトリガされます。

次の例では、HSlider コントロールの value プロパティのデータが Text コントロールに取り込まれます。中括弧（{ }）内のプロパティ名がバインディング式を指定し、この式によってソースプロパティの値（mySlider.value）が、コピー先のプロパティ（Text コントロールの text プロパティ）にコピーされます。

<mx:HSlider id="mySlider"/>
<mx:Text text="{mySlider.value}"/>

スライダの移動を停止すると、HSlider コントロールの現在の値が Text コントロールに表示されます。スライダの移動に従って値を継続的に更新するには、HSlider.liveDragging プロパティを true に設定します。

バインディング式の宛先としてのプロパティの使用

カスタムコンポーネント内のプロパティは、データバインディングも利用できます。変数として定義されたプロパティや setter および getter メソッドを使用して定義されたプロパティは、バインディング式の宛先として自動的に使用できます。

例えば、ActionScript でのパブリックプロパティの定義のセクションでは、maxFontSize というパブリックプロパティでクラスを作成しました。次の例のように、maxFontSize プロパティを、バインディング式の宛先として使用できます。

<?xml version="1.0"?> 
<!-- as/MainTextAreaFontControlBindingDest.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*" >

    <MyComp:TextAreaFontControl id="myTA" 
        maxFontSize="{Number(myTI.text)}"/>

    <mx:Label text="Enter max font size."/>
    <mx:TextInput id="myTI" text="25"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、ユーザーが TextInput コントロールに入力した値は、maxFontSize プロパティに自動的にコピーされます。

データバインディング式のソースとしてのプロパティの使用

プロパティがデータバインディング式のソースである場合、Flex はソースプロパティの変更時に自動的にソースプロパティの値を宛先プロパティにコピーします。ただし、コピーを実行するよう Flex に通知するためには、Flex でプロパティを登録し、ソースプロパティにイベントを送出させる必要があります。

プロパティをデータバインディングのソースとして登録するには、[Bindable] メタデータタグを使用します。このタグは、次の 3 つの場所で使用できます。

• クラス定義の前。変数として定義されたすべてのパブリックプロパティを、バインディング式のソースとして使用可能にします。また、setter メソッドと getter メソッドを使用して使用可能にすることもできます。その場合、getter メソッドの前で [Bindable] タグを使用します。
• 変数が定義するプロパティの前。そのプロパティがバインディングをサポートするようにします。
• setter および getter メソッドを使用して実装されたプロパティの getter メソッドの前。

[Bindable] メタデータタグについて詳しくは、カスタムコンポーネントのメタデータタグを参照してください。

次の例では、ActionScript でのパブリックプロパティの定義のコンポーネントを変更して、maxFontSize プロパティと minFontSize プロパティをデータバインディングのソースとして使用可能にします。

    // Define public properties for tracking font size.
    [Bindable]
    public var maxFontSize:Number = 15;
    [Bindable]
    public var minFontSize:Number = 5;

[Bindable] メタデータタグでイベント名を省略すると、プロパティが変化したときに、propertyChange という名前のイベントが自動的に送出され、データバインディングがトリガされます。設定操作時にプロパティ値が変わらない場合、Flex はイベントの送出もプロパティの更新も行いません。

setter および getter メソッドを使用してプロパティを定義し、プロパティをデータバインディングのソースとして使用可能にする場合は、次の例に示すように、getter メソッドの前に [Bindable] メタデータタグを追加し、プロパティの変更時に setter メソッドが送出するイベント名をオプションで指定します。

package myComponents
{
    // as/myComponents/TextAreaFontControlBinding.as    
    import mx.controls.TextArea;
    import flash.events.KeyboardEvent;
    import flash.events.Event;
    
    public class TextAreaFontControlBinding extends TextArea 
    {
        public function TextAreaFontControlBinding() 
        {
            super();
            addEventListener("keyDown", myKeyDown);     
            addEventListener("creationComplete", myCreationComplete);       
        }       

        private var currentFontSize:Number;
        public var minFontSize:Number = 5;      

        // Define private variable for maxFontSize.
        public var _maxFontSize:Number = 15;
            
        // Define public getter method, mark the property
        // as usable for the source of data binding, 
        // and specify the name of the binding event.
        [Bindable("maxFontSizeChanged")]
        public function get maxFontSize():Number {
            return _maxFontSize;
        }

        // Define public setter method.
        public function set maxFontSize(value:Number):void {
            if (value <= 30) {
                _maxFontSize = value;
            } else _maxFontSize = 30;

            // Dispatch the event to trigger data binding. 
            dispatchEvent(new Event("maxFontSizeChanged"));
        }        
        
        private function myCreationComplete(eventObj:Event):void {           
            // Get current font size
             currentFontSize = getStyle('fontSize');
        }

        // keyDown event handler.
        private function myKeyDown(eventObj:KeyboardEvent):void {   
            // Was Ctrl key pressed?
            if (eventObj.ctrlKey) 
            {                       
                switch (eventObj.keyCode) {
                    // Was Ctrl-I pressed?  
                    case 73 :
                        if (currentFontSize < maxFontSize) {
                            currentFontSize = currentFontSize + 1;
                            setStyle('fontSize', currentFontSize);
                        } 
                        break;
                    // Was Ctrl-M pressed?  
                    case 77 :
                        if (currentFontSize > minFontSize) {
                            currentFontSize = currentFontSize - 1;
                            setStyle('fontSize', currentFontSize);
                        }
                        break;
                    default :
                        break;
                }           
            } 
        }
    
    }
}

この例では、setter はプロパティの値を更新してからイベントを送出し、データバインディング先の更新をトリガします。イベント名に関する制限はありません。次の例に示すように、アプリケーション内でこのコンポーネントを使用できます。

<?xml version="1.0"?> 
<!-- as/MainTextAreaFontControlBindingSource.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <MyComp:TextAreaFontControlBinding id="myTA" 
        maxFontSize="{Number(myTI.text)}"/>

    <mx:Label text="Enter max font size."/>
    <mx:TextInput id="myTI" text="15"/>
    
    <mx:Label text="Current max font size."/>
    <mx:TextArea text="{String(myTA.maxFontSize)}"/>    

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。