Adobe Flash Builder 4ベータ版によるFlex UIコンポーネントへのColdFusionデータのバインド

このチュートリアルは、次のような方を対象としています。

• FlexおよびColdFusionミニラーニングセンターにある、架空のセールスプランナーの例に基づいたチュートリアルを実行中のデベロッパー
• Adobe FlexフレームワークまたはAdobe Flash Builder 4ベータ版を使用したことはないが、ColdFusionには習熟しているデベロッパー
• ColdFusionコンポーネントを使い慣れたColdFusionデベロッパー

Adobe Flash Builder 4ベータ版（以前の名前はFlex Builder）には、サーバーサイドデータをFlexフレームワークUIコントロールにバインドするためのきわめてシンプルなインターフェイスが用意されています。デザインモードを使用すれば、コンポーネントをドラッグ＆ドロップして、レイアウトを作成し、データをバインドできます。コードをまったく記述せずに、動的挿入を行うアプリケーションを数分間で作成できます。

このチュートリアルでは、DataGridおよびPieChartコントロールを使用して、ColdFusion Component（CFC）関数から返されたデータにバインドする方法を学びます。また、2つのコントロールのデータを同期する方法も学びます。

初めに述べたように、このチュートリアルでは、ColdFusionおよびFlash Builder 4ベータ版入門や、このシリーズの他のチュートリアルと同じ開発環境を使用します。この節では、CFC関数への異なるサービス呼び出しに使用する、別のデータ型を指定します。

1. Flash Builder 4ベータ版でデータとサービスビューを見つけます。図1に示すF4CF_Getting_Started_Serviceサービスが見つかるはずです。

2. データとサービスビューで、F4CF_Getting_Started_ServiceサービスのgetEmployeeDataByRegion()関数を右クリックし、「戻り値の型を設定」を選択します（図2を参照）。

クエリからの各レコードは、名前／値ペアの各データ列（FIRSTNAME、LASTNAME、EMAILなど）が設定された状態で、ActionScriptオブジェクト内に格納されます。各レコードには、0から始まるインデックスが付けられます。

注意：ColdFusionと異なり、ActionScript言語のインデックスは0から始まります。

ウィザードを使うと、返されたデータをオブジェクトとして一般的に参照する代わりに、戻り値の型の名前をデータに付けることができます。次にこれを行います。

3. 操作の戻り値の型を設定ダイアログボックスで、EmployeeDataByRegionという名前の新しいカスタムデータ型を作成します（図3を参照）。

   注意：このデータ型は、ColdFusionおよびFlash Builder 4ベータ版入門チュートリアルで定義されたEmployeeSalesDataデータ型とは異なり、regionという引数の指定が必要です。この引数は、返されるデータを特定の地域の従業員に限定する役割を果たします。また、データベースから返すデータ列の数も少なくなっています。

4. 「次へ」をクリックします。
5. 新しいデータ型を作成ダイアログボックスで、値を入力列にCentralと入力します（図4を参照）。

クエリー結果を返すには、引数の値としてCentralを入力する必要があります。これは単に、クエリーが正しく動作していることを示して、クエリーの戻り値の型の名前を定義できるようにするためのしくみです。この後の手順で、アプリケーションに実際に引数値を渡すようにコードを変更します。

6. 「はい」オプションをクリックして、リモーティング資格情報が動作に必要であることを指定します。
7. リモートサービス認証ウィンドウにユーザー名とパスワードを入力します（図5を参照）。

8. 「OK」をクリックします。
9. 「次へ」をクリックします。
10. Modify Properties of Return Typeダイアログを確認して、「終了」ボタンをクリックします。

図6に示すように、EmployeeSalesDataByRegionデータ型が、データとサービスビューのデータ型カテゴリに表示されます。データ型のプロパティが、CFCメソッドから返されたクエリー列であることに注意してください。

CFCから返されたデータには、地域（Northwest、Southwest、Central、Northeast、Southeast）に関連する従業員情報が含まれます。アプリケーションに動的データを渡す方法については、ColdFusion URL変数を使用したFlexアプリケーションの展開を参照してください。このチュートリアルでは、地域の値をコードに直接書き込みます。

この節では、EmployeeDataByRegionデータをFlexフレームワークのDataGridコントロールにバインドします。このためにコードを書く必要はまったくありません。組み込みのFlash Builderウィザードを使用して、すべてのコードを生成できます。

レイアウトへのDataGridコントロールの追加

Flash Builderのデザインモードのドラッグ＆ドロップ機能を使用して、DataGridコンポーネントを追加できます。

1. F4CF_Getting_Startedプロジェクトで、開いているMXMLファイルをすべて閉じます。
2. メニューからファイル／新規／MXMLアプリケーションを選択して、新規アプリケーションファイルを作成します。
3. ファイル名をF4CF_Binding_Data.mxmlとし、レイアウトドロップダウンリストを「なし」に設定します。
4. 「終了」ボタンをクリックします。

   注意：実際の作業では、Flash Builderプロジェクトで使用するメインアプリケーションファイルは1つだけなのが普通です。このシリーズでは、プロジェクトを多数作成するのを避けるため、チュートリアルごとにメインアプリケーションファイルを作成します。

5. デザインモードに切り替えます。
6. コンポーネントビューから、DataGridコントロールをデザインエリアにドラッグします（図7を参照）。

DataGridコントロールへのデータの関連付け

次に、データとサービスビューからDataGridコントロールに関数をドラッグ＆ドロップして、返されるデータをバインドします。

1. データとサービスビューでgetEmployeeDataByRegion()関数を選択します。
2. 関数をデザインエリアのDataGridコントロールにドラッグ＆ドロップします。

   ソースモードに切り替わり、コード中のregion変数が強調表示されてDataGridコントロールが作成できるようになります（図8を参照）。

3. region変数を文字列値'Central'に置き換えます。

注意：既に説明したように、ここではgetEmployeeDataByRegion 関数の属性regionの値をコードに直接記述します。アプリケーションに動的データを渡す方法については、ColdFusion URL変数を使用したFlexアプリケーションの展開を参照してください。

4. 再びデザインモードに切り替えます。

   DataGridコントロールの列タイトルが、バインドされたデータを反映します（図9を参照）。

5. ファイルを保存し、丸い緑の「実行」ボタン（図10を参照）をクリックするか、メニューから実行／F4CF_Binding_Dataを実行を選択します。

図11に示すように、ColdFusionデータソースからのデータがDataGridコントロールに挿入されます。

この節では、FlexフレームワークのPieChartコントロールにデータをバインドします。DataGridコントロールの場合と同様、このためにコードを書く必要は一切ありません。

レイアウトへのPieChartコントロールの追加

前と同様に、Flash Builderのデザインモードのドラッグ＆ドロップ機能を使用して、PieChartコントロールをアプリケーションに配置します。

1. デザインモードにいることを確認します。
2. コンポーネントビューのチャートフォルダーから、PieChartコントロールをDataGridコントロールの下の画面にドラッグ＆ドロップします。

   図12に示すチャートの作成ダイアログボックスが表示されます。シリーズエレメントエリアにSeries 1という名前のエレメントがあらかじめ挿入されていることを確認します。

   UIコントロールに添付されたデータをすべて表示する必要はありません。PieChartコントロールのseriesプロパティを使用すると、どのデータフィールドをチャートに表示するかを指定できます。チャートにはデータフィールドのシリーズを複数個プロットできますが、この例では1個しか使用しません。

3. IDプロパティをpiechart1からYTDPieChartに変更します（図12を参照）。

4. テキストボックスのSeries 1をYTDSeriesに変更します。
5. 「OK」をクリックしてPieChartコントロールを表示に追加します。

注意：チャートを表示するには、「デザインモード」ボタンの右側の「更新」ボタンをクリックする必要がある場合があります。MXMLファイル名を含む「エディター」タブをダブルクリックして、デザインエリアを展開したり折りたたんだりすることもできます。デザインモードの左上隅に凡例が表示されたら、PieChartコントロールの隣にドラッグ＆ドロップします。

PieChartへのデータの関連付け

この節では、PieChartコントロールにデータをバインドします。

1. データとサービスビューで、DataGridコントロールにバインドしたのと同じgetEmployeeDataByRegion()関数を、PieChartコントロールにドラッグ＆ドロップします。

   getEmployeeDataByRegion()関数呼び出しの新しいインスタンスをPieChartコントロールにドラッグすると、このアプリケーションで実際にはこの関数を2回呼び出すことになります。DataGridコントロールに対して1回、PieChartコントロールに対して1回です。

   データにバインドダイアログボックスが表示されます（図13を参照）。見出し「チャートを設定」の下の表に、2つの列、シリーズとフィールドがあります。

2. フィールド列の中のセルをクリックします。PieChartコントロールにドロップされた関数のすべての属性がドロップダウンリストに表示されます。
3. ドロップダウンリストからYTDを選択します。（図13を参照）。

4. 「OK」をクリックします。

   ソースモードに切り替わり、PieChartコントロールのgetEmployeeDataByRegion()関数呼び出しでregion属性が強調表示されます（図14を参照）。

5. 変数regionを文字列値'Central'に置き換えます。

   注意：このチュートリアルでは、値を直接コードに記述します。

6. ファイルを保存し、アプリケーションを実行して、YTDスライスが動的に挿入されたPieChartコントロールを表示します（図15を参照）。

注意：Flex Builder 3のライセンスされたコピーがシステム上にない場合、PieChartコントロールの上にウォーターマークが表示されます。

7. DataGridコントロールで、任意の行のYTD値を変更してみてください。

PieChartコントロールのデータは変化しないはずです。これは、サービスの呼び出しを2つ別々に作成し、返されたデータのインスタンスを2つ別々に取得したからです。

この節では、DataGridコントロールにバインドされているのと同じデータにPieChartコントロールをバインドします。

1. デザインモードに戻ります。
2. PieChartコントロールを選択します。図16の左上にあるつながったリングのアイコンに注目してください。このアイコンは、データバインディングを表します。

3. データバインディングアイコンをダブルクリックします。

   図17に示すメッセージを記載したバインド操作ダイアログボックスが表示されます。

4. 「OK」をクリックします。
5. データにバインドダイアログボックスで、既存の呼び出し結果ポップアップリストからgetEmployeeDataByRegionResultを選択します（図18を参照）。

getEmployeeDataByRegionResultはDataGridコントロールにバインドされたサービス呼び出しからの結果データであり、getEmployeeDataByRegionResult2はPieChartコントロールにバインドされたサービス呼び出しからの結果データです。

6. 「OK」をクリックします。
7. アプリケーションを保存した後、実行してみます。
8. アプリケーションを実行し、図19に示すように、任意の行のYTD値を変更してみます。DataGridコントロールの値の変更を反映して、PieChartコントロールのスライスのサイズが変更されます。

次のステップ

このチュートリアルでは、Flash Builderを使用して、サーバーデータをFlexフレームワークコンポーネントに容易にバインドする方法と、それによってコンポーネントを対話的に動作させられることを示しました。サービス呼び出し、返されるデータ、データ型について詳しくは、フォームの生成チュートリアルを参照してください。

FlexとColdFusionの協調動作については、次のチュートリアルを参照してください。

• マスター／詳細フォームの作成
• データの管理
• ColdFusion URL変数を使用したFlexアプリケーションの展開