Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル8 ハンドルバーテンプレートの使用

Cordova(コルドバ)チュートリアル7 シングルページアプリケーションの準備
こちらの続きです。

チュートリアルのプログラムをシングルページアプリケーションに変換しました。

次のステップに進みます。
Module 8: Using Handlebars Templates



Module 8: Using Handlebars Templates



HTMLのDOMをJavaScriptでごりごり生成するのは面倒なので、
Handlebars.js
このテンプレートエンジンを使うよことにします。

もちろん、別のテンプレートエンジンを使用してもOKです。



Step 1: Define the templates



index.htmlを修正します。

1. handlebars.jsの読み込み


  1. <script src="lib/handlebars.js"></script>





2. ratchet.cssの読み込み

Ratchet
スマホ向けのオシャレなスタイルを提供するライブラリのようです。

head部分に以下の定義を追加します。


  1. <link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
  2. <link href="assets/css/styles.css" rel="stylesheet">





3. index.htmlのbodyタグ内にホーム画面用のテンプレートの定義を記載します。


  1. <script id="home-tpl" type="text/template">
  2.     <header class="bar bar-nav">
  3.         <h1 class="title">Directory</h1>
  4.     </header>
  5.     <div class="bar bar-standard bar-header-secondary">
  6.         <input class='search-key' type="search"/>
  7.     </div>
  8.     <div class="content"></div>
  9. </script>






4. 3に続いて、社員リスト表示用のテンプレートを定義します。


  1. <script id="employee-list-tpl" type="text/template">
  2.     <ul class="table-view">
  3.         {{#each this}}
  4.         <li class="table-view-cell media">
  5.          <a href="#employees/{{ id }}">
  6.              <img class="media-object pull-left" src="assets/pics/{{pic}}">
  7.              <div class="media-body">
  8.                  {{firstName}} {{lastName}}
  9.                  <p>{{title}}</p>
  10.              </div>
  11.          </a>
  12.         </li>
  13.         {{/each}}
  14.     </ul>
  15. </script>





ここまでで、index.htmlはこのようになっているはずです。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  6.     
  7.     <!-- 2. ratchet.cssの読み込み -->
  8.     <link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
  9.     <link href="assets/css/styles.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <!-- 3. index.htmlのbodyタグ内にホーム画面用のテンプレートの定義 -->
  13. <script id="home-tpl" type="text/template">
  14.     <header class="bar bar-nav">
  15.         <h1 class="title">Directory</h1>
  16.     </header>
  17.     <div class="bar bar-standard bar-header-secondary">
  18.         <input class='search-key' type="search"/>
  19.     </div>
  20.     <div class="content"></div>
  21. </script>
  22. <!-- 4. リスト表示用のテンプレート定義 -->
  23. <script id="employee-list-tpl" type="text/template">
  24.     <ul class="table-view">
  25.         {{#each this}}
  26.         <li class="table-view-cell media">
  27.          <a href="#employees/{{ id }}">
  28.              <img class="media-object pull-left" src="assets/pics/{{pic}}">
  29.              <div class="media-body">
  30.                  {{firstName}} {{lastName}}
  31.                  <p>{{title}}</p>
  32.              </div>
  33.          </a>
  34.         </li>
  35.         {{/each}}
  36.     </ul>
  37. </script>
  38. <script src="cordova.js"></script>
  39. <script src="lib/fastclick.js"></script>
  40. <script src="lib/jquery.js"></script>
  41. <script src="js/services/memory/EmployeeService.js"></script>
  42. <!-- 1. handlebars.jsの読み込み -->
  43. <script src="lib/handlebars.js"></script>
  44. <script src="js/app.js"></script>
  45. </body>
  46. </html>










Step 2: Use the Templates



続いて、app.jsを編集していきます。


1. serviceという変数の前に、テンプレートの読み込み処理を記載します。


  1. var homeTpl = Handlebars.compile($("#home-tpl").html());
  2. var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());





2. 画面を描画する「renderHomeView」の処理をテンプレートを使用するよう変更。


  1. function renderHomeView() {
  2.     $('body').html(homeTpl());
  3.     $('.search-key').on('keyup', findByName);
  4. }





3. 社員を検索する「findByName」の処理で、結果の表示にリスト表示用のテンプレートを
使用するよう変更。


  1. function findByName() {
  2.     service.findByName($('.search-key').val()).done(function (employees) {
  3.         $('.content').html(employeeListTpl(employees));
  4.     });
  5. }





ここまでで、app.jsはこのようになっているはずです。


  1. // We use an "Immediate Function" to initialize the application to avoid leaving anything behind in the global scope
  2. (function () {
  3.     /* ---------------------------------- Local Variables ---------------------------------- */
  4.     
  5.     // 1. テンプレートの読み込み処理を記載
  6.     var homeTpl = Handlebars.compile($("#home-tpl").html());
  7.     var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());
  8.     
  9.     var service = new EmployeeService();
  10.     service.initialize().done(function () {
  11.         console.log("Service initialized");
  12.         renderHomeView();
  13.     });
  14.     /* --------------------------------- Event Registration -------------------------------- */
  15.     // windows.alertを上書きする
  16.     document.addEventListener('deviceready', function () {
  17.      if (navigator.notification) { // Override default HTML alert with native dialog
  18.          window.alert = function (message) {
  19.              navigator.notification.alert(
  20.                  message,    // message
  21.                  null,     // callback
  22.                  "Workshop", // title
  23.                  'OK'        // buttonName
  24.              );
  25.          };
  26.      }
  27.     }, false);
  28.     
  29.     // ダイアログ表示遅延対策
  30.     FastClick.attach(document.body);
  31.     /* ---------------------------------- Local Functions ---------------------------------- */
  32.     function findByName() {
  33.         service.findByName($('.search-key').val()).done(function (employees) {
  34.             // 3. 結果表示にテンプレートを使用するよう変更
  35.             $('.content').html(employeeListTpl(employees));
  36.         });
  37.     }
  38.     
  39.     // body内部を作成する関数を定義
  40.     function renderHomeView() {
  41.         // 2. 画面表示にテンプレートを使用
  42.         $('body').html(homeTpl());
  43.         
  44.         $('.search-key').on('keyup', findByName);
  45.     }
  46. }());





4. アプリケーションのテスト

ブラウザでの表示

563_01.png


エミュレーターでの表示

563_02.png


かっこいい。





Step 3: Fixing the Status Bar Issue on iOS7



iOS7だと、ステータスバーがアプリケーションの表示とかぶるようです。
対策するために、プラグインを追加します。


1. ステータスバープラグインの追加


$ cordova plugins add org.apache.cordova.statusbar




2. app.jsのdevicereadyイベントに追加


  1. StatusBar.overlaysWebView( false );
  2. StatusBar.backgroundColorByHexString('#ffffff');
  3. StatusBar.styleDefault();





3. iOSエミュレーターでのテスト

持ってないので結果はわかりません。。。


最終的に、app.jsはこのようになりました。


  1. // We use an "Immediate Function" to initialize the application to avoid leaving anything behind in the global scope
  2. (function () {
  3.     /* ---------------------------------- Local Variables ---------------------------------- */
  4.     
  5.     var homeTpl = Handlebars.compile($("#home-tpl").html());
  6.     var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());
  7.     
  8.     var service = new EmployeeService();
  9.     service.initialize().done(function () {
  10.         console.log("Service initialized");
  11.         renderHomeView();
  12.     });
  13.     /* --------------------------------- Event Registration -------------------------------- */
  14.     // windows.alertを上書きする
  15.     document.addEventListener('deviceready', function () {
  16.      if (navigator.notification) { // Override default HTML alert with native dialog
  17.          window.alert = function (message) {
  18.              navigator.notification.alert(
  19.                  message,    // message
  20.                  null,     // callback
  21.                  "Workshop", // title
  22.                  'OK'        // buttonName
  23.              );
  24.          };
  25.      }
  26.     
  27.      // 2. iOS 7 ステータスバー対応
  28.      StatusBar.overlaysWebView( false );
  29.      StatusBar.backgroundColorByHexString('#ffffff');
  30.      StatusBar.styleDefault();
  31.     
  32.     }, false);
  33.     
  34.     // ダイアログ表示遅延対策
  35.     FastClick.attach(document.body);
  36.     /* ---------------------------------- Local Functions ---------------------------------- */
  37.     function findByName() {
  38.         service.findByName($('.search-key').val()).done(function (employees) {
  39.             $('.content').html(employeeListTpl(employees));
  40.         });
  41.     }
  42.     
  43.     // body内部を作成する関数を定義
  44.     function renderHomeView() {
  45.         $('body').html(homeTpl());
  46.         $('.search-key').on('keyup', findByName);
  47.     }
  48. }());





だいぶアプリケーションらしくなってきましたね。



関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/02/22(日) 17:07:21|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル9 ビューの作成 | ホーム | Cordova(コルドバ)チュートリアル7 シングルページアプリケーションの準備>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1646-29d47af2
この記事にトラックバックする(FC2ブログユーザー)