業務アプリデモ開発をベースにhifiveを学ぼう（2）「Devided Boxの実装」
では今回から業務アプリケーションを実際に作っていきたいと思います。まず最初にDevided Boxを実装します。これは画面を枠線で分割し、かつそれをマウスでドラッグして担当者の好きな画面構成に変更できる機能です。
実際に動かすと次のようになります。
要点としては幾つかあり、
- 黒い枠線をドラッグして画面構成がダイナミックに変更できる
- 3ペインのいずれも右上にあるアイコンをクリックして折りたためる
- ウィンドウをリサイズした時にペインの構成も追従する
これらの機能をhifiveの一機能であるDividedBoxを使いつつ、実装していきたいと思います。
実行環境について
実際に動かす際にはWebサーバが必要になります。環境の構築方法については拙作のITpro Report – 手軽にHTML5/JavaScript開発を始めるための環境構築法：ITproを参考にしてください。
HTMLについて
まずHTMLですが、hifive/jQuery/Bootstrapを読み込みます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv="pragma" content="no-cache" /> | |
| <meta http-equiv="cache-control" content="no-cache" /> | |
| <meta name="viewport" content="width=device-width"> | |
| <!– IE8以下なら1系、それ以外なら2系のjQueryを使用する –> | |
| <!–[if lt IE 9]> | |
| <script src="lib/jquery/jquery-1.11.1.js"></script> | |
| <![endif]–> | |
| <!–[if gte IE 9]><!–> | |
| <script src="lib/jquery/jquery-2.1.1.js"></script> | |
| <!–<![endif]–> | |
| <link rel="stylesheet" href="lib/bootstrap/3.3.2/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="lib/hifive/h5.css" /> | |
| <script src="lib/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
| <script src="lib/hifive/ejs-h5mod.js"></script> | |
| <script src="lib/hifive/h5.dev.js"></script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
さらにペインの折りたたみやドラッグでの移動を可能にするライブラリである AccordionPanel および DividedBox を読み込みます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="stylesheet" href="lib/hifive/ui/DividedBox.css"> | |
| <link rel="stylesheet" href="lib/hifive/ui/AccordionPanel.css"> | |
| <script src="lib/hifive/ui/DividedBox.js"></script> | |
| <script src="lib/hifive/ui/AccordionPanel.js"></script> |
bodyタグの内容について
Bodyタグ内ですが、次のようになります。appRootクラス以下にアプリケーションを展開してきます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="desktop dividedBox vertical"> | |
| <div class="header fixedSize"></div> | |
| <div class="appRoot autoSize"></div> | |
| </div> |
JavaScriptの実装
まず js/AppPurchaseManagerController.js というファイルを作成します。これはWebアプリケーション以外のウィンドウなどを管理します。例えばビューの作成およびウィンドウをリサイズした時のイベントハンドリングを行います。そして、 __nameで指定されている sample.AppPurchaseManagerController という変数名でグローバルにアクセスできるようにしています（h5.core.exposeを使うことで実現します）。ウィンドウのリサイズをハンドリングするため、_accordionPanelControllerも紐付けています。これは先ほど読み込んだAccordionPanel.jsが提供しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var controller = { | |
| __name: 'sample.AppPurchaseManagerController', | |
| _accordionPanelController: h5.ui.container.AccordionPanelController, | |
| __init: function() { | |
| // ビューを作成 | |
| sample.util.createDefaultControllerView(this); | |
| }, | |
| '{window} resize': function() { | |
| this._accordionPanelController.refresh(); | |
| }, | |
| '{rootElement} boxSizeChange': function(ctx) { | |
| } | |
| }; | |
| // コントローラを外部公開 | |
| h5.core.expose(controller); | |
| })(); |
次のこの sample.AppPurchaseManagerController を利用する PageController.js を作成します。このコントローラはWebアプリケーション全体に関わってきます。このようにコントローラを分割しておくことで機能の切り分けがしやすくなります。
__postInitメソッドを使って、初期化処理後のデザイン変更を行っています。また、ウィンドウをリサイズした際にDivided Boxもリフレッシュします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| var pageController = { | |
| __name: 'sample.PageController', | |
| __templates: 'template/sample-template.ejs', | |
| _dividedBoxController: h5.ui.container.DividedBox, | |
| _appPurchaseManagerController: sample.AppPurchaseManagerController, | |
| appRootDividedBox: h5.ui.container.DividedBox, | |
| __meta: { | |
| _appPurchaseManagerController: { | |
| rootElement: '.appRoot' | |
| } | |
| }, | |
| __postInit: function() { | |
| // ヘッダ直後のdividerは非表示 | |
| this._dividedBoxController.hideDivider(0); | |
| }, | |
| '{window} resize': function() { | |
| this._dividedBoxController.refresh(); | |
| } | |
| }; | |
| h5.core.expose(pageController); | |
| })(jQuery); |
先ほど、sample.AppPurchaseManagerControllerの中で sample.util.createDefaultControllerView(this); を実行しています。これはテンプレートのレンダリングになります。それらの処理を行うのは util.js になります。これは各コントローラの共通メソッドを実装しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| h5.u.obj.expose('sample.util', { | |
| createDefaultControllerView: function(ctrl, param) { | |
| ctrl.view.update(ctrl.rootElement, ctrl.__name, param); | |
| }, | |
| }); | |
| })(); |
テンプレートとして渡している sample-template.ejs の内容は次のようになります。idとそれを利用するコントローラ名を一致させていますが、これは上記 createDefaultControllerView がそう指定しているからです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/ejs" id="sample.AppPurchaseManagerController"> | |
| <div class="dividedBox horizontal fill fullHeight"> | |
| <div class="box panelBox fill" data-default-state="normal" | |
| data-box-name="ショートカット"> | |
| <div class="contentWrapper"> | |
| <div class="shortcut fullHeight"></div> | |
| </div> | |
| </div> | |
| <div class="dividedBox vertical full fullHeight"> | |
| <div class="box panelBox fill autoSize" data-default-state="normal" | |
| data-box-name="一覧"> | |
| <div class="gridViewer fullHeight"></div> | |
| </div> | |
| <div class="box panelBox fill autoSize" data-default-state="normal" | |
| data-box-name="詳細"> | |
| <div class="detail fullHeight"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </script> |
最後にPageControllerを実行する index.js を作成します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| $(function() { | |
| h5.core.controller('.desktop', sample.PageController); | |
| }); | |
| })(jQuery); |
これで desktop クラスに対して sample.PageController がバインドされます。
HTML側の修正
作成したJavaScriptファイルおよびCSSファイルを読み込みます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="css/sample.css" rel="stylesheet" /> | |
| <script src="js/util.js"></script> | |
| <script src="js/AppPurchaseManagerController.js" /></script> | |
| <script src="js/PageController.js" /></script> | |
| <script src="js/index.js"></script> |
sample.cssについては細かく説明しませんが、こちらのファイルを利用してください。
これで実装が完了し、動作するようになりました。
今後、機能を順番に開発していくことを踏まえてコントローラを分割しています。分割しておくことで各機能が明確に分かれ、理解するのが容易になったり、肥大化を防止できるようになります。
ここまでの実装をhifiveのサンプルページ にて公開しています。コードはGitHub上に公開していますので確認したい時に参考にしてください。次回は左側のペインにツリービューを実装します。
hifive – HTML5企業Webシステムのための開発プラットフォーム
hifive開発者ブログ 
コメントは受け付けていません。