Adobe Flash Builder 4ベータ版によるColdFusionマスター／詳細フォームの作成
作成日
31 May 2009
ページ ツール
必要条件
この記事に必要な予備知識
このチュートリアルを実行するには、ColdFusionおよびFlash Builder 4ベータ版入門の記述に従って、環境を設定し、テストしておく必要があります。
「ColdFusionおよびFlash Builder 4ベータ版入門」チュートリアルまたはこのシリーズの他のチュートリアルを既に終了している場合は、上記の手順は省略できます。
このチュートリアルは、次のような方を対象としています。
- Adobe FlexフレームワークまたはAdobe Flash Builder 4を使用したことはないが、ColdFusionには習熟しているデベロッパー。
- ColdFusionコンポーネントを使い慣れたColdFusionデベロッパー。
ユーザーレベル
すべて
必要な製品
- ColdFusion 8 (Download trial)
- Flash Builder 4 (Download trial)
Adobe Flash Builder 4のフォームウィザードを使用すると、サーバーサイドからのマスター／詳細インターフェイスを、ほんのわずかのコーディングだけで簡単に実現できます。編集対象のユーザーのマスターリストを表示するUIコントロールを定義し、詳細情報を表示して編集するフォームを生成します。
このチュートリアルでは、ComboBoxコントロールに従業員のデータリストを挿入し、表示をカスタマイズします。次に、選択した従業員に関する編集可能な情報を表示するフォームを生成します。最後に、データベース内の従業員のレコードを更新するボタンを作成します。
返されるデータ型の設定
初めに述べたように、このチュートリアルでは、ColdFusionおよびFlash Builder 4ベータ版入門チュートリアルおよびこのシリーズの他のチュートリアルと同じ開発環境を使用します。
- Flash Builder 4ベータ版でデータとサービスビューを見つけます。図1に示すF4CF_Getting_Started_Serviceサービスが見つかるはずです。
- データ型カテゴリを展開します。EmployeeSalesDataデータ型がリストに表示されている場合（図1にも記載）、次の節のマスターコントロールの作成に進んでください。
データ型が表示されない場合は、以下の手順を実行して、CFCメソッドへのgetAllData()サービス呼び出しで取得されて返されるデータに、独自のデータ型名を割り当てます。
- データとサービスビューで、getAllData()関数を右クリックし、「戻り値の型を設定」を選択します（図2を参照）。
クエリからの各レコードは、名前／値ペアの各データ列（FIRSTNAME、LASTNAME、EMAILなど）が設定された状態で、ActionScriptオブジェクト内に格納されています。各レコードには、0から始まるインデックスが付けられます。
注意：ColdFusionと異なり、ActionScript言語のインデックスは0から始まります。
ウィザードを使うと、返されたデータをオブジェクトとして一般的に参照する代わりに、戻り値の型の名前をデータに付けることができます。次にこれを行います。
- 操作の戻り値の型を設定ダイアログボックスで、EmployeeSalesDataという名前の新しいカスタムデータ型を作成します（図3を参照）。
- 「次へ」をクリックします。
- 「はい」ラジオボタンをクリックして、リモーティング資格情報が動作に必要であることを指定します。
- リモートサービス認証ウィンドウにユーザー名とパスワードを入力します（図4を参照）。
- 「OK」をクリックし、「次へ」をクリックします。
- Modify Properties of Return Typeダイアログボックスで、すべてのプロパティがチェックされたままで、「終了」ボタンをクリックします。
- 「終了」ボタンをクリックします。
EmployeeSalesDataデータ型が、データとサービスビューのデータ型カテゴリに表示されます（図5を参照）。データ型のプロパティが、CFCメソッドから返されたクエリー列であることに注意してください。
マスターコントロールの作成
この節では、ComboBoxコントロールに従業員売り上げデータを挿入して、マスターコントロールを作成する方法を学びます。
- F4CF_Getting_Startedプロジェクトで、開いているMXMLファイルをすべて閉じます。
- メニューからファイル／新規／MXMLアプリケーションを選択して、新規アプリケーションファイルを作成します。
- ファイル名をF4CF_Master_Detail.mxmlとし、レイアウトドロップダウンリストを「なし」に設定します。
「終了」ボタンをクリックします。
注意：実際の作業では、Flash Builderプロジェクトで使用するメインアプリケーションファイルは1つだけなのが普通です。このシリーズでは、Flash Builderプロジェクトを多数作成するのを避けるため、チュートリアルごとにメインアプリケーションファイルを作成します。
デザインモードに切り替えます。
コンポーネントパネルを見つけます（ウィンドウ／コンポーネントを選択します）。
マスターユーザーインターフェイス要素として、ComboBoxコントロールを使用します。このほかに、Listコントロール、DataGridコントロールなど、リストベースの任意のコントロールが使用できます。
- ComboBoxコントロールをデザインエリアにドラッグ＆ドロップします（図6を参照）。
マスターコントロールへのデータの挿入
今度は、getAllData() CFC関数を使用して、従業員の姓をComboBoxコントロールに表示します。
- F4CF_Getting_Started_Serviceの
getAllData()関数を、ComboBoxコントロールにドラッグ＆ドロップします（図7を参照）。
- 表示されたデータにバインドダイアログボックスで、フィールドにバインドポップアップメニューからLASTNAMEを選択します（図8を参照）。
- 「OK」をクリックします。
注意：ComboBoxコントロールに、データにバインドされたことを示すアイコンが表示されます（図9を参照）。
- ファイルを保存し、ツールバーの虫のボタンの左側にある再生（丸い緑）ボタンをクリックして、アプリケーションを実行します（図10を参照）。（あるいは、実行／F4CF_Master_Detailを選択する方法もあります。）
- ComboBoxコントロールをクリックして、選択した従業員情報を変更します（図11を参照）。
マスターコントロール表示の変更
デフォルトでは、データにバインドダイアログボックスでは、データベースの1つのフィールドしかComboBox表示にバインドできません。従業員名の場合、名または姓が同じ従業員が複数いる可能性があるので、この方法ではうまくいきません。
この節では、このデフォルトの動作を回避するために、ActionScript関数を実装して、各従業員の名と姓の両方を表示する方法を学びます。
-
Flash Builderで、デザインエリアのComboBoxコントロールを選択し、ソースモードに切り替えます。
注意：1つのモードで選択したコードまたはコントロールは、別のモードに切り替えても選択されています。
ComboBoxのコードは、コントロールのx位置、y位置などの様々なプロパティを定義しています。
creationCompleteプロパティは、実際にはイベントであり、前にデータとサービスビューからCFCにマッピングしたgetAllData()操作からデータを取得するようにアプリケーションに指示する役割を果たします。dataProviderプロパティは、このサービス呼び出しの結果を受け取って、ComboBoxコントロールにバインドします。表示されるフィールドは1つだけですが、このプロパティは、データのすべての列をデータベースからComboBoxコントロールにバインドして格納します。dataProviderプロパティの値を囲む波括弧は、この値が動的であることをアプリケーションに通知する役割を果たします。LabelFieldプロパティは、ComboBoxコントロールに表示される変数を宣言します。データにバインドダイアログボックスでLASTNAMEを選択したときに、ウィザードはLASTNAMEフィールドをLabelFieldプロパティに追加して、その値を表示するようにComboBoxコントロールに指示しています。以下の手順では、
LabelFunctionプロパティを使用してカスタム関数を呼び出すことにより、LASTNAMEおよびFIRSTNAME変数をComboBoxコントロールの表示に書き込みます。 -
<fx:Script>タグブロックを見つけます。 - ComboBoxコントロールにデータを挿入する関数の下に
、displayFullNameという名前のプライベート関数を次の構文で作成します。
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.Alert;
protected function comboBox_creationCompleteHandler(event:FlexEvent):void
{
getAllDataResult.token = f4CF_Getting_Started_Service.getAllData();
}
private function displayFullName()
{
}
]]>
</fx:Script>
- この関数は、従業員の名と姓の両方を含む文字列をComboBoxコントロールに返します。したがって、コロンとStringという語を関数宣言の後ろに追加します。
private function displayFullName():String
{
}
ComboBoxコントロールに表示される従業員レコードのそれぞれに対して、ここで作成した関数が呼び出されます。dataProviderには各従業員に関するすべてのデータが含まれており、ComboBoxコントロールはどれを表示するかを判断できないので、すべてのデータが関数に渡され、必要なものを選択できるようになっています。
アプリケーションは、名前／値ペアを持つ複合オブジェクトによって関数にデータを渡します。このオブジェクトの名前は何でもかまいませんが、慣習ではitemという名前にします。データ型は一般的なActionScriptのObjectインスタンスにします。
displayFullName()関数の括弧の間にitem引数を追加し、データ型をObjectクラスにします。
private function displayFullName(item:Object):String
これで、データベース内の各従業員の名と姓を、単純な文字列連結によって結合できます。データベース内の2つの列はFIRSTNAMEとLASTNAMEであり、関数に渡されるitemオブジェクトを通じて参照されます。
returnキーワードを使用して、FIRSTNAMEフィールドとLASTNAMEフィールドをComboBox表示に返します。表示が自然になるように、間にスペースを追加します。
private function displayFullName(item:Object):String
{
return item.FIRSTNAME + " " + item.LASTNAME;
}
- ComboBoxコントロールのMXMLコードを見つけます。
labelField="LASTNAME"プロパティを削除します。labelFunctionプロパティをComboBoxコントロールタブに追加し、その値をdisplayFullNameに設定します。ComboBoxコントロールのMXMLコードは次のようになります。
<mx:ComboBox x="71" y="56" editable="true" id="comboBox"
creationComplete="comboBox_creationCompleteHandler(event)"
dataProvider="{getAllDataResult.lastResult}" labelFunction="displayFullName"/>
labelFunctionプロパティの関数には括弧を使用しません。メソッドを直接呼び出すのではなく、単に関数の名前をComboBoxコントロールに指定するだけです。
ファイルを保存して、アプリケーションを実行します。
従業員の姓名が表示されます（図12を参照）。
詳細フォームの生成
この節では、Flash Builderのフォームを生成ウィザードを使用して、マスターコントロール（この例ではComboBoxコントロール）をデータプロバイダーとして使用する詳細フォームを作成します。
- デザインモードに切り替えて、ComboBoxコントロールを選択します。
- ComboBoxコントロールを右クリックし、「詳細フォームを生成」を選択します（図13を参照）。
- ソースを選択ダイアログボックスで、デフォルト設定をそのままにして、「次へ」をクリックします（図14を参照）。
- プロパティコントロールマッピングダイアログボックスで、選択されている値をそのまま使用します（図15を参照）。
- 「終了」ボタンをクリックします。
- DetailsフォームをComboBoxコントロールの右側に配置します。
- ファイルを保存して、アプリケーションを実行します。ComboBoxコントロール内の最初の従業員に関する情報がフォームに挿入されるはずです。
- ComboBoxコントロールから従業員を選択します。
選択した従業員の従業員売り上げデータがフォームに挿入されます（図16を参照）。
従業員情報の更新
この節では、インターフェイスにButtonコントロールを追加して、サーバー上の従業員情報をユーザーが更新できるようにします。
コンポーネントビューから、Buttonコントロールをデザインエリアの詳細フォームの下にドラッグ＆ドロップします。
ドロップしてもButtonコントロールが表示されない場合は、「デザイン」モードボタンの右側の更新ボタンをクリックします。
- Buttonコントロールをダブルクリックして、ラベルを更新に変更します（図17を参照）。
- F4CF_Getting_Started_Serviceデータサービスの
updateItem()関数を見つけます。 updateItem()関数を「更新」ボタンにドラッグ＆ドロップします（図18を参照）。これにより、updateItem()サービス操作が「更新」ボタンに関連付けられます。
ビューが自動的に切り替わらない場合は、「ソース」ボタンをクリックして、ソースモードに切り替えます。
updateItem()関数をButtonコントロールにドロップすると、Flash Builderは、カスタムActionScriptクリックハンドラーを生成します。
updateItem()サービス呼び出しの括弧の間のitemの部分が選択されているはずです。
protected function button_clickHandler(event:MouseEvent):void
{
updateItemResult.token = f4CF_Getting_Started_Service.updateItem(item);
}
注意：ActionScriptには様々な種類のイベントがあります。event引数のMouseEventデータ型は、このコードがユーザーのマウス操作を処理することを宣言します。ActionScriptイベントについて詳しくは、1週間で学ぶFlexトレーニングシリーズのユーザーイベントの処理とイベントオブジェクトの概要のビデオを参照してください。
ここでitemという語が使用されているのは、ComboBoxコントロール内のオブジェクト名に合わせただけです。CFCがupdateItem()メソッドの引数名をitemと定義したことを思い出してください。
updateItem()操作に渡したいのは、個々の従業員に関するすべてのデータを含むサービスオブジェクトです。この情報は、前に定義したEmployeeSalesDataデータ型に格納されています。
- サービス呼び出しのitemの参照を
employeeSalesDataに変更します。
protected function button_clickHandler(event:MouseEvent):void
{
updateItemResult.token = f4CF_Getting_Started_Service.updateItem(employeeSalesData);
}
これにより、フォームから実行されたすべての変更を反映したemployeeSalesDataオブジェクトがサーバーに戻され、データベースの更新に使用されます。
- ファイルを保存して、アプリケーションを実行します。
- ComboBoxコントロールから従業員を選択します。
- 従業員の情報を変更し、「更新」ボタンをクリックします（図19を参照）。
- ブラウザーを更新し、編集した従業員レコードを選択します。
従業員の情報に、新しく指定した値が含まれることを確認します。
次のステップ
このチュートリアルでは、Flash Builderを使用して、ほとんどコーディングなしでマスター／詳細インターフェイスを作成する方法を学びました。また、ComboBoxコントロールに表示されるデータをカスタマイズする方法も学びました。返されるデータとデータ型の詳細については、Adobe Flash Builder 4ベータ版によるフォームの生成チュートリアルで学ぶことができます。
