Cordova-ダイアログ

Cordova Dialogsプラグインは、プラットフォームのネイティブダイアログUI要素を呼び出します。

ステップ1-ダイアログのインストール

このコマンドをインストールするには、*コマンドプロンプト*ウィンドウに次のコマンドを入力します。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

ステップ2-ボタンを追加する

次に、 indexl を開いて、すべてのタイプのダイアログに1つずつ、4つのボタンを追加します。

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>

手順3-イベントリスナーの追加

次に、 index.js の onDeviceReady 関数内にイベントリスナーを追加します。リスナーは、対応するボタンがクリックされるとコールバック関数を呼び出します。

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);

ステップ4A-アラート機能の作成

4つのイベントリスナーを追加したので、 index.js でそれらすべてのコールバック関数を作成します。最初のものは dialogAlert です。

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
   navigator.notification.alert(message, alertCallback, title, buttonName);

   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
}

*ALERT* ボタンをクリックすると、アラートダイアログボックスが表示されます。

Cordovaアラートダイアログ

ダイアログボタンをクリックすると、次の出力がコンソールに表示されます。

Cordova Alert DIalog Dismissed

ステップ4B-確認機能の作成

作成する必要がある2番目の関数は、 dialogConfirm 関数です。

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }

}

*CONFIRM* ボタンを押すと、新しいダイアログがポップアップ表示されます。

Cordovaダイアログ確認

[はい]ボタンをクリックして質問に答えます。次の出力がコンソールに表示されます。

Cordovaプラットフォーム確認の却下

ステップ4C-プロンプト機能の作成

3番目の関数は dialogPrompt 関数です。これにより、ユーザーはテキストをダイアログ入力要素に入力できます。

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
   navigator.notification.prompt(message, promptCallback,
      title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" +
         "You entered " +  result.input1);
   }

}

*PROMPT* ボタンは、次のスクリーンショットのようにダイアログボックスをトリガーします。

Cordovaダイアログプロンプト

このダイアログボックスには、テキストを入力するオプションがあります。クリックしたボタンとともに、このテキストをコンソールに記録します。

Cordovaダイアログプロンプトを閉じる

ステップ4D-ビープ機能を作成する

最後のものは dialogBeep 関数です。これは、ビープ音の通知を呼び出すために使用されます。 times パラメーターは、ビープ信号の繰り返し回数を設定します。

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}

*BEEP* ボタンをクリックすると、 *times* 値が *2* に設定されているため、通知音が2回聞こえます。

Cordova-dialogs

目次