hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する（タブ & ナビゲーション）

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はタブバーとナビゲーションを組み合わせた使い方を紹介します。

利用するソフトウェア/ライブラリ

• Bower
• hifive
• Onsen UI
• jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

index.htmlの作成

次に public/index.html を作成します。タブバーを定義します。

タブバーの画面

まず最初に表示される tab1.html の画面を用意します。タブ1の中身でナビゲーションを行いますので、ここではナビゲーションだけを定義します。

そして最初に表示するのは tab1-main.html です。

JavaScriptの実装

まずメイン画面でボタンを押したら詳細画面に移動する部分を作ります。 tab1MainController を定義します。そしてナビゲーションのpushPageを使って画面遷移します。

ここでヘッダー部の文字を詳細に変えるようにイベントを設定します。コントローラのトリガーを使います。

トリガーは js/app.js 内に定義する全体のコントローラに実装します。 {rootElement} changeTitle でイベントを受け取ることができます。

なお、 Tab1Controller と Tab2Controller は別な画面に定義されています。そのため、変数が定義されているかどうかを確認する必要があります。今回は以下のような仕組みで回避しています。変数があるかどうか調べて、なければ100ms待って変数の確認をしています。

画面遷移を戻る

詳細画面に移動したら、逆に戻ってくる処理を作ります。これは tab1-detail.html に実装します。こちらでもトリガーを使っています。

ここまでの処理でタブバーとナビゲーションバーを組み合わせた処理が実現します。

---

タブバーとナビゲーションバーを組み合わせた動きはスマートフォンアプリでよくある実装だと思います。hifiveのコントローラ連携を使うことで、機能を画面毎に分けつつ、分かりやすい実装が実現します。

コードはhifiveWithOnsenUI/tabbar_navigation at master · hifivemania/hifiveWithOnsenUIにアップロードされています。実装時の参考にしてください。

13.コントローラの連携 – hifive