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

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

要件としては

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

となります。

JS Treeビューの導入

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

jsTree

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

js/AppPurchaseManagerController.jsの修正

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

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

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

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

AppPurchaseManagerLogicの処理

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

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

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

util.jsの修正

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

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

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

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

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

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

js/TreeViewController.jsの追加

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

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

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

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

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

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

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

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

---

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

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

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

---

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

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

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