Skip to content
Tags

業務アプリデモ開発をベースにhifiveを学ぼう(5)「親子連携」

by : 2016/06/20

今回は引き続き業務アプリのデモを通じてhifiveの機能を紹介します。今回は親子連携についてです。

親子連携はいわゆる Master – Detailと呼ばれるもので、親で選んだ内容を子に伝えることで描画を更新したり、処理を行うというものになります。

今回のデモでは2つの親子連携が行われています。

 

無題

ツリービューでの選択

ツリービューで項目を選択すると、右側のグリッドが更新されます。この処理は js/AppPurchaseManagerController.js に記載されています。

queryというのは絞り込み条件になります。それを使って js/AppPurchaseManagerLogic.js の searchPurchaseDatas を呼び出します。実際にはutil.ajaxを使っています。結果はグリッドで描画するデータの配列になります。

GridViewerController.js の setData ではデータを受け取った後、描画処理を行います。ここで注意したいのは、データがPromiseオブジェクトの場合があるということです。その場合、Promiseであるかどうかを判定し( if (h5.async.isPromise(data)) { )その結果を使って再度自分自身をコールしています。これによって非同期処理でも同期のように扱えるようになります。

実際には js/grid/GridWrapperController.js の setData に処理を委譲しています。

さらに処理を js/grid/DatagridController.js に処理を渡しています。ここで実際の表示処理を行っています。画面を部品ごとに分割したり、ラッパーを挟むことで機能を分割できるようになり、メンテナンス性が維持されます。

グリッドで選択

グリッドで行を選択した後のイベントは次のように処理されます。まず行を選択した時点で gridChangeDataSelect イベントが呼ばれます。処理を行うのは js/grid/DatagridController.js です。

ここでは選択されているIDを集めて、showDetailイベントを発火しています。このイベントは js/AppPurchaseManagerController.js によって監視されています。

そして js/DetailController.js のsetDataが呼ばれます。ここではデータを作成し、 view.updateを使って描画処理を行います。

その他の処理

その他、画面上でボタンを押した際の処理などがありますが、いずれも実際の処理は行わずにイベントを発火しています。例えば以下は承認済みにする処理です。

confirmPurchaseというイベントは js/AppPurchaseManagerController.js にて購読しています。

このように hifive では購読とイベントを使ってデータの伝搬と描画を行っています。その結果としてHTMLとデータ操作を分離し、メンテナンスやテストしやすいシステム構築が可能になります。


今回のコードはGitHubにアップロード されています。また、デモはこちらにて試せます。

hifiveではこのような構築法が容易になるように設計されています。ぜひお試しください。

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

From → hifive, HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。