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

HTMLとJavaScriptの基本コードを覚えよう！ (4/4)

作成:2012-11-10 11:30
更新:2012-11-10 11:30

■コードでイベントをバインドする

では、どのようにすればいいのか？　Windows Storeアプリでは、基本的に全ての処理をデフォルトで用意される匿名関数の中にまとめておくのがベターです。「なら、さっきのdoActionを匿名関数の中に移動すればいいな」と思った人、それだけではダメです。なぜって、そうすると外部から関数が見えませんから、ボタンをクリックしても「doAction関数が見つからない」というエラーになります。

ではどうするか。答えは簡単です。doAction関数を匿名関数内に用意し、onactivatedを使って起動時に関数をボタンにバインドすればいいのです。では、やってみましょう。

下に、修正したdefault.htmlとdefault.jsのソースコードを掲載しておきました。これでdoActionを匿名関数内に収める形でスクリプトを作成できます。HTML側では、<button>タグのonclickを削除し、idを追加しているだけです。
<button id="button1">Click</button>
そして、この<button>へのイベントのバインドを行なっているのが、app.onactivatedにバインドした関数定義の後に書かれている、以下の文です。
args.setPromise(WinJS.UI.processAll().then(function completed(){……}
デフォルトでは、 args.setPromise(WinJS.UI.processAll()); という文が用意されていましたね。setPromiseは、起動に関する非同期処理が完了するまで起動の完了を遅延するものです。といっても意味がわかりませんね。要するに「全部の準備が整ったら完了の処理を呼び出すようにするもの」と考えてください。

その中にあるWinJS.UI.processAllは、コントロール用に用意されている<div>タグIにWindows Store特有のルックアンドフィールを組み込む処理で、要するに「これでWindows Storeアプリ独自のGUIが生成されている」と考えてください。

この後に、メソッドチェーンで「then」というメソッドが追加されています。これは、このprocessAllに関するイベントを設定するものです。この中にあるcompleted関数で、processAllのすべての処理が完了した後に実行する処理を用意します。それが以下の文です。
var button1 = document.getElementById("button1");
button1.addEventListener("click", doAction, false);
getElementByIdで<button>タグのDOMオブジェクトを取得し、これの「addEventListener」でイベントのバインドを行なっています。これで起動時にイベントがバインドされ使えるようになります。

なんだかわかりにくいでしょうが、ここでは、「イベントのバインド処理は、args.setPromise(WinJS.UI.processAll().then(function completed() {……}のところに書いておく」と覚えてしまいましょう。

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

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

●プログラム・リスト●

※default.htmlの<body>タグ

<body>
    <p id="msg">Please type your name:</p>
    <input type="text" id="text1" />
    <button id="button1">Click</button>
</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);
            }));
        }
    }

    app.oncheckpoint = function (args) {}; // 処理なし

    // ※追加した関数
    function doAction(event) {
        var field = document.getElementById("text1");
        var msg = document.getElementById("msg");
        msg.textContent = "You type: " + field.value;
    }

    app.start();
})();
※関連コンテンツ

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