Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル5 端末標準の通知(Notification)を表示する

Cordova(コルドバ)チュートリアル4 データの取得方法あれこれ
こちらの続きです。

チュートリアル用のサンプルプログラムを配置し、データの取得・保存方法について学びました。


次のステップに進みます。
Module 5: Using Native Notification



ネイティブな通知



JavaScriptのalertを使用して、確認ダイアログを表示することができますが、
せっかくなのでOSデフォルトのものを使用したいのが人情です。


まず、ダイアログ表示用のプラグインを追加します。


$ cordova plugin add org.apache.cordova.dialogs




実際に実行した時はこんな表示になりました。


$ cordova plugin add org.apache.cordova.dialogs
Fetching plugin "org.apache.cordova.dialogs" via plugin registry
Installing "org.apache.cordova.dialogs" for android




index.htmlを編集し、「cordova.js」を読み込むようにします。
このcordova.jsはビルド時に生成されるようで、ファイルの実体は必要ないようです。


  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. <p><button class="help-btn">Help</button></p>
  9. <div class='header'><h1>Directory</h1></div>
  10. <div class='search-view'>
  11.     <input class='search-key' type="search" placeholder="Enter name"/>
  12.     <ul class='list employee-list'></ul>
  13. </div>
  14. <!-- cordova.js の読み込みを追加 -->
  15. <script src="cordova.js"></script>
  16. <script src="lib/jquery.js"></script>
  17. <script src="js/services/json/EmployeeService.js"></script>
  18. <script src="js/app.js"></script>
  19. </body>
  20. </html>





js/app.jsを編集。
ダイアログプラグインによりnavigator.notificationが使用できれば、
標準のwindow.alertを上書きします。

以下の内容をEvent Registrationブロックに追記します。


  1. document.addEventListener('deviceready', function () {
  2. if (navigator.notification) { // Override default HTML alert with native dialog
  3.      window.alert = function (message) {
  4.          navigator.notification.alert(
  5.              message,    // message
  6.              null,     // callback
  7.              "Workshop", // title
  8.              'OK'        // buttonName
  9.          );
  10.      };
  11. }
  12. }, false);





コード全体はこうなりました。


  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.     /* --------------------------------- Event Registration -------------------------------- */
  9.     $('.search-key').on('keyup', findByName);
  10.     $('.help-btn').on('click', function() {
  11.         alert("Employee Directory v3.4");
  12.     });
  13.     
  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.     }, false);
  27.     /* ---------------------------------- Local Functions ---------------------------------- */
  28.     function findByName() {
  29.         service.findByName($('.search-key').val()).done(function (employees) {
  30.             var l = employees.length;
  31.             var e;
  32.             $('.employee-list').empty();
  33.             for (var i = 0; i < l; i++) {
  34.                 e = employees[i];
  35.                 $('.employee-list').append('<li><a href="#employees/' + e.id + '">' + e.firstName + ' ' + e.lastName + '</a></li>');
  36.             }
  37.         });
  38.     }
  39. }());





ブラウザでの実行

561_01.png


ソース変更前にエミュレーターで実行

561_02.png


ソース変更後にエミュレーターで実行

561_03.png


ちゃんとOSネイティブの通知になってくれました。

関連記事

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

  1. 2015/02/22(日) 14:55:42|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル6 クリック後300msの遅延を抑止する | ホーム | Cordova(コルドバ)チュートリアル4 データの取得方法あれこれ>>

コメント

コメントの投稿


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

トラックバック

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