MetroStyleApp入門(JS) vol4.イベントを設定する

火曜日 , 7, 8月 2012 Leave a comment

(本記事はVisualStudio2012RC+Windows8RP環境で確認しております。製品版では動作が異なる可能性があるのでご注意ください。)

 

 HTML+JavaScriptのMetroスタイルアプリケーションで、イベントハンドラーを設定する方法。

 

 まずは、ボタンを一個配置する。

 (VisualStudio2012RCだとhtmlのデザインビューが無いのが残念)

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>EventSample_RC</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- EventSample_RC references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <input id="Button1" type="button" value="button" />
</body>
</html>

 

 本当にボタンが一個あるだけの単純なHTML。

 ボタンをクリックした際のイベントを設定する。

 

 default.jsに追記する。

 

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: このアプリケーションは新しく起動しました。ここでアプリケーションを
                // 初期化します。
            } else {
                // TODO: このアプリケーションは中断状態から再度アクティブ化されました。
                // ここでアプリケーションの状態を復元します。
            }
            args.setPromise(WinJS.UI.processAll());

            var button = document.getElementById("Button1");
            button.addEventListener("click", buttonClick, false);
        }
    };

    function buttonClick()
    {
        Debug.writeln("call");
    }

 

 コンソールに出力したい場合の[Debug.writeln]も覚えておきたい。


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です