Adobe® Flex™ には、アプリケーションでデータを表現し操作するために、データバインディング、データ検証およびデータフォーマットの各機能が用意されています。これらの機能は、Adobe® LiveCycle™ Data Services ES とリモートデータを操作する Vega 機能を組み合わせて使用します。これらが一体となって、次の作業を行うことができます。

• クライアントサイドオブジェクト間でのデータ受け渡し
• クライアントサイドのオブジェクトへのデータの格納
• クライアントサイドのオブジェクト間でのデータ受け渡し前のデータ検証
• データを表示する前のデータのフォーマット

次の手順は、ユーザーがデータを入力し、Adobe Flex アプリケーションの情報を要求する簡単なシナリオです。

1. ユーザーが入力フィールドにデータを入力し、Button コントロールをクリックして要求を送信します。
2. （オプション）「データバインディング」によって、中間データを格納するためのデータモデルオブジェクトにデータが渡されます。これにより、アプリケーションでデータを操作し、他のオブジェクトに渡すことができるようになります。
3. （オプション）データバリデータオブジェクトによって、要求データが検証されます。バリデータオブジェクトによって、データが特定の条件を満たしているかどうかがチェックされます。
4. データがサーバサイドオブジェクトに渡されます。
5. サーバサイドオブジェクトが要求を処理し、データを返します。有効な結果を返すことができない場合は、失敗オブジェクトを返します。
6. （オプション）データバインディングによって、中間データを格納するためのデータモデルオブジェクトにデータが渡されます。これにより、アプリケーションでデータを操作し、他のオブジェクトに渡すことができるようになります。
7. （オプション）「データフォーマッタ」オブジェクトによって、ユーザーインタフェースで表示するためにデータがフォーマットされます。
8. データバインディングによって、データを表示するユーザーインタフェースコントロールにデータが渡されます。

次の図は、2 つの異なるユーザー入力例の場合に Flex でどのような処理が行われるのかを示しています。一方の例では、ユーザーは郵便番号データを入力し、Flex によって形式が検証されます。他方の例では、ユーザーは現在の温度を摂氏で要求します。

データバインディング

データバインディング機能は、実行時に自動的にクライアントサイドオブジェクトのプロパティの値を別のオブジェクトのプロパティにコピーするシンタックスを提供します。データバインディングは通常、ソースのプロパティ値が変化するとトリガされます。データバインディングを使用して、ユーザーの入力データを、ユーザーインタフェースコントロールからデータサービスに渡すことができます。また、データサービスから返された結果をユーザーインタフェースコントロールに渡すこともできます。

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

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

詳しくは、データバインディングを参照してください。

データモデル

データモデル機能によって、クライアントサイドオブジェクトにデータが格納されます。「データモデル」は、データを格納するプロパティを持ち、オプションで機能を追加するメソッドを持つ場合もある、ActionScript オブジェクトです。データモデルは、アプリケーションでユーザーインタフェースとデータを分離するために使用します。

データバインディング機能を使用すると、ユーザーインタフェースデータをデータモデルにバインドできます。また、データバインディング機能によって、データサービスからデータモデルにデータをバインドすることもできます。

単純なデータモデルは MXML タグを使用して定義できます。型指定のないデータの格納以外の機能が必要な場合には、データモデルとして ActionScript クラスを使用します。

次の例は MXML ベースのデータモデルで、TextInput コントロールのプロパティがデータモデルのフィールドにバインドされます。

<?xml version="1.0"?>
<!-- datarep\DatarepModelTag.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:Model id="reg">
       <registration>
          <name>{nme.text}</name>
          <email>{email.text}</email>
          <phone>{phone.text}</phone>
          <zip>{zip.text}</zip>
          <ssn>{ssn.text}</ssn>
      </registration> 
    </mx:Model>
    <mx:TextInput id="nme"/>
    <mx:TextInput id="email"/>
    <mx:TextInput id="phone"/>
    <mx:TextInput id="zip"/>
    <mx:TextInput id="ssn"/>    
</mx:Application>

データモデルについて詳しくは、データの格納を参照してください。

データ検証

データ検証機能によって、アプリケーションでデータを使用する前に、データが特定の条件を満たしているかどうかが確認されます。データバリデータは、コンポーネント内のデータが正しくフォーマットされているかどうかをチェックする ActionScript オブジェクトです。あらゆるコンポーネントのプロパティにデータバリデータを適用できます。RPC（Remote Procedure Call：リモートプロシージャコール）コンポーネントの宣言で宣言したモデルに対しては、要求が RPC サービスの宛先に送信される直前に、バリデータコンポーネントが適用されるプロパティが検証され、有効な要求だけが送信されます。

次の例は、標準 ZipCodeValidator コンポーネントを使用する MXML コードで、<mx:ZipCodeValidator> タグで記述されています。このコードでは、ユーザーが入力した郵便番号の形式を検証します。ZipCodeValidator バリデータの source プロパティで、検証するプロパティを指定します。

<?xml version="1.0"?>
<!-- datarep\Validate.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:TextInput id="input" text="enter zip" width="80"/>

    <mx:Model id="zipModel">
        <root>
            <zip>{input.text}</zip>
        </root>    
    </mx:Model>

    <mx:ZipCodeValidator source="{zipModel}" property="zip"
        listener="{input}" trigger="{input}"/>
</mx:Application>

バリデータコンポーネントについて詳しくは、データ検証を参照してください。

データフォーマット

データフォーマット機能によって、ユーザーインタフェースコントロールで表示する前に、データの形式を変更できます。例えば、データサービスから返されるストリングを（xxx）xxx-xxxx という電話番号形式で表示したい場合に、フォーマッタコンポーネントを使用して表示前にストリングを再フォーマットすることができます。

「データフォーマッタコンポーネント」は、生のデータをカスタマイズしたストリング形式にフォーマットするオブジェクトです。データフォーマッタコンポーネントを使用すると、データサービスから返されたデータを再フォーマットしてバインドできます。

次の例では、DateFormatter コンポーネントを宣言し、MM/DD/YYYY という日付形式を指定しています。Web サービスから返された Date オブジェクトがこの形式にフォーマットされ、TextInput コントロールの text プロパティにバインドされます。

<?xml version="1.0"?>
<!-- datarep\Format.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:WebService id="myService" destination="Shop"/>
    
    <!-- Declare a formatter and specify formatting properties. -->
    <mx:DateFormatter id="StandardDateFormat" formatString="MM/DD/YYYY"/>

    <!-- Trigger the formatter while populating a string with data. -->
    <mx:TextInput
        text="Your order shipped on {StandardDateFormat.format(myService.purchase.result.date)}"/> 
</mx:Application>

データフォーマッタについて詳しくは、データのフォーマットを参照してください。