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

前回、とりあえず簡単なスクリプトを動かすことはできましたが、これだけではちょっとつまらないですね。やはり、Windows Storeアプリ独自の機能を使ってみたいものです。

Windows Storeアプリでは、Windowsに用意されている各種の機能を「Windows API」として用意し、利用できるようになっています。今回はその例として「メッセージダイアログ」を使ってみることにしましょう。これは、前回のサンプルを修正して使うことにします。ボタンをクリックして呼び出すように設定したdoAction関数を、下のリスト欄のように書き換えて試してください。

修正したらプログラムを動かしてみましょう。ボタンを押すと、メッセージダイアログを使ってメッセージが表示されます。ウインドウの中央に帯のように現れるのがメッセージダイアログです。

メッセージダイアログは、Windows.UI.Popups.MessageDialogというオブジェクトとして用意されています。これはいろいろな使い方ができますが、単純にメッセージを表示するだけなら、以下のようにオブジェクトを作成します。

var 変数 = new Windows.UI.Popups.MessageDialog( テキスト );

これで、引数に指定したテキストを表示するためのオブジェクトが用意されます。ただし、まだこの段階ではメッセージは表示されていません。オブジェクトが用意できただけです。メッセージの表示は、「showAsync」メソッドを呼び出します。

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

これでメッセージが表示されます。――サンプルを見てみると、このあとに更に「done」というメソッドが追加されていますね？　このdoneは、ダイアログを閉じた後に呼び出される処理を設定するものです。showAsyncメソッドは、その名の通り、非同期で表示を行います。つまり、メッセージが表示されても、そこでスクリプトの処理が停止するわけではなく、そのまま次の処理に進んでいくのです。

そこで、閉じた後で何かの処理を行うために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("あなたは「" +
        field.value + "」と書きました。");
    dlog.showAsync().done(function () {
        msg.textContent = "ok.";
    });
}