コンテンツへスキップ
Tags

業務アプリデモ開発をベースにhifiveを学ぼう(3)「ツリービューの実装」

by : 2016/06/10

前回に引き続いて今回はツリービューを実装します。動作は次のようになります。

要件としては

  • ツリービューの初期表示
  • ツリービューの折りたたみ、伸張

となります。

JS Treeビューの導入

ツリービューの表示自体はjsTreeというライブラリを使います。

jsTree

このライブラリをlib/jstree以下に配置し、index.htmlにて読み込みます。

<!– jstree –>
<link rel="stylesheet" href="lib/jstree/themes/default/style.css" />
<script type="text/javascript" src="lib/jstree/jstree.js"></script>

view raw
jstree.html
hosted with ❤ by GitHub

js/AppPurchaseManagerController.jsの修正

次に js/AppPurchaseManagerController.js に対してツリービューを読み込むように設定をします。

var controller = {
:
_treeViewController: sample.TreeViewController,

さらにAjaxや計算処理を行うためのロジックを追加します。

var controller = {
:
_appLogic: sample.AppPurchaseManagerLogic,

そして、コントローラーが使える状態になったタイミングのイベント、__readyにてツリービューコントローラーを呼び出します。

__ready: function() {
// ツリービュー(エクスプローラ)にデータを設定
this._treeViewController.setTreeData(this._appLogic.getShortcutTree());
},

これでコントローラの修正は完了です。

AppPurchaseManagerLogicの処理

次にAppPurchaseManagerLogicについて記述していきます。ファイルは js/AppPurchaseManagerLogic.js になります。処理内容は次のようになります。Ajaxでデータを取得するだけです。

(function() {
var controller = {
__name: 'sample.AppPurchaseManagerLogic',
getShortcutTree: function() {
return sample.util.ajax(sample.consts.url.FILE_TREE);
}
};
h5.core.expose(controller);
})();

sample.consts.url.FILE_TREE は sample.util 内で定義される変数です。

AppPurchaseManagerLogicを読み込むように index.html を修正しておきます。

<script src="js/AppPurchaseManagerLogic.js" /></script>

util.jsの修正

ここではAjaxをダミーで実行するメソッドを実装します。本番環境では実際にサーバから取得するようにすれば良いでしょう。このようにデータ取得部分を隠蔽することで簡単にデモ環境と本番環境との切り替えができるようになります。

h5.u.obj.expose('sample.util', {
:
ajax: function(url, data) {
// ダミーデータを返す
var ret = null;
url = url.url || url;
switch (url) {
case sample.consts.url.FILE_TREE:
ret = treeDatas || createTreeDatas();
ret = ret.slice(0);
break;
}
var dfd = h5.async.deferred();
setTimeout(function() {
dfd.resolve(ret);
}, 0);
return dfd.promise();
}

view raw
util.js
hosted with ❤ by GitHub

ダミーデータは一覧などでも使うのでswitch文を使って取り分けられるようにしています。今回は createTreeDatas() にてデータを生成します。

続けて createTreeDatas() を実装します。 applicantsstatuses は他の処理でも使うので関数の外に出しています。

var applicants = ['satoshi', 'takeshi', 'kasumi', 'haruka'];
var statuses = ['new', 'investigation', 'approved', 'closed', 'rejected'];
function createTreeDatas() {
treeDatas = [{
id: 'all',
parent: '#',
icon: 'jstree-file',
text: '全て'
}, {
id: 'applicant',
parent: '#',
text: '申請者別',
state: {
opened: true
}
}, {
id: 'status',
parent: '#',
text: 'ステータス別',
state: {
opened: true
}
}, {
id: '10000*100',
parent: '#',
text: '10000×100',
icon: 'jstree-file'
}, {
id: '10000*10000',
parent: '#',
text: '10000×10000',
icon: 'jstree-file'
}];
// 申請者別
for (var i = 0, l = applicants.length; i < l; i++) {
var applicant = applicants[i];
treeDatas.push({
id: 'applicant.' + applicant,
parent: 'applicant',
icon: 'jstree-file',
text: applicant
});
}
// ステータス別
for (var i = 0, l = statuses.length; i < l; i++) {
var status = statuses[i];
var text = sample.util.statusTextMap[status];
treeDatas.push({
id: 'status.' + status,
parent: 'status',
icon: 'jstree-file',
text: text
});
}
return treeDatas;
}

view raw
createTreeDatas.js
hosted with ❤ by GitHub

treeDatasというツリービューの元データを作成して返しています。この中で sample.util.statusTextMap という変数を使っていますので、これは sample.utilsの中で定義しておきます。

h5.u.obj.expose('sample.util', {
statusTextMap: {
'new': '新規',
investigation: '検討中',
approved: '承認済',
closed: '完了',
rejected: '棄却'
},
:

view raw
statusTextMap.js
hosted with ❤ by GitHub

最後に定数用のオブジェクトを定義します。

h5.u.obj.expose('sample.consts', {
url: {
FILE_TREE: 'filetree'
}
});

view raw
consts.js
hosted with ❤ by GitHub

これでutil.jsの修正は完了です。

js/TreeViewController.jsの追加

最後に js/TreeViewController.js を追加します。ここで生成されたツリービューのデータを表示します。

まず構造は次のようになります。

var controller = {
__name: 'sample.TreeViewController',
_$tree: null, // ツリービューのDOM
_currentSelected: null, // 選択しているデータについて
__init: function() {
// 初期設定
},
setTreeData: function(dataOrPromise, opt) {
// ツリービューにデータをセット
},
h5.core.expose(controller);
})(jQuery);

まず初期設定を行います。

__init: function() {
sample.util.createDefaultControllerView(this);
this._$tree = this.$find('.jstree');
},

ここで sample.util.createDefaultControllerView(this); とすることで表示処理の下準備(バインド)を行っています。

そして setTreeData を実装します。これはデータを受け取って描画を行う処理になります。

setTreeData: function(dataOrPromise, opt) {
if (h5.async.isPromise(dataOrPromise)) {
var indicator = this.indicator().show();
dataOrPromise.done(this.own(function(treeData) {
this._setTreeData(treeData, opt);
indicator.hide();
}));
} else {
this._setTreeData(dataOrPromise, opt);
}
},

view raw
setTreeData.js
hosted with ❤ by GitHub

ここで注意するのはAjaxのような非同期処理とそうでない場合を想定しておくということです。その判定として、hifiveでは h5.async.isPromise というメソッドを提供しています。これを使うことで Promiseであればdoneメソッドを受けてから表示処理を行うといった判定ができます。また、Promiseの場合は var indicator = this.indicator().show(); を使ってインジケータ表示を行っています。これは標準で用意しているメソッドになります。

_setTreeData については以下のようになります。JSTreeを呼び出してデータを設定しているだけです。this.$treeには元々jQueryが入っています。

_setTreeData: function(treeData, opt) {
// TODO 各オプションは設定可能
opt = opt || {};
this._$tree.jstree({
core: {
animation: opt.animation || 0,
multiple: opt.multiple || false,
data: treeData
},
themes: opt.themes || {
stripes: true
}
});
}

view raw
_setTreeData.js
hosted with ❤ by GitHub

なお、このファイルもindex.htmlから読み込まれるように指定します。

<script src="js/TreeViewController.js"></script>


これで準備完了です。実行すると、ツリービューが表示されるかと思います。

今回はデモなのでデータを手動で用意していますが、実際にはAjaxを使ってサーバから取得することになるかと思います。しかし、その場合もutil.jsさえ切り替えれば良いだけです。

このようにAjaxによるデータ取得部分をコントローラによる処理と切り離しておくことでメンテナンス性をあげることができます。さらに同期、非同期処理の両方に対応しておくことでコードも見やすくなるはずです。


今回のコードはGitHubで見られるようになっています。また、動作しているデモはこちらになります。

次回はデータの一覧表示部分について見ていきます。

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

banner_02

From → hifive, HTML5

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

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