Adobe Flash Builder 4ベータ版によるColdFusionフォームの生成

Adobe Flash Builder 4（以前の名前はFlex Builder）にはフォームウィザードが備わっており、データを挿入したフォームを簡単に作成できます。これにより、データ操作のためのインターフェイスを容易に作成できます。

このチュートリアルでは、Flash Builderコントロールを使用して、簡単な従業員検索ツールを作成します。次に、カスタムデータ型を使用してフォームを生成します。最後に、検索ツールから返された従業員売り上げデータをフォームに挿入します。

初めに述べたように、このチュートリアルでは、ColdFusionおよびFlash Builder 4ベータ版入門およびこのシリーズの他のチュートリアルと同じ開発環境を使用します。

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

2. データ型カテゴリを展開します。このシリーズのどのチュートリアルを実行してあるかに応じて、最大2つのデータ型が表示されるはずです。EmployeeSalesDataデータ型が存在するかどうかを確認します。

次の手順を実行して、CFCメソッドのgetItem()サービス呼び出しで取得されて返されるデータに、独自のデータ型名を割り当てます。

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

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

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

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

2. EmployeeSalesDataデータ型が存在しない場合、操作の戻り値の型を設定ダイアログボックスで、EmployeeSalesDataという名前の新規カスタムデータ型を作成します。EmployeeSalesDataデータ型が既に存在する場合、「Use an existing ActionScript or custom data type」の隣のラジオボタンをクリックし、ポップアップリストからEmployeeSalesData[]を選択します（図3を参照）。また、「Update selected custom data type」チェックボックスを選択します。

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

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

7. 「OK」をクリックします。
8. 「次へ」をクリックします。

   注意：Adobe Flash Builder 4ベータ版によるデータの管理チュートリアルを実行して、データベース中の最初の従業員（Allen Sman）を削除した場合、「The operation returned a response of the type 'Object'.」というエラーメッセージが表示されます。この場合、100002や100003など、別の従業員のプライマリキーである別の値を使用します。

9. Modify Properties of Return Typeダイアログボックスで、「終了」ボタンをクリックします。

EmployeeSalesData()データ型がgetItem()サービス操作の下にリストされています（図6を参照）。データ型のプロパティが、CFCメソッドから返されたクエリー列であることに注意してください。

この節では、従業員の姓に基づいてデータレコードを取得する従業員検索ツールを作成します。

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

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

5. F4CF_Generating_Forms.mxmlファイルに対する「エディター」タブの下の「デザイン」ボタンをクリックして、デザインモードに切り替えます（図7を参照）。

6. コンポーネントビューを見つけます。

   注意：コンポーネントビューはウィンドウ／コンポーネントを選択して開くこともできます。

7. コンポーネントビューのコントロールフォルダーから、TextInputコントロールをデザインエリアにドラッグ＆ドロップします（図8を参照）。

TextInputコントロールは、検索ツールの入力フィールドの役割を果たします。TextInputコントロールに入力されたテキストをgetItem()関数の引数として渡して、従業員データが返されるようにします。

TextInputコントロールのIDプロパティは、SWFアプリケーションのコントロールの固有の識別名です。次のステップでは、TextInputコントロールのIDプロパティを設定する方法を示します。

8. プロパティビューを見つけます。
9. TextInputコントロールのIDをemployeeSearchに設定し、Enterキーを押します（図9を参照）。

注意：Enterキーを押すことにより、プロパティの値が保持されます。

検索機能の作成

次に、Search Buttonコントロールを使って、従業員売り上げレコードをこのアプリケーションに返すgetItem()サービス操作を実行します。ユーザーがButtonコントロールをクリックしたときに、TextInputコントロールに入力された値をgetItem()操作に引数として渡します。

1. コンポーネントビューのコントロールフォルダーからButtonコントロールをドラッグ＆ドロップし、デザインエリアのTextInputコントロールの右側に配置します（図10を参照）。

2. Buttonコントロールをダブルクリックして、ラベルをSearchに変更します。
3. データとサービスビューからgetItem() CFC関数をドラッグして、デザインエリアの「Search」ボタンにドロップします（図11を参照）。

Flash Builderがソースモードに切り替わり、getItem()サービス呼び出しのSALESTARGETID引数が、このButtonコントロールに関連付けられた状態で強調表示されます。

getItem()関数をButtonコントロールにドロップしたときに、Flash Builderは、Buttonコントロールのclickイベントに、F4CF_Getting_Started_ServiceのgetItem()関数を挿入しています。getItem()関数の引数が強調表示されています。デフォルトではこれはSALESTARGETIDです。SALESTARGETIDはCFCで指定された引数の名前であり、データサービスウィザードがCFCを評価してデータとサービスビューに追加したときにイントロスペクトしたものだからです。

しかし、ここで使用したいのは、TextInputコントロールに入力された従業員のSALESTARGETIDです。TextInputコントロールにemployeeSearchという固有の識別子を与えたことを思い出してください。TextInputコントロールに入力されたテキスト値にアクセスするには、そのコントロールのtextプロパティを使用します。

注意：getItem()関数が必要とする引数は、SalesTargetsデータテーブルの任意の列に定義することもできます。CFC関数を単に適切に更新してください。

4. SALESTARGETID引数がf4CF_Getting_Started_Service.getItem()関数の括弧の間にありますが、これを次のスニペットに示すようにemployeeSearch.textプロパティに置き換えます。

5. ファイルを保存します。

この節では、Flash Builderのフォームを生成ウィザードを使用して、従業員売り上げデータにバインドされたフォームを作成します。このフォームには、検索ツールによって要求された個々の従業員データが表示されます。

1. デザインモードに切り替えます。
2. データとサービスパネルで、EmployeeSalesDataデータ型を右クリックし、「フォームを生成」を選択します（図12を参照）。

3. ソースを選択ダイアログボックスの「データ型」の設定を図13のようにデフォルトのままにして、「次へ」ボタンをクリックします。

4. プロパティコントロールマッピングダイアログボックスで、SALESTARGETID、EMPIMAGE、YTD、Q1GOAL、REGIONの値のチェックを外します（図14を参照）。

5. FIRSTNAME、LASTNAME、PHONE、EMAILの各プロパティのコントロールフィールドをTextに変更します（図15を参照）。

6. 「終了」ボタンをクリックします。
7. フォームをTextInputコントロールの下に再配置します（図16を参照）。

8. ファイルを保存し、ツールバーの再生（丸い緑）ボタンをクリックして、アプリケーションを実行します（図17を参照）。あるいは、実行／F4CF_Generating_Formsを選択する方法もあります。

9. TextInputコントロールに100001と入力し、「Search」ボタンをクリックします。

従業員のSALESTARGETIDを入力しても、フォームにデータが挿入されないはずです（図18を参照）。次の節で、これを修正します。

この節では、検索クエリーの結果に基づいてフォームにデータを挿入します。

1. ソースモードに切り替えます。
2. <fx:Declarations>タグブロックを見つけます。

   <fx:Declarations>タグブロックには、サービス操作をUIコントロールにドロップしたときにFlash Builderが生成するコードが含まれます。作成されたコードは、CallResponderコンポーネントとデータ型コンポーネントから構成されます。CallResponderコンポーネントは、返されるデータを処理します。フォームにデータを挿入するActionScript結果ハンドラーをこれに追加します。

3. getItemResult CallResponderコンポーネントを見つけ、CallResponderコンポーネントにresultイベントを追加します。

フォームを生成ウィザードで作成したフォームは、employeeSalesDataデータ型インスタンスに基づいているので、サービス呼び出しから返されたデータをこのインスタンスに挿入します。

4. getItemResult CallResponderコンポーネントのresultイベントに、employeeSalesData =を（次のように）追加します。

CallResponderインスタンスの名前はgetItemResultです。返されたデータは、getItemResultデータのlastResultオブジェクトに格納されています。

5. resultイベントの等号の右側に、getItemResult.lastResultを追加します。

レコードは1つしか返されないので、最初の要素を参照する必要があります。ActionScriptのインデックスは0から始まるので、0を使用します。

6. getItemResult.lastResultの値の後に、[0]を追加します。

ActionScriptでは、値の代入の両辺のデータ型が一致する必要があるため、結果データをEmployeeSalesDataデータ型にキャストする必要があります。

7. インデックス[0]の後に、asを使用して、値のデータ型をEmployeeSalesDataデータ型に指定します。

8. ファイルを保存して、アプリケーションを実行します。
9. TextInputコントロールに値100001を入力し、「Search」ボタンをクリックします。

注意：架空の従業員Allen Smanの情報がフォームに挿入されるはずです（図19を参照）。

次のステップ

このチュートリアルでは、Adobe Flash Builderのフォームを生成ウィザードを使用して、検索インターフェイスを作成する方法を学びました。SWFアプリケーションをColdFusion webページに統合してURL変数を渡す方法については、ColdFusion URL変数を使用したFlexアプリケーションの展開を参照してください。