Andorid Studioを使ったAndoridアプリの作り方

4．実践（ソースコードの編集）

4.5　ダイアログの表示

  1. こちらを参考にダイアログのプラグインを導入する。
  2. ダイアログを表示するコードを記述。　※ここでは notification.alert（メッセージダイアログ）と notification.confirm（確認用ダイアログ）で戻るボタンを押した時の動作を解説。

    ダイアログの種類（メソッド）
    notification.alert - メッセージダイアログを表示する
    notification.confirm - 確認用ダイアログを表示する
    notification.beep - ビープ音を鳴らす
    notification.vibrate - 端末を振動させる

    biorhythm\www の index.html（他にもページがある場合は全て）を開き、javascriptを（ここでは main.js（cordovaをインストールした時に自動で作成されるindex.jsでも可））を読み込むコードを記述。　※cordova.js はCordovaの機能にjavascriptからアクセスする為に必要。
    オプションメニューの作成 
    <script src="cordova.js"></script>
<script src="js/main.js"></script>
      ＜notification.alert（メッセージダイアログ）＞
    1. biorhythm\www の index.html（他にもページがある場合は全て）を開き、メッセージダイアログを表示するコードを記述。　※ここでは下固定フッターに画像ボタンを配置
      ダイアログの表示
      <footer id="footer">
  <ul>
    <li><input type="image" onClick="showAlertDialog()" src="img/info.png" width="40" height="40">
  </ul>
</footer>

    2. biorhythm\www\js の main.js を開き、上記ボタンを押した時の動作を記述。
      function alertDismissed() {
    // 処理
}

function showAlertDialog() {
    navigator.notification.alert(　 //カスタマイズ可能なメッセージダイアログボックスを表示
        "メッセージ", // メッセージ
        alertDismissed, // コールバック
		"タイトル", // タイトル
        "閉じる" // ボタン名
		);
}

      上記ボタンを押した時のダイアログ。
      ダイアログの表示
      ＜notification.confirm（確認用ダイアログ）＞
    1. biorhythm\www\js の main.js を開き、「戻る」ボタンを押した時の動作を記述。
      ダイアログの表示 
      document.addEventListener("backbutton", onBackClickEvent, false); //戻るボタンを押したときに発生
function confirmCallback(id) {
    if (1 == id) { //終了のボタンが押されたら
        navigator.app.exitApp(); //アプリ終了
    }
}

function onBackClickEvent() {
        navigator.notification.confirm( //カスタマイズ可能な確認用ダイアログボックスを表示
            "アプリケーションを終了しますか？", // メッセージ
            confirmCallback, // コールバックは、押されたボタンのインデックスで呼び出す
            "終了メニュー", // タイトル
            "終了,キャンセル" // ボタンの表示名
        )
}

//トップページかどうかを設定する場合
/*function onBackClickEvent() {
    if (location.href == "file:///android_asset/www/index.html") { //トップページなら
        navigator.notification.confirm( //カスタマイズ可能な確認用ダイアログボックスを表示
            "アプリケーションを終了しますか？", // メッセージ
            confirmCallback, // コールバックは、押されたボタンのインデックスで呼び出す
            "終了メニュー", // タイトル
            "終了,キャンセル" // ボタンの表示名
        )
    } else {
        history.back(); //一つ前のページへ戻る
    }
}*/

      戻るボタンを押した時のダイアログ。　※トップページかどうかを設定した場合はそれ以外のページではひとつ前のページに戻る。
      ダイアログの表示
  3. ダイアログのカスタマイズ
    ダイアログのテーマ変更、タイトル削除、テキストサイズ変更などの設定は biorhythm\platforms\android\src\org\apache\cordova\dialogs の Notification.java を開き、カスタマイズ可能な確認用ダイアログボックス（notification.confirm）を変更したい場合は public synchronized void confirm の部分を以下のコードを参考に変更する。
    ダイアログの表示
    public synchronized void confirm(final String message, final String title, final JSONArray buttonLabels, final CallbackContext callbackContext) {
    final CordovaInterface cordova = this.cordova;

    Runnable runnable = new Runnable() {
        public void run() {
            AlertDialog.Builder dlg = new AlertDialog.Builder(cordova.getActivity(), AlertDialog.THEME_DEVICE_DEFAULT_DARK); //テーマ　THEME_DEVICE_DEFAULT_LIGHT , THEME_TRADITIONAL , THEME_HOLO_LIGHT , THEME_HOLO_DARK
            dlg.setMessage(message); //メッセージ
            ///dlg.setTitle(title); //タイトル
            dlg.setCancelable(true); //戻るボタンでキャンセルが可能かどうか

            // First button
            if (buttonLabels.length() > 0) {
                try {
                    dlg.setNegativeButton(buttonLabels.getString(0),
                        new AlertDialog.OnClickListener() {
                            public void onClick(DialogInterface dialog, int which) {
                                dialog.dismiss();
                                callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, 1));
                            }
                        });
                } catch (JSONException e) { }
            }

            // Second button
            if (buttonLabels.length() > 1) {
                try {
                    dlg.setNeutralButton(buttonLabels.getString(1),
                        new AlertDialog.OnClickListener() {
                            public void onClick(DialogInterface dialog, int which) {
                                dialog.dismiss();
                                callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, 2));
                            }
                        });
                } catch (JSONException e) { }
            }

            // Third button
            if (buttonLabels.length() > 2) {
                try {
                    dlg.setPositiveButton(buttonLabels.getString(2),
                        new AlertDialog.OnClickListener() {
                            public void onClick(DialogInterface dialog, int which) {
                              dialog.dismiss();
                              callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, 3));
                            }
                        });
                } catch (JSONException e) { }
            }
            dlg.setOnCancelListener(new AlertDialog.OnCancelListener() {
                public void onCancel(DialogInterface dialog)
                {
                    dialog.dismiss();
                    callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, 0));
                }
            });

            dlg.create();
            AlertDialog dialog =  dlg.show();
            TextView messageview = (TextView)dialog.findViewById(android.R.id.message);
            messageview.setTextDirection(android.view.View.TEXT_DIRECTION_LOCALE);
            messageview.setTextSize(17.0f); //メッセージのテキストサイズ
        };
    };
    this.cordova.getActivity().runOnUiThread(runnable);
}
    テーマを THEME_DEVICE_DEFAULT_DARK（上記コード6行目） 、タイトルを非表示（上記コード8行目） 、メッセージのテキストサイズを変更（上記コード61行目）したダイアログ
    ダイアログの表示