libro
www.tuyano.com
JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

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

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

■フライアウトを使おう！

メッセージダイアログは、簡単なメッセージやボタンの組み合わせで表現をすることができますが、もう少し複雑なことをさせようと思った場合にはあまり役に立ちません。例えば、もっと柔軟な表示や、もっと複雑なダイアログなどを作りたいと思ったら、別の方法を考える必要があります。

より柔軟なダイアログを考えるなら、「フライアウト」と呼ばれる機能が役に立つでしょう。フライアウトは、HTMLにダイアログの表示を用意しておき、それをHTML本体から切り離してダイアログのように表示させる機能です。HTMLで表示内容を用意できるため、独自の表示内容を作成することができます。

フライアウトを使うには、まずHTML側にそのためのタグを用意しておく必要があります。これは以下のように記述します。
<div id="IDの指定" data-win-control="WinJS.UI.Flyout">
    ……ここに表示内容を用意する……
</div>
一般的な<div>タグに、data-win-control="WinJS.UI.Flyout"という属性を追加しています。「data-win-control」という属性は、Windows APIに用意されている独自コントロールを割り当てるために用いられるものです。ここに設定されている「WinJS.UI.Flyout」というのがフライアウトのコントロールです。このように、<div>タグにdata-win-control="○○"という形でコントロール名を指定することで、オリジナルのUIを作成できるのです。

このタグを書いただけでは、もちろんフライアウトは使えません。フライアウトを利用するためには、「表示の仕方」と「消し方」を覚えておかなければいけません。

・フライアウトを表示する
《DOMオブジェクト》.winControl.show( DOMオブジェクト , 表示場所 );

・フライアウトを消す
《DOMオブジェクト》.winControl.hide();

フライアウトの操作は、フライアウトの<div>タグ（先ほどのdata-win-control="WinJS.UI.Flyout"を指定したタグ）のDOMオブジェクトを取得して行います。そのwinControlプロパティに用意されているshow/hideメソッドでフライアウトの表示・非表示を操作します。

showでは、２つの引数が必要です。第１引数はDOMオブジェクト、第２引数には表示場所（"top", "bottom", "right", "left"）を指定します。例えば第１引数にボタンのDOMオブジェクトを指定し、第２引数に"top"とすれば、そのボタンの上にフライアウトを表示するわけです。この第１引数のDOMは「アンカー」と呼ばれます。

サンプルとして、簡単なフライアウトの表示例を下に掲載しておきます。ボタンをクリックすると、その右側にフライアウトを表示します。メッセージダイアログよりちょっと面倒ですが、簡単にポップアップで表示を出せるのはなかなか便利です。

（※実は、フライアウトを表示するにはもっと簡単な方法があるのですが、それについては次回に……）

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

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">
        <div>これがフライアウトのメッセージです。</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);
            }));
        }
    }

    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();
})();
※関連コンテンツ

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