フレックス-データバインディング

データバインディングとは

データバインディングは、あるオブジェクトのデータを別のオブジェクトに結び付けるプロセスです。ソースプロパティ、宛先プロパティ、およびソースから宛先にデータをコピーするタイミングを示すトリガーイベントが必要です。

Flexには、次の3つの方法でデータバインディングを実行できます。

MXMLスクリプトの波括弧構文（\ {}）
MXMLの<fx：binding>タグ
ActionScriptのBindingUtils

データバインディング-MXMLでの波括弧の使用

次の例は、中括弧を使用して、ソースから宛先へのデータバインディングを指定する方法を示しています。

<s:TextInput id = "txtInput1"/>
<s:TextInput id = "txtInput2" text = "{txtInput1.text}"/>

データバインディング– MXMLで<fx：Binding>タグを使用

次の例は、タグを使用してソースから宛先へのデータバインディングを指定する方法を示しています。

<fx:Binding source = "txtInput1.text" destination = "txtInput2.text"/>
<s:TextInput id = "txtInput1"/>
<s:TextInput id = "txtInput2"/>

データバインディング-ActionScriptでのBindingUtilsの使用

次の例は、BindingUtilsを使用してソースから宛先へのデータバインディングを指定する方法を示しています。

<fx:Script>
   <![CDATA[
      import mx.binding.utils.BindingUtils;
      import mx.events.FlexEvent;

      protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
      }
   ]]>
</fx:Script>

<s:TextInput id = "txtInput1"/>
<s:TextInput id = "txtInput2"
   preinitialize = "txtInput2_preinitializeHandler(event)"/>

Flexデータバインディングの例

テストアプリケーションを作成して、Flexアプリケーションでのスキニングの動作を確認するには、以下の手順に従います-

Step	Description
1	Create a project with a name HelloWorld under a packagecom.finddevguides.client as explained in the Flex - Create Application chapter.
2	Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3	Compile and run the application to make sure business logic is working as per the requirements.

変更されたHelloWorld.mxmlファイルの内容は次のとおりです* src/com/finddevguides/client/HelloWorld.mxml *。

<?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"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">

   <fx:Style source = "/com/finddevguides/client/Style.css"/>
   <fx:Script>
      <![CDATA[
         import mx.binding.utils.BindingUtils;
         import mx.events.FlexEvent;

         protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
            BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
         }
      ]]>
   </fx:Script>

   <fx:Binding source = "txtInput3.text" destination = "txtInput4.text"/>
   <s:BorderContainer width = "500" height = "550" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Data Binding Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading"/>
         <s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400"
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10"/>
            </s:layout>

            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6"/>
               <s:TextInput id = "txtInput1"/>
            </s:HGroup>

            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6"/>
               <s:TextInput id = "txtInput2" text = "{txtInput1.text}"/>
            </s:HGroup>
         </s:Panel>

         <s:Panel title = "Example #2 (Using &lt;fx:Binding&gt;)" width = "400"
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10"/>
            </s:layout>

            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6"/>
               <s:TextInput id = "txtInput3"/>
            </s:HGroup>

            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6"/>
               <s:Label id = "txtInput4"/>
            </s:HGroup>
         </s:Panel>

         <s:Panel title = "Example #3 (Using BindingUtils)" width = "400"
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10"/>
            </s:layout>

            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6"/>
               <s:TextInput id = "txtInput5"/>
            </s:HGroup>

            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6"/>
               <s:TextInput enabled = "false" id = "txtInput6"
                  preinitialize = "txtInput6_preinitializeHandler(event)"/>
            </s:HGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。アプリケーションに問題がなければ、次の結果が生成されます。[link：/flex/samples/DataBindingApplicationl [オンラインで試す]]

Flexデータバインディング

Flex-data-binding

目次