Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル10 ビューの制御

Cordova(コルドバ)チュートリアル9 ビューの作成
こちらの続きです。

ビューをjsファイルに切り出しました。

次のステップに進みます。
Module 10: Implementing View Routing



Module 10: Implementing View Routing



このセクションでは、従業員の詳細ビューを追加します。
これでアプリケーションは複数のビューを持つことになりました。
ビュー切り替えの方法について解説します。



Step 1: Create the employee template



index.htmlのbodyに、社員の詳細情報表示用の画面を定義します。


  1. <script id="employee-tpl" type="text/template">
  2.      <header class="bar bar-nav">
  3.          <a class="btn btn-link btn-nav pull-left" href="#">
  4.              <span class="icon icon-left-nav"></span>
  5.          </a>
  6.          <h1 class="title">Employee</h1>
  7.      </header>
  8.      <div class="content">
  9.          <div class="card">
  10.              <ul class="table-view">
  11.                  <li class="table-view-cell media">
  12.                      <img class="media-object pull-left emp-pic" src="assets/pics/{{pic}}">
  13.                      <div class="media-body">
  14.                          {{ firstName }} {{ lastName }}
  15.                          <p>{{ title }}</p>
  16.                      </div>
  17.                  </li>
  18.                  <li class="table-view-cell media">
  19.                      <a href="tel:{{ officePhone }}" class="push-right">
  20.                          <span class="media-object pull-left icon icon-call"></span>
  21.                          <div class="media-body">
  22.                              Call Office
  23.                              <p>{{ officePhone }}</p>
  24.                          </div>
  25.                      </a>
  26.                  </li>
  27.                  <li class="table-view-cell media">
  28.                      <a href="tel:{{ cellPhone }}" class="push-right">
  29.                          <span class="media-object pull-left icon icon-call"></span>
  30.                          <div class="media-body">
  31.                              Call Cell
  32.                              <p>{{ cellPhone }}</p>
  33.                          </div>
  34.                      </a>
  35.                  </li>
  36.                  <li class="table-view-cell media">
  37.                      <a href="sms:{{ cellPhone }}" class="push-right">
  38.                          <span class="media-object pull-left icon icon-sms"></span>
  39.                          <div class="media-body">
  40.                              SMS
  41.                              <p>{{ cellPhone }}</p>
  42.                          </div>
  43.                      </a>
  44.                  </li>
  45.                  <li class="table-view-cell media">
  46.                      <a href="mailto:{{ email }}" class="push-right">
  47.                          <span class="media-object pull-left icon icon-mail"></span>
  48.                          <div class="media-body">
  49.                              Email
  50.                              <p>{{ email }}</p>
  51.                          </div>
  52.                      </a>
  53.                  </li>
  54.              </ul>
  55.          </div>
  56.      </div>
  57. </script>








Step 2: Create the EmployeeView class



1. jsフォルダに「EmployeeView.js」を作成。
内容は以下のとおりです。


  1. var EmployeeView = function(employee) {
  2. this.initialize = function() {
  3.      this.$el = $('<div/>');
  4. };
  5. this.render = function() {
  6.      this.$el.html(this.template(employee));
  7.      return this;
  8. };
  9. this.initialize();
  10. }





2. index.htmlに、作成したEmployeeView.jsを読み込む処理を追加します。
※app.jsのロード前に定義すること


  1. <script src="js/EmployeeView.js"></script>







Step 3: Implement View Routing



1. index.htmlに画面遷移を制御するライブラリ「router.js」を読み込む処理を記載します。
※jquery.jsの後に定義すること


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





2. app.jsに作成した従業員詳細テンプレートを読み込む処理を追加します。


  1. EmployeeView.prototype.template = Handlebars.compile($("#employee-tpl").html());






3. アプリケーション初期化時にルーティング内容を定義します。


  1. service.initialize().done(function () {
  2. router.addRoute('', function() {
  3.      $('body').html(new HomeView(service).render().$el);
  4. });
  5. router.addRoute('employees/:id', function(id) {
  6.      service.findById(parseInt(id)).done(function(employee) {
  7.          $('body').html(new EmployeeView(employee).render().$el);
  8.      });
  9. });
  10. router.start();
  11. });






ここまでで、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.     <link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
  8.     <link href="assets/css/styles.css" rel="stylesheet">
  9. </head>
  10. <body>
  11. <script id="home-tpl" type="text/template">
  12.     <header class="bar bar-nav">
  13.         <h1 class="title">Directory</h1>
  14.     </header>
  15.     <div class="bar bar-standard bar-header-secondary">
  16.         <input class='search-key' type="search"/>
  17.     </div>
  18.     <div class="content"></div>
  19. </script>
  20. <script id="employee-list-tpl" type="text/template">
  21.     <ul class="table-view">
  22.         {{#each this}}
  23.         <li class="table-view-cell media">
  24.          <a href="#employees/{{ id }}">
  25.              <img class="media-object pull-left" src="assets/pics/{{pic}}">
  26.              <div class="media-body">
  27.                  {{firstName}} {{lastName}}
  28.                  <p>{{title}}</p>
  29.              </div>
  30.          </a>
  31.         </li>
  32.         {{/each}}
  33.     </ul>
  34. </script>
  35. <!-- 社員詳細表示 -->
  36. <script id="employee-tpl" type="text/template">
  37. <header class="bar bar-nav">
  38.      <a class="btn btn-link btn-nav pull-left" href="#">
  39.          <span class="icon icon-left-nav"></span>
  40.      </a>
  41.      <h1 class="title">Employee</h1>
  42. </header>
  43. <div class="content">
  44.      <div class="card">
  45.          <ul class="table-view">
  46.              <li class="table-view-cell media">
  47.                  <img class="media-object pull-left emp-pic" src="assets/pics/{{pic}}">
  48.                  <div class="media-body">
  49.                      {{ firstName }} {{ lastName }}
  50.                      <p>{{ title }}</p>
  51.                  </div>
  52.              </li>
  53.              <li class="table-view-cell media">
  54.                  <a href="tel:{{ officePhone }}" class="push-right">
  55.                      <span class="media-object pull-left icon icon-call"></span>
  56.                      <div class="media-body">
  57.                          Call Office
  58.                          <p>{{ officePhone }}</p>
  59.                      </div>
  60.                  </a>
  61.              </li>
  62.              <li class="table-view-cell media">
  63.                  <a href="tel:{{ cellPhone }}" class="push-right">
  64.                      <span class="media-object pull-left icon icon-call"></span>
  65.                      <div class="media-body">
  66.                          Call Cell
  67.                          <p>{{ cellPhone }}</p>
  68.                      </div>
  69.                  </a>
  70.              </li>
  71.              <li class="table-view-cell media">
  72.                  <a href="sms:{{ cellPhone }}" class="push-right">
  73.                      <span class="media-object pull-left icon icon-sms"></span>
  74.                      <div class="media-body">
  75.                          SMS
  76.                          <p>{{ cellPhone }}</p>
  77.                      </div>
  78.                  </a>
  79.              </li>
  80.              <li class="table-view-cell media">
  81.                  <a href="mailto:{{ email }}" class="push-right">
  82.                      <span class="media-object pull-left icon icon-mail"></span>
  83.                      <div class="media-body">
  84.                          Email
  85.                          <p>{{ email }}</p>
  86.                      </div>
  87.                  </a>
  88.              </li>
  89.          </ul>
  90.      </div>
  91. </div>
  92. </script>
  93. <script src="cordova.js"></script>
  94. <script src="lib/fastclick.js"></script>
  95. <script src="lib/jquery.js"></script>
  96. <!-- routerの読み込み -->
  97. <script src="lib/router.js"></script>
  98. <script src="js/services/memory/EmployeeService.js"></script>
  99. <script src="lib/handlebars.js"></script>
  100. <!-- 1. 作成したビューの読み込み -->
  101. <script src="js/EmployeeListView.js"></script>
  102. <script src="js/HomeView.js"></script>
  103. <script src="js/EmployeeView.js"></script>
  104. <script src="js/app.js"></script>
  105. </body>
  106. </html>





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.     HomeView.prototype.template = Handlebars.compile($("#home-tpl").html());
  6.     EmployeeListView.prototype.template =
  7.                 Handlebars.compile($("#employee-list-tpl").html());
  8.     
  9.     // 2. 社員詳細テンプレートの解析
  10.     EmployeeView.prototype.template = Handlebars.compile($("#employee-tpl").html());
  11.     
  12.     var service = new EmployeeService();
  13.     service.initialize().done(function () {
  14.         console.log("Service initialized");
  15.         // 3. router.jsを使用するよう変更
  16.         //$('body').html(new HomeView(service).render().$el);
  17.         router.addRoute('', function() {
  18.          $('body').html(new HomeView(service).render().$el);
  19.         });
  20.         router.addRoute('employees/:id', function(id) {
  21.          service.findById(parseInt(id)).done(function(employee) {
  22.              $('body').html(new EmployeeView(employee).render().$el);
  23.          });
  24.         });
  25.         router.start();
  26.         
  27.     });
  28.     /* --------------------------------- Event Registration -------------------------------- */
  29.     // windows.alertを上書きする
  30.     document.addEventListener('deviceready', function () {
  31.      if (navigator.notification) { // Override default HTML alert with native dialog
  32.          window.alert = function (message) {
  33.              navigator.notification.alert(
  34.                  message,    // message
  35.                  null,     // callback
  36.                  "Workshop", // title
  37.                  'OK'        // buttonName
  38.              );
  39.          };
  40.      }
  41.     
  42.      // iOS 7 ステータスバー対応
  43.      StatusBar.overlaysWebView( false );
  44.      StatusBar.backgroundColorByHexString('#ffffff');
  45.      StatusBar.styleDefault();
  46.     
  47.     }, false);
  48.     
  49.     // ダイアログ表示遅延対策
  50.     FastClick.attach(document.body);
  51.     /* ---------------------------------- Local Functions ---------------------------------- */
  52. }());




エミュレーターでの動作はこんなかんじです。


[広告 ] VPS



画面の切り替え、どうやって実現しているんだろう?と思ったのですが、
社員名にちゃんとアンカータグがありますね。


  1. <a href="#employees/{{ id }}">



ページ内遷移の機能をうまく利用して、画面の切り替えを行うようです。

関連記事

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

  1. 2015/02/22(日) 18:27:41|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル11 ハードウェアアクセラレーションの利用 | ホーム | Cordova(コルドバ)チュートリアル9 ビューの作成>>

コメント

コメントの投稿


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

トラックバック

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