コンテンツへスキップ
Tags

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

by : 2016/06/20

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

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

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

 

無題

ツリービューでの選択

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

'.shortcut selected': function(ctx) {
:
this._gridViewerController.setData(this._appLogic.searchPurchaseDatas(query));
}

view raw
gridViewer.js
hosted with ❤ by GitHub

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

searchPurchaseDatas: function(query) {
return sample.util.ajax(sample.consts.url.SEARCH_WORKFLOW, query);
},

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

setData: function(data, dummyColNums) {
if (h5.async.isPromise(data)) {
var indicator = this.indicator();
indicator.show();
data.done(this.own(function(d) {
this.setData(d, dummyColNums);
indicator.hide();
}));
return;
}
this._gridWrapperController.setData(data, dummyColNums);
this.$find('.dataLength').text(data.length);
},

view raw
setData.js
hosted with ❤ by GitHub

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

setData: function(data, dummyColNums) {
this._gridController.setData(data, dummyColNums);
},

view raw
setData.js
hosted with ❤ by GitHub

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

setData: function(data, dummyColNums) {
:
var dataSource = datagrid.createDataSource({
idProperty: 'id',
type: 'local',
param: data
});
// paramを再生成する
this._createDefaultParam(dummyColNums);
// FIXME (0,0)にグリッドをスクロール
this._gridController._viewController._vPos = 0;
this._gridController._viewController._hPos = 0;
this._gridController.activate(dataSource, this._param);
this._gridController.search();
this._triggerLengthChange();
},

view raw
setData.js
hosted with ❤ by GitHub

グリッドで選択

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

'{rootElement} gridChangeDataSelect': function() {
var ids = this._gridController.getSelectedDataIdAll()
this.trigger('showDetail', ids);
},

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

'.gridViewer showDetail': function(ctx) {
var id = ctx.evArg;
if (!id) {
return;
}
var isMass = ($.isArray(id) ? id[0] : id).indexOf('_') === '0';
var data = this._appLogic.getPurchaseById(id);
this._detailController.setData(data, isMass);
},

view raw
gridViewer.js
hosted with ❤ by GitHub

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

setData: function(data) {
:
var dataAry = $.isArray(data) ? data : [data];
var details = [];
for (var i = 0, l = dataAry.length; i < l; i++) {
var d = dataAry[i];
details.push({
id: d.id,
:
applicationDate: d.applicationDate
});
}
this.view.update('{rootElement}', 'purchaseDetail', {
details: details
});
this.refresh();
},

view raw
DetailController.js
hosted with ❤ by GitHub

その他の処理

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

'.confirm click': function(ctx, $el) {
var ids = '' + $el.data('confirm-targets');
ids = ids.split(',');
if (!ids.length) {
return;
}
if (!confirm(ids.length + '件のデータを"承認済"にします。よろしいですか?')) {
return;
}
this.trigger('confirmPurchase', {
ids: ids
});
},

view raw
confirm.js
hosted with ❤ by GitHub

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

'{rootElement} confirmPurchase': function(ctx) {
var ids = ctx.evArg.ids;
var promise = this._appLogic.confirmByIds(ids);
this.indicator({
promises: promise
}).show();
promise.done(this.own(function(datas) {
this._detailController.confirmExecuted(datas);
this._gridViewerController.refresh();
alert(datas.length + '件の申請を承認しました');
}));
},

view raw
confirmPurchase.js
hosted with ❤ by GitHub

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


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

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

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

banner_02

From → hifive, HTML5

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

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