1

cordovaとonsenUIを使ってをangularJSベースでスマホアプリを開発しています。

今回よくあるandroidアプリのように、androidの場合はバックボタンを一回押すと、ダイアログがでてそのダイアログが出ている間に、もう一度バックボタンを押すとアプリが終了するようなものを作りたいと思っています。

以下のようにonsenUIのドキュメント通りに、バックボタンのハンドラー制御は出来て、ダイアログの表示と、自動で消えるまでは出来ました。

HTML

<ons-template id="exit.html">
  <ons-dialog cancelable>
    <p translate="MSG.EXIT"></p>
  </ons-dialog>
</ons-template>

JS

ons.ready(function () {
  ons.setDefaultDeviceBackButtonListener(function () {
    ons.createDialog('exit.html')
        .then(function(dialog) {
            dialog.show();
            var stop;
            stop = $timeout(function() {
                dialog.hide();
            }, 2000);
        });  
  });                      
});

しかし、ダイアログのバックボタンは以下のような形で制御可能だとドキュメントには書いてありますが、上記のような仕組みと組み合わせる方法がわかりません。幾つか考えられるコードを書いてみたのですが、思いついたコードではダイアログ表示時のバックボタンの制御ができませんでした。

dialog.getDeviceBackButtonHandler().setListener(function (event) {
    navigator.app.exitApp();
});

以上、上記のような終了機能は可能でしょうか? 可能であればその方法をご教授願えれば幸いです。

よろしくお願いいたします。

1 件の回答 1

1

動作確認しておりませんが、以下のようにしてみたらダメでしょうか。

ons.ready(function () {

  // ダイアログの状態を表すフラグを作成
  var showQuitDialog = false;

  ons.setDefaultDeviceBackButtonListener(function () {

    // ダイアログが既に表示されていればアプリを終了し
    // 表示されていなければ終了確認のダイアログを表示します。
    if(showQuitDialog){ navigator.app.exitApp(); }
    else {

      // 終了確認ダイアログを作成
      ons.createDialog('exit.html').then(function(dialog) {
        dialog.show();
        showQuitDialog = true;  // フラグを立てる

        // 2秒間操作がなければダイアログを閉じる
        var stop = $timeout(function() {
          dialog.hide();
          showQuitDialog = false;  // フラグを折る
        }, 2000);
      });  
    }
  });                      
});
6
  • ご回答ありがとうございます。 提示していただいた方法もやってみましたが、バックボタンで表示させたダイアログの表示時には、このイベントそのものが発火されていないようで動きませんでした。
    – worker
    Commented 2015年4月25日 2:05
  • ブラウザでalertを利用した時と同じように、ダイアログが表示されている間はスクリプトがまったく走らないということでしょうか?
    – tutinoco
    Commented 2015年4月25日 4:59
  • はい、ダイアログが表示されている間に、バックボタンをおしても「ons.setDefaultDeviceBackButtonListener」のコードは動きませんでした。(カウンターを仕込んで、バックボタンを押した回数を画面表示させて試しましたが、ダイアログ表示時はカウントが回りませんでした。) というわけで、ダイアログの表示時は、ダイアログのためのバックボタン制御が必要と思い、最初に書いた「dialog.getDeviceBackButtonHandler().setListener」を設置してみましたが、これも反応がなくスクリプトが動きませんでした。
    – worker
    Commented 2015年4月27日 3:19
  • onsenUIのものでなくcordovaで定義されているダイアログを使用して下さい。恐らく動きます。
    – tutinoco
    Commented 2015年4月27日 7:03
  • ありがとうございます。 やってみます。
    – worker
    Commented 2015年4月27日 12:46

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。