Eclipseを使用したFlex＋PHP開発

　この時点で、データとサービスビューにクライアントサービス（MyServiceという名前）が表示されるはずです（図19を参照）。ウィザードは、services.myserviceパッケージに2つのクラスを生成しています。MyServiceは、アプリケーションでPHPサービスと接続するために使用するクラスです。これは_Super_MyServiceクラスを拡張しており、このクラスがほとんどの作業を行います。もし、クラスをカスタマイズする必要がある場合は、親クラスではなく必ず子クラスを変更するようにしてください。

図19. クライアントサイドのデータサービス

　既に説明したように、PHP側では、PHPデータオブジェクト（VOAuthor）を使用して、データベースの1個のレコードを格納します。これに相当するActionScriptデータオブジェクトを作成するには、もう1つのウィザードを使用します。このためには、データとサービスビューでgetData()ノードを右クリックし［Configure Return Type...（戻り値の型を設定...）］を選択します（図20を参照）。

図20. getData()操作の戻り値の型の設定

　ウィザードの1ページ目の設定はデフォルトのままにして、［Next（次へ）］ボタンをクリックします。Flash Builder 4は、getData()メソッドを呼び出してMyService PHPクラスへの要求を実行します。PHPスクリプトでエラーが発生せず、データベース資格情報が正しければ、ウィザードの2ページ目が表示されるので（図21を参照）、ここで［Finish（完了）］ボタンをクリックします。

図21. ActionScriptデータモデルの作成

　valueObjectsパッケージを開くと、2つの新しいクラスが見つかります。VOAuthorとそのスーパークラスの_Super_VOAuthorです。ここでも、データオブジェクトをカスタマイズする場合は、親クラスではなく子クラスにカスタムコードを追加してください。

　それでは、これらのクラスを使用してみましょう。getData()操作の結果をDataGridにバインドします。このためには、データとサービスビューからgetData()ノードをDataGridにドラッグ＆ドロップします（必ずデザインビューで行います）。確認ウィンドウがポップアップします（図22を参照）。［OK］をクリックすると、ActionScriptデータオブジェクトのプロパティの名前がDataGridのヘッダーに表示されます（図23を参照）。

図22. getData()操作のDataGridへのバインド

図23. getData()操作をDataGridにバインドした結果

　ファイルを保存してソースビューに切り換えます。バインド操作によって生成されたActionScriptコマンドのブロックが見られます。dataGrid_creationCompleteHandler()関数は、DataGridがCreation Completeイベントを発生したときに呼び出されます。

protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
{
getDataResult.token = myService.getData();
}

　myService.getData()が呼び出されると、トークンが返されます。トークンは、CallResponderインスタンスのtokenプロパティに保存されます。DataGridは、このCallResponderインスタンスのlastResultプロパティからデータを取得します。

　それでは、アプリケーションを実行してデータを見てみましょう。変更をすべて保存したことを確認し、Flashパースペクティブにいる間に、［Run（実行）］アイコンをクリックするか、flex_project.mxmlファイルを右クリックして［Run（実行）］-［Web Application（Webアプリケーション）］を選択します。DataGridとデータがデフォルトのWebブラウザに表示されます。

図24. アプリケーションの動作検証

　これで、PHPクラスに接続し、MySQLテーブルに記憶されているデータを表示するFlexアプリケーションができました。ここまでのところ、1行のコードも書かずにクライアントコードが完成しています。このアプリケーションに、編集機能があれば便利ではないでしょうか。

　次に、この作業を実行します。今度は、PHPクラスのもう1つのメソッド（saveData()）を使用します。ただし、このメソッドを呼び出す前に、DataGridの隣にフォームを1つ追加します。もう一度デザインビューに入り、［Data（データ）］と［Services（サービス）ビュー］-［Data Types（データ型）］からVOAuthorエントリを選択します。このエントリを右クリックし、［Generate Form...（フォームを生成...）］オプションを選択します（図25を参照）。

図25. VOAuthorデータオブジェクトに対する［Generate Form（フォームを生成）］ウィザードの開始

　ウィザードの1ページ目では、デフォルトのオプションをそのままにして（図26を参照）、［Next（次へ）］ボタンをクリックします。2ページ目では、id_autプロパティの選択を解除します（図27を参照）。レコードのプライマリキーは変更させず、名と姓だけを変更可能にするためです。

　［Finish（完了）］ボタンをクリックすると、DataGridの上にフォームが配置されます。フォームを選択して、DataGridの右側に移動します（図28を参照）。

図26. VOAuthorデータオブジェクトに対する［Generate Form（フォームを生成）］ウィザードの1ページ目

図27. VOAuthorデータオブジェクトに対する［Generate Form（フォームを生成）］ウィザードの2ページ目

図28. フォームの生成

　ラベルと色は自由に変更できます。これが終わったら、ソースビューに切り替えて、DataGridの現在選択されている行を、フォームフィールドでデータソースとして使用されているVOAuthorインスタンスにバインドする作業を行います。ソースを見ると、fx:Declarationsセクションに、vOAuthorをidとするVOAuthorというタグが見られます。これがフォームで使用されるオブジェクトです。

　Declarationsタグの後にBindingタグを追加します。sourceプロパティに対して、DataGridの現在選択されているアイテムを、VOAuthorにキャストして設定します。宛先は、フォームで使用されるvOAuthorオブジェクトです。

<fx:Binding source="dataGrid.selectedItem as VOAuthor" destination="vOAuthor"/>

　アプリケーションを実行する前に、フォームの［Submit（送信）］ボタンのクリックイベントに対するリスナーを作成する必要があります。フォームのコードを見ると、ボタンにbutton_clickHandlerというリスナーが登録されているが、そのリスナーが定義されていないことがわかります。やりたいことは、このボタンがクリックされたら、フォームからvOAuthorインスタンスに値をコピーし、saveData()操作を呼び出して、vOAuthorオブジェクトを渡してデータベースに保存させることです。

　デザインビューに戻り、［Submit（送信）］ボタンを右クリックして、コンテキストメニューから［Generate Service Call（サービスの呼び出しを生成）］を選択します。開いたウィンドウで、saveData()操作を選択して、［OK］をクリックします（図29を参照）。

図29. ［Submit（送信）］ボタンに対するサービスの呼び出しの生成

　ソースビューに戻り、［Submit（送信）］ボタンにclickイベントに対するリスナーが1つだけ登録されていることを確認して、button_clickHandler関数が定義されている場所（ActionScriptコードブロック内）に移動します。引数としてvOAuthor変数を追加し、サービス呼び出しの前に、フォームから得られたテキスト値をvOAuthorインスタンスに設定します。関数は次のようになります。

protected function button_clickHandler(event:MouseEvent):void
{
  vOAuthor.fname_aut = fname_autTextInput.text;
  vOAuthor.lname_aut = lname_autTextInput.text;
  saveDataResult.token = myService.saveData(vOAuthor);
}

　これで、最終的なアプリケーションの動作検証を行う準備が整いました。アプリケーションを実行し、選択を行い、フォームで名前を変更し、［Submit（送信）］ボタンをクリックします。データはMySQLデータベースに書き戻されるはずです。

図30. レコードの編集

　PHPのMyServiceクラスにdelete()メソッドを追加して、このメソッドをクライアントから使用することは簡単です。これは宿題にしておきます。

　いくつかヒントを出します。PHPコードでdelete()メソッドを作成したら（これはVOAuthorオブジェクトを引数として取ります）、Flexアプリケーションでボタンを新規作成します。次に、デザインビューでそのボタンを右クリックし、コンテキストメニューから［Generate Service Call（サービスの呼び出しを生成）］を選択します。ウィンドウが開き、ボタンが押されたときに呼び出す操作を選択できます。delete()メソッドを選択して［OK］をクリックします。新しいCallResponderインスタンスとイベントリスナーが生成されます。イベントリスナー内部で、適切な引数を渡す必要があります。このプロジェクトでは、データグリッドの現在選択されている行です。これは既にvOAuthorオブジェクトに格納されています。

　もう1つの役に立つヒントとしては、CallResponderオブジェクトのresultイベントリスナーを使用して、他のアクションを起動できます。例えば、レコードを削除する場合に、レコードが削除された後でgetData()操作を呼び出したいとします。これは、dataGrid_creationCompleteHandler()関数への呼び出しを追加することで、簡単に実現できます。これは、getData()メソッドへの要求を実行する関数です。

<s:CallResponder id="deleteDataResult" result="dataGrid_creationCompleteHandler()"/>

　dataGrid_creationCompleteHandler()関数は引数なしの呼び出しを受け入れる必要があります。このためには、引数がデフォルト値としてnullを持つように変更します。

protected function dataGrid_creationCompleteHandler(event:FlexEvent=null):void