[Flex][AS3]ActionScript内でのバインディングコントロール

例えば、動的に生成されたコンポーネントをバインディングさせたい場面など、
mxmlでは設定できません。

そこでActionScriptクラス内でバインディングの登録をする事になりますが
以外に設定方法がやっかいです。

以下はそのサンプルになります。


[mxmlでバインディングを行う場合]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[
        
        /**
         * テキストインプットに入力された情報は_bindTxtに格納されます。
         * ラベルは_bindTxtをバインディングしている為、
         * テキストインプットの内容が変わると、自動的にラベルのテキストにも反映されます。
         */
        
        [Bindable]
        private var _bindTxt:String = "";
        
        private function bindTxi_changeHandler():void
        {
            _bindTxt = bindTxi.text;
        }
        
    ]]>
    </mx:Script>

    <mx:Label x="27" y="28" text="テキストを入力してボタンクリック" width="160"/>
    <!-- バンディング元-->
    <mx:TextInput id="bindTxi" change="bindTxi_changeHandler()" x="27" y="54"/>
    <!-- バンディング先 -->
    <mx:Label text="{this._bindTxt}" x="195" y="56" width="172" id="bindlbl"/>
    
</mx:Application>

mxmlでバインディングの登録を行う場合、
ラベルのtextの指定で、{}を行い、変数に[Bindable]を書くだけで簡単にバインディングが登録されます。

では、動的にラベルが作成された場合はどうなるでしょう？

以下がサンプルです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[
        import mx.controls.Label;
        
        /**
         * テキストインプットに入力された情報は_bindTxtに格納されます。
         * ラベルは_bindTxtをバインディングしている為、
         * テキストインプットの内容が変わると、自動的にラベルのテキストにも反映されます。
         */
        [Bindable]
        private var _bindTxt:String = "";
        
        private function bindTxi_changeHandler():void
        {
            _bindTxt = bindTxi.text;
        }
        
        // ボタンクリックでラベルを作成します。
        private function createBtnClick():void
        {
            var label:Label = new Label();
            label.width = 100;
            label.height = 30;
            // キャンバスにラベルを作成
            this.testCnb.rawChildren.addChildAt(label,0);
            
            // ボタン非活性
            createBtn.enabled = false;
        }
        
        
    ]]>
    </mx:Script>

    <mx:Label x="27" y="28" text="テキストを入力してボタンクリック" width="160"/>
    <!-- バンディング元-->
    <mx:TextInput id="bindTxi" change="bindTxi_changeHandler()" x="27" y="54"/>
    <mx:Button id="createBtn" 
        click="createBtnClick()"
        x="27" y="84" label="ラベルを作成" width="160"/>
    <mx:Canvas x="195" y="54" width="200" height="22" id="testCnb">
    </mx:Canvas>
    
</mx:Application>

ボタンクリックで、ラベルが動的に作成されるサンプルです。
動的に生成されるという事は、mxmlでバインディングの設定を行う事は出来ません。
こうした場合、ActionScriptコード内でバインディング設定を行う事になります。

ActionScriptコード内でバインディングの設定を行う場合、
BindingUtilsを使用します。
 

BindingUtils.bindProperty(バインディング先のオブジェクト（id）,'プロパティ名',バインディング元のクラス,'プロパティ名');

以下はその設定例です。
 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[
        import mx.binding.utils.BindingUtils;
        import mx.controls.Label;
        
        /**
         * テキストインプットに入力された情報は_bindTxtに格納されます。
         * ラベルは_bindTxtをバインディングしている為、
         * テキストインプットの内容が変わると、自動的にラベルのテキストにも反映されます。
         */
        private var _bindTxt:String = "";
        
        private function bindTxi_changeHandler():void
        {
            _bindTxt = bindTxi.text;
        }
        
        // ボタンクリックでラベルを作成します。
        private function createBtnClick():void
        {
            var label:Label = new Label();
            label.width = 100;
            label.height = 30;
            label.text = "XXXX";
            // キャンバスにラベルを作成
            this.testCnb.rawChildren.addChildAt(label,0);
⇒          //Bindingの設定
⇒          BindingUtils.bindProperty(label,'text',bindTxi,'text');
            
            // ボタン非活性
            createBtn.enabled = false;
        }
        
        
    ]]>
    </mx:Script>

    <mx:Label x="27" y="28" text="テキストを入力してボタンクリック" width="160"/>
    <!-- バンディング元-->
    <mx:TextInput id="bindTxi" change="bindTxi_changeHandler()" x="27" y="54"/>
    <!-- バンディング先 -->
    <mx:Button id="createBtn" 
        click="createBtnClick()"
        x="27" y="84" label="ラベルを作成" width="160"/>
    <mx:Canvas x="195" y="54" width="200" height="22" id="testCnb">
    </mx:Canvas>
</mx:Application>

バインディング先のプロパティ名を指定したりなど、
全て自分で指定してあげる必要があります。

これにより、バインディングの設定を行う事が可能となります。

今回のサンプルで分かったように、mxmlで設定する場合
flexが自動的にやってくれる事が多い事が分かりました。
それに対して、ActionScriptで同じ機能を実現しようとすると
自分で登録すべき事が多く（今回のサンプルに限らず）
難易度は高くなるのですが、実現できる事も多いので
是非知っておく事をお勧めします。