Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル11 ハードウェアアクセラレーションの利用

Cordova(コルドバ)チュートリアル10 ビューの制御
こちらの続きです。

複数のビューを持つアプリケーションの作り方を学びました。

次のステップに進みます。
Module 11: Using Hardware Acceleration



Module 11: Using Hardware Acceleration



ユーザーが一覧と詳細ビューを移動するとき、いきなり画面が切り替わります。
これをいい感じでスライドしながら画面を切り替えたい。




1. index.htmlにpageslider.cssを読み込む定義を追加します。


  1. <link href="assets/css/pageslider.css" rel="stylesheet">






2. index.htmlにpageslider.jsを読み込む定義を追加します。
jquery.jsの後に追加すること
※pagesliderについての詳細はこちら


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






続いて、app.jsに変更を加えます。

1. sliderオブジェクトの定義を追加


  1. var slider = new PageSlider($('body'));






2. sliderを使用して画面を切り替えるようルーティング部分を修正します。


  1. slider.slidePage(new HomeView(service).render().$el);



もう一箇所


  1. slider.slidePage(new EmployeeView(employee).render().$el);






最終的に、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.     
  10.     <!-- 1. slider用スタイルシート追加 -->
  11.     <link href="assets/css/pageslider.css" rel="stylesheet">
  12. </head>
  13. <body>
  14. <script id="home-tpl" type="text/template">
  15.     <header class="bar bar-nav">
  16.         <h1 class="title">Directory</h1>
  17.     </header>
  18.     <div class="bar bar-standard bar-header-secondary">
  19.         <input class='search-key' type="search"/>
  20.     </div>
  21.     <div class="content"></div>
  22. </script>
  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. <!-- 社員詳細表示 -->
  39. <script id="employee-tpl" type="text/template">
  40. <header class="bar bar-nav">
  41.      <a class="btn btn-link btn-nav pull-left" href="#">
  42.          <span class="icon icon-left-nav"></span>
  43.      </a>
  44.      <h1 class="title">Employee</h1>
  45. </header>
  46. <div class="content">
  47.      <div class="card">
  48.          <ul class="table-view">
  49.              <li class="table-view-cell media">
  50.                  <img class="media-object pull-left emp-pic" src="assets/pics/{{pic}}">
  51.                  <div class="media-body">
  52.                      {{ firstName }} {{ lastName }}
  53.                      <p>{{ title }}</p>
  54.                  </div>
  55.              </li>
  56.              <li class="table-view-cell media">
  57.                  <a href="tel:{{ officePhone }}" class="push-right">
  58.                      <span class="media-object pull-left icon icon-call"></span>
  59.                      <div class="media-body">
  60.                          Call Office
  61.                          <p>{{ officePhone }}</p>
  62.                      </div>
  63.                  </a>
  64.              </li>
  65.              <li class="table-view-cell media">
  66.                  <a href="tel:{{ cellPhone }}" class="push-right">
  67.                      <span class="media-object pull-left icon icon-call"></span>
  68.                      <div class="media-body">
  69.                          Call Cell
  70.                          <p>{{ cellPhone }}</p>
  71.                      </div>
  72.                  </a>
  73.              </li>
  74.              <li class="table-view-cell media">
  75.                  <a href="sms:{{ cellPhone }}" class="push-right">
  76.                      <span class="media-object pull-left icon icon-sms"></span>
  77.                      <div class="media-body">
  78.                          SMS
  79.                          <p>{{ cellPhone }}</p>
  80.                      </div>
  81.                  </a>
  82.              </li>
  83.              <li class="table-view-cell media">
  84.                  <a href="mailto:{{ email }}" class="push-right">
  85.                      <span class="media-object pull-left icon icon-mail"></span>
  86.                      <div class="media-body">
  87.                          Email
  88.                          <p>{{ email }}</p>
  89.                      </div>
  90.                  </a>
  91.              </li>
  92.          </ul>
  93.      </div>
  94. </div>
  95. </script>
  96. <script src="cordova.js"></script>
  97. <script src="lib/fastclick.js"></script>
  98. <script src="lib/jquery.js"></script>
  99. <script src="lib/router.js"></script>
  100. <!-- 2. pagesliderの読み込み -->
  101. <script src="lib/pageslider.js"></script>
  102. <script src="js/services/memory/EmployeeService.js"></script>
  103. <script src="lib/handlebars.js"></script>
  104. <script src="js/EmployeeListView.js"></script>
  105. <script src="js/HomeView.js"></script>
  106. <script src="js/EmployeeView.js"></script>
  107. <script src="js/app.js"></script>
  108. </body>
  109. </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.     EmployeeView.prototype.template = Handlebars.compile($("#employee-tpl").html());
  9.     
  10.     // 1. sliderオブジェクトの定義を追加
  11.     var slider = new PageSlider($('body'));
  12.     
  13.     var service = new EmployeeService();
  14.     service.initialize().done(function () {
  15.         console.log("Service initialized");
  16.         router.addRoute('', function() {
  17.          // 2. 画面の表示方法を変更
  18.          // $('body').html(new HomeView(service).render().$el);
  19.          slider.slidePage(new HomeView(service).render().$el);
  20.         });
  21.         router.addRoute('employees/:id', function(id) {
  22.          service.findById(parseInt(id)).done(function(employee) {
  23.              // $('body').html(new EmployeeView(employee).render().$el);
  24.              slider.slidePage(new EmployeeView(employee).render().$el);
  25.          });
  26.         });
  27.         router.start();
  28.         
  29.     });
  30.     /* --------------------------------- Event Registration -------------------------------- */
  31.     // windows.alertを上書きする
  32.     document.addEventListener('deviceready', function () {
  33.      if (navigator.notification) { // Override default HTML alert with native dialog
  34.          window.alert = function (message) {
  35.              navigator.notification.alert(
  36.                  message,    // message
  37.                  null,     // callback
  38.                  "Workshop", // title
  39.                  'OK'        // buttonName
  40.              );
  41.          };
  42.      }
  43.     
  44.      // iOS 7 ステータスバー対応
  45.      StatusBar.overlaysWebView( false );
  46.      StatusBar.backgroundColorByHexString('#ffffff');
  47.      StatusBar.styleDefault();
  48.     
  49.     }, false);
  50.     
  51.     // ダイアログ表示遅延対策
  52.     FastClick.attach(document.body);
  53.     /* ---------------------------------- Local Functions ---------------------------------- */
  54. }());




エミュレーターでの動作の様子です。


[広告 ] VPS


めっちゃそれっぽい。
関連記事

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

  1. 2015/02/22(日) 18:33:42|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル12 ロケーションAPIの利用 | ホーム | Cordova(コルドバ)チュートリアル10 ビューの制御>>

コメント

コメントの投稿


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

トラックバック

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