業務アプリデモ開発をベースにhifiveを学ぼう（2）「Devided Boxの実装」

では今回から業務アプリケーションを実際に作っていきたいと思います。まず最初にDevided Boxを実装します。これは画面を枠線で分割し、かつそれをマウスでドラッグして担当者の好きな画面構成に変更できる機能です。

実際に動かすと次のようになります。

要点としては幾つかあり、

• 黒い枠線をドラッグして画面構成がダイナミックに変更できる
• 3ペインのいずれも右上にあるアイコンをクリックして折りたためる
• ウィンドウをリサイズした時にペインの構成も追従する

これらの機能をhifiveの一機能であるDividedBoxを使いつつ、実装していきたいと思います。

実行環境について

実際に動かす際にはWebサーバが必要になります。環境の構築方法については拙作のITpro Report – 手軽にHTML5/JavaScript開発を始めるための環境構築法：ITproを参考にしてください。

HTMLについて

まずHTMLですが、hifive/jQuery/Bootstrapを読み込みます。

さらにペインの折りたたみやドラッグでの移動を可能にするライブラリである AccordionPanel および DividedBox を読み込みます。

bodyタグの内容について

Bodyタグ内ですが、次のようになります。appRootクラス以下にアプリケーションを展開してきます。

JavaScriptの実装

まず js/AppPurchaseManagerController.js というファイルを作成します。これはWebアプリケーション以外のウィンドウなどを管理します。例えばビューの作成およびウィンドウをリサイズした時のイベントハンドリングを行います。そして、 __nameで指定されている sample.AppPurchaseManagerController という変数名でグローバルにアクセスできるようにしています（h5.core.exposeを使うことで実現します）。ウィンドウのリサイズをハンドリングするため、_accordionPanelControllerも紐付けています。これは先ほど読み込んだAccordionPanel.jsが提供しています。

次のこの sample.AppPurchaseManagerController を利用する PageController.js を作成します。このコントローラはWebアプリケーション全体に関わってきます。このようにコントローラを分割しておくことで機能の切り分けがしやすくなります。

__postInitメソッドを使って、初期化処理後のデザイン変更を行っています。また、ウィンドウをリサイズした際にDivided Boxもリフレッシュします。

先ほど、sample.AppPurchaseManagerControllerの中で sample.util.createDefaultControllerView(this); を実行しています。これはテンプレートのレンダリングになります。それらの処理を行うのは util.js になります。これは各コントローラの共通メソッドを実装しています。

テンプレートとして渡している sample-template.ejs の内容は次のようになります。idとそれを利用するコントローラ名を一致させていますが、これは上記 createDefaultControllerView がそう指定しているからです。

最後にPageControllerを実行する index.js を作成します。

これで desktop クラスに対して sample.PageController がバインドされます。

HTML側の修正

作成したJavaScriptファイルおよびCSSファイルを読み込みます。

sample.cssについては細かく説明しませんが、こちらのファイルを利用してください。

これで実装が完了し、動作するようになりました。

---

今後、機能を順番に開発していくことを踏まえてコントローラを分割しています。分割しておくことで各機能が明確に分かれ、理解するのが容易になったり、肥大化を防止できるようになります。

ここまでの実装をhifiveのサンプルページ にて公開しています。コードはGitHub上に公開していますので確認したい時に参考にしてください。次回は左側のペインにツリービューを実装します。

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