Flex 4 マスターシリーズ #12 データ中心型開発（DCD）Part 2
必要条件
この記事に必要な予備知識
Flex Builderの使用経験があれば役立ちますが、必須ではありません。Java、PHPなどのサーバーサイドテクノロジーを理解していることが必要です。
ユーザーレベル
すべて
必要な製品
- Flash Builder 4 (Download trial)
サンプルファイル
- サンプル画面を含むfxpプロジェクト (19 KB)
Flex 4 マスターシリーズ 連載記事一覧
- #01 MXML 2009
- #02 Flash Builder 4 新機能
- #03 Flex 4 ステート
- #04 Flex 4 CSS
- #05 Spark コンポーネント
- #06 データ中心型開発（DCD）Part1
- #07 Spark Skining part 1
- #08 Spark Skining part 2
- #09 Flex 4 エフェクト
- #10 Flex 4 Spark Layouts
- #11 FlexUnit 4
- #12 データ中心型開発（DCD）Part2
はじめに
本チュートリアルのPart 1では、Flash Builder 4の新機能のひとつであるデータ中心型開発の機能紹介としてサーバテクノロジーにPHPを使い、ZendAMFを使ったAMF通信を行って、ページ処理可能なアプリケーションを作成する方法までを紹介いたしました。
この記事ではPart 1の内容を基にして、クライアントサイドデータ管理を行うアプリケーションに拡張していきます。
クライアントデータ管理について
Flash Builder 4のクライアントデータ管理では以下の機能があります。
- サーバより取得したデータの一元管理
- クライアントデータ変更の取消し
- クライアントデータ変更による差分のサーバへの反映
Step1.クライアントデータ管理の設定
プロジェクトを選択してデータとサービスビューでクライアントデータ管理対象となるサービスを表示します。
サービスのメソッド一覧からデータ取得のメソッドを選択して右クリック->データ管理を有効にする...を選択します。
識別プロパティを選択するダイアログが表示されるので、プロパティからデータを一意に特定するプライマリーキーになる項目を選択します。
AddressServiceではIDがプライマリになるのでIDにチェックし「次へ」をクリックします。
データ管理操作と、サーバのオペレーションをマッピングする画面が表示されるので以下のように設定します。
Part 1で作成した際にMySQLからテーブル情報を取得して生成したサービスなので、Flash Builder 4が認識するため自動的にセットされています。自分で作成したサービスなどで設定されていないときには、プルダウンで該当するオペレーションを選択し終了ボタンをクリックします。
これで、クライアントデータ管理の設定は完了です。
Step2.アイテムの追加
次に、Flash Builder 4のデザインモードでアイテムを追加するボタンとメソッドを追加します。
まず最初に追加用のボタンを配置します。ボタンを選択してプロパティパネル上でIDを"addBtn"に指定し、ラベルを「追加」に書き換えます。
クリック時プロパティにあるプルダウンより「イベントハンドラーを生成」を選択します。
以下のコードが生成され、デザインモードからソースモードに切り替わります。
protected function addBtn_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
新規のアドレスデータを追加してデータグリッドに表示するように以下のコードを追加します。この追加ボタンをクリックした時点ではまだサーバにはデータを送信しないので、クライアントでの追加のみとなります。
protected function addBtn_clickHandler(event:MouseEvent):void
{
var address:Address = new Address();
address.name="名前";
dataGrid.dataProvider.addItem(address);
dataGrid.scrollToIndex(dataGrid.dataProvider.length);
}
Step3.データグリッドの属性変更
追加したデータの編集ができるようにDataGridのeditable属性をtrueに変更します。
編集可をtrueにすると以下のようにDataGridのeditable属性がtrueになります。
<mx:DataGrid x="10" y="35" id="dataGrid"
rowCount="10"
creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getAddress_pagedResult.lastResult}" editable="true">
次に「列の構成...」ボタンをクリックして編集しない列を設定します。
IDとversionNoについては、編集可のチェックを外しておきます。
Step4.アイテムの削除
次にアイテムの削除を行うボタンと処理を作成します。
デザインモードでボタンを追加し、idを"deleteBtn"、ラベルを「削除」に設定します。
追加ボタン同様、クリック時プロパティにあるプルダウンより「イベントハンドラーを生成」を選択します。
選択した行のデータを削除するように以下のコードを追加します。
削除するときにはデータを一意に特定するIDを指定してFlash Builder 4が生成したdelete用のメソッド(deleteAddress)を呼び出します。
削除したデータをサーバに反映しないように、データマネージャを利用してautoCommit属性を”false”にします。
autoCommit属性をfalseにするとクライアントデータのみの操作になります。追加の時と同様、クライアントのみの操作になります。
protected function delteBtn_clickHandler(event:MouseEvent):void
{
addressService.getDataManager(addressService.DATA_MANAGER_ADDRESS).autoCommit=false;
addressService.deleteAddress(dataGrid.selectedItem.ID);
}
Step5.変更の取消(revert)
次にクライアントデータの変更を取り消しする操作を追加します。
これまでと同様にボタンを配置して、idに"revertBtn"と指定しラベルを"取消"にします。
クリック時のプロパティよりイベントハンドラーを生成します。生成されたイベントハンドラーに以下のコードを追加します。
サービスよりデータマネージャを取得し、これまでの変更を取り消しするメソッドを呼び出します。ここまで作成したら、実行して動作を確認します。
protected function revertBtn_clickHandler(event:MouseEvent):void
{
addressService.getDataManager(addressService.DATA_MANAGER_ADDRESS).revertChanges();
}
ネットワークモニタービューでモニターを有効にしてデバッグボタンをクリックするかショートカット(Alt + Shift + d, d)でデバッグを開始します。
アプリケーションが実行されたらデータグリッドに表示されているデータを選択して削除ボタンをクリックします。
一覧から削除されますが、ネットワークモニターには操作が表示されず、データ通信をしていないことが確認できます。
次に追加ボタンをクリックすると、一覧データが一番下までスクロールし、データが追加されていることがわかります。
このときネットワークモニターをみると、一覧データの最後から20件を取得する操作を呼び出してスクロールしていますが追加データ用のサービスが呼び出されていないことが確認できます。
取消しボタンをクリックすると、これまでの削除やデータの追加が取消され、元に戻ることがわかります。この時ネットワークモニターを見るとサーバ操作が行われていないので、クライアント側でデータ管理が正しくされていることが確認できます。
アプリケーションを再度起動して一覧をみるとデータ変更前と変わっていないことが確認できます。
Step6.変更の反映(commit)
次にクライアントで行ったデータ操作をサーバに反映する操作を追加します。
デザインビューからボタンを追加しidに"saveBtn"と指定しラベルを"保存"にします。
その後クリック時のプロパティよりイベントハンドラーを生成します。
protected function saveBtn_clickHandler(event:MouseEvent):void
{
addressService.getDataManager(addressService.DATA_MANAGER_ADDRESS).commit();
}
サービスよりデータマネージャを取得し、これまでの変更を反映するメソッド(commit)を呼び出します。以上で変更の反映を行う処理は完了です。
動作の確認
ここまで作成したアプリケーションがクライアントデータ管理されているかどうかを確認します。
取消しの確認時のようにネットワークモニタービューでモニターを有効にしてデバッグボタンをクリックするかショートカット(Alt + Shift + d, d)でデバッグを開始します。
まず最初に一覧データからいくつかデータをピックアップして変更します。
次に追加ボタンをクリックしてデータの追加を行います。
最後に一覧からデータを選択して削除を行います。
ここまでの処理でサーバデータの更新を行う操作である
(updateAddress/createAddress/deleteAddress)が呼び出されていないことがネットワークモニターで確認できます。
保存ボタンをクリックすると、これまでクライアントで更新されたデータ数分だけ更新を行う操作が呼ばれてサーバに反映されていることを確認できます。
次のステップ
データ中心型開発（DCD）Part 2では、Part 1で作成したページング可能な一覧をもとにクライアントでのデータ管理を行う方法についてチュートリアルを通して紹介いたしました。
- クライアントデータ管理の設定
- イベントハンドラーの生成
- アイテムの追加
- アイテムの削除
- 変更の取消(revert)
- 変更の反映(commit)
- ネットワークモニターでの確認
クライアントデータ管理はこれまでもLive Cycle Data Servicesと接続したときのみ行う事が出来ました。
Flash Builder 4ではサーバテクノロジーがPHPやHTTP、BlazeDSなどでもクライアントデータ管理ができるようにライブラリと設定画面が用意されているので、効率よく開発することができます。
また本チュートリアルで作成したように一覧での更新処理を行う以外にも詳細フォームを生成する機能も用意されています。
データ型にあった編集や、一覧に表示していないプロパティの更新などを行うようにすることも可能です。
より使いやすいアプリケーションにしていくことができるでしょう。
