メッセージダイアログとフライアウト(4/4):JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

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

作成:2012-11-12 08:36
更新:2012-11-12 08:36

■フライアウトの表示イベントについて

このフライアウトには、表示に関するイベントが幾つか用意されています。これらを利用することで、表示・非表示の際に処理を実行させることができるようになります。用意されているイベントは以下のようになります。

beforeshow――表示される直前に発生するイベント
aftershow――表示された直後に発生するイベント
beforehide――消える直前に発生するイベント
afterhide――消えた直後に発生するイベント

これらのイベントは、addEventListenerで組み込みます。が、注意したいのは、「どのオブジェクトに組み込むのか」です。これらは、フライアウトの<div>タグのDOMオブジェクトにあるwinControlプロパティに保管されたオブジェクトに対して組み込む必要があります。

《DOMオブジェクト》.winControl.addEventListener( イベント名 , 処理 );

このような形になるわけです。DOMオブジェクト自体にaddEventListenerしても全く機能しないので注意してください。

下のリスト欄に、簡単なサンプルをあげておきました。フライアウトを表示する直前にフィールドのテキストをクリアし、フライアウトが消えたらメッセージを表示します。args.setPromise(WinJS.UI.processAll().thenのcompletedでイベントの組み込みを行なっているのがわかるでしょう。

このサンプルでは、フライアウト内に入力フィールドを用意して、それを操作しています。フライアウトは、基本的にHTMLに書かれたタグですから、表示されているものはdocument.getElementByIdでDOMを取り出し操作できます。ダイアログのように本体と切り離されておらず、ごく普通のDOMを操作する感覚で扱えるところがいいですね。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

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

●プログラム・リスト●

※default.htmlの<body>タグ

<body>
    <p id="msg">Please click button...</p>
    <br /><br /><br />
    　　　<button id="button1">Click</button>
    <div id="confirmFlyout" data-win-control="WinJS.UI.Flyout">
        <h2>FLYOUT!</h2>
        <div>これがフライアウトです。</div>
        <div><input type="text" id="confirmField" /></div>
        <button id="confirmButton">はい</button>
    </div>
</body>


※default.jsのスクリプト

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.
                ApplicationExecutionState.terminated) {} else {}
            args.setPromise(WinJS.UI.processAll().then(function completed() {
                var button1 = document.getElementById("button1");
                button1.addEventListener("click", doAction, false);
                var dlogbtn = document.getElementById("confirmButton");
                dlogbtn.addEventListener("click", confirmAction, false);
                var flyout = document.getElementById("confirmFlyout");
                var field1 = document.getElementById("confirmField");
                var msg = document.getElementById("msg");
                flyout.winControl.addEventListener("beforeshow", function (event) {
                    field1.value = "";
                }, false);
                flyout.winControl.addEventListener("afterhide", function (event) {
                    msg.textContent = "入力テキスト：" + field1.value;
                }, false);
            }));
        }
    }

    app.oncheckpoint = function (args) {};

    // ※追加した関数
    function doAction(event) {
        var flyout = document.getElementById("confirmFlyout");
        var button1 = document.getElementById("button1");
        flyout.winControl.show(button1, "right");
    }

    function confirmAction(event) {
        document.getElementById("confirmFlyout").winControl.hide();
    }

    app.start();
})();

※関連コンテンツ

<< prev next >>

「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る