Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル7 シングルページアプリケーションの準備

Cordova(コルドバ)チュートリアル6 クリック後300msの遅延を抑止する
こちらの続きです。

ダイアログ表示次の遅延対策を行いました。

次のステップに進みます。
Module 7: Setting Up a Single-Page Application



Single-Page Application



シングルページアプリケーションとは、htmlは一つだけ。
JavaScriptでDOMを動的に生成し、表示を変更する手法のようです。

モバイルアプリだと

・ページのリロードが発生しないので、よりネイティブアプリに近い表示にできる

・UIの生成を動的に行うことで、実行デバイスに適したUIを選択することができる。

というメリットがある模様。


チュートリアルのアプリケーションをシングルページアプリケーションに変更してみます。



変更ポイント



1. index.htmlのbodyタグ内(スクリプトタグは除く)を削除します。

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. </head>
  7. <body>
  8. <!-- 1. body内部を削除 -->
  9. <!-- cordova.js の読み込みを追加 -->
  10. <script src="cordova.js"></script>
  11. <!-- タップ遅延を抑止 -->
  12. <script src="lib/fastclick.js"></script>
  13. <script src="lib/jquery.js"></script>
  14. <script src="js/services/memory/EmployeeService.js"></script>
  15. <script src="js/app.js"></script>
  16. </body>
  17. </html>





2. app.jsに「renderHomeView」という関数を定義。
ここでbodyタグの内部を作成します。


  1. function renderHomeView() {
  2.     var html =
  3.      "<h1>Directory</h1>" +
  4.      "<input class='search-key' type='search' placeholder='Enter name'/>" +
  5.      "<ul class='employee-list'></ul>";
  6.     $('body').html(html);
  7.     $('.search-key').on('keyup', findByName);
  8. }





3. service.initialize().doneで、上記で作成したrenderHomeViewを呼び出します。
これでbody内部を作成します。


  1. var service = new EmployeeService();
  2. service.initialize().done(function () {
  3.     renderHomeView();
  4. });





4. search-keyのkeyupイベント処理は、新たに作成したrenderHomeViewで
定義するよう変更したので削除。


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.     var service = new EmployeeService();
  5.     service.initialize().done(function () {
  6.         console.log("Service initialized");
  7.         
  8.         // 3.初期化時、bodyを作成する関数を呼び出す
  9.         renderHomeView();
  10.     });
  11.     /* --------------------------------- Event Registration -------------------------------- */
  12.     // 4. renderHomeViewでの定義に変更したので削除
  13.     //$('.search-key').on('keyup', findByName);
  14.     
  15.     /* 5. もうヘルプボタンは登場しないので削除
  16.     $('.help-btn').on('click', function() {
  17.         alert("Employee Directory v3.4");
  18.     });
  19.     */
  20.     
  21.     // windows.alertを上書きする
  22.     document.addEventListener('deviceready', function () {
  23.      if (navigator.notification) { // Override default HTML alert with native dialog
  24.          window.alert = function (message) {
  25.              navigator.notification.alert(
  26.                  message,    // message
  27.                  null,     // callback
  28.                  "Workshop", // title
  29.                  'OK'        // buttonName
  30.              );
  31.          };
  32.      }
  33.     }, false);
  34.     
  35.     // ダイアログ表示遅延対策
  36.     FastClick.attach(document.body);
  37.     /* ---------------------------------- Local Functions ---------------------------------- */
  38.     function findByName() {
  39.         service.findByName($('.search-key').val()).done(function (employees) {
  40.             var l = employees.length;
  41.             var e;
  42.             $('.employee-list').empty();
  43.             for (var i = 0; i < l; i++) {
  44.                 e = employees[i];
  45.                 $('.employee-list').append('<li><a href="#employees/' + e.id + '">' + e.firstName + ' ' + e.lastName + '</a></li>');
  46.             }
  47.         });
  48.     }
  49.     
  50.     // 2. body内部を作成する関数を定義
  51.     function renderHomeView() {
  52.         var html =
  53.          "<h1>Directory</h1>" +
  54.          "<input class='search-key' type='search' placeholder='Enter name'/>" +
  55.          "<ul class='employee-list'></ul>";
  56.         $('body').html(html);
  57.         $('.search-key').on('keyup', findByName);
  58.     }
  59. }());





ブラウザとエミュレーターで動作を確認します。
ヘルプボタンが無い以外は、変更前と同じのはずです。

562_01.png


562_02.png

関連記事

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

  1. 2015/02/22(日) 15:19:52|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル8 ハンドルバーテンプレートの使用 | ホーム | Cordova(コルドバ)チュートリアル6 クリック後300msの遅延を抑止する>>

コメント

コメントの投稿


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

トラックバック

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