メッセージダイアログとフライアウト (2/4)

メッセージダイアログは、メッセージを表示するだけでなく、ボタンを追加することもできます。世の中の多くのダイアログでは、「OK」と「Cancel」のようにいくつかのボタンを表示し、どのボタンを押したかによって処理を決めるようなものがあります。こうしたダイアログも簡単に作ることができるのです。

MessageDialogに表示されるボタンは、オブジェクトの「commands」というプロパティで管理されています。ここには、後述するUICommandの配列が用意されており、ここにオブジェクトを追加することで、表示されるボタンが変更できるのです。

《MessageDialog》.commands.append( オブジェクト );

このような具合です。引数に指定する「ボタンを扱うオブジェクト」は、Windows.UI.Popups.UICommandというオブジェクトとして用意されます。

new Windows.UI.Popups.UICommand( 表示テキスト , 選択時の処理)

このようにしてUICommandオブジェクトは作成します。第１引数には表示するテキストを、そして第２引数にはボタンを選択した時に実行する処理（通常は関数として用意）をそれぞれ用意します。――複数のボタンを追加した場合には、どのボタンがデフォルトで選択されるかを指定できます。

《MessageDialog》.defaultCommandIndex = ボタンの番号;

このdefaultCommandIndexは、デフォルトで選択されるボタンの番号を示すプロパティです。これで番号を指定することでそのボタンがデフォルトに設定されます。注意したいのは、「最初に追加したボタンが１番になる」ということです。インデックス番号のようにゼロから開始されないので間違えないように。

では、簡単なサンプルを下のリスト欄にあげておきましょう。ボタンをクリックすると、２つのボタンを持ったメッセージダイアログが現れます。ここでどちらかのボタンを押すと、選択したボタン名が表示されます。

ここでは、UICommandの第２引数にはnullを指定しておき、showAsync().doneで終了時の処理をしています。UICommandでボタンを追加した場合も、このdoneによる処理はちゃんと機能します。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※doActionの修正

function doAction(event) {
    var field = document.getElementById("text1");
    var msg = document.getElementById("msg");
    msg.textContent = "show message dialog!";
    var dlog = new Windows.UI.Popups.MessageDialog("どっち？");
    dlog.commands.append(new Windows.UI.Popups.UICommand("オバマ", null));
    dlog.commands.append(new Windows.UI.Popups.UICommand("ロムニー", null));
    dlog.defaultCommandIndex = 1;
    dlog.showAsync().done(function (command) {
        if (command) {
            msg.textContent = "あなたは「" + command.label + "」を選びました。";
        }
    })
}