かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

WinJSのブラウザアプリで画面遷移

WinJSを使ったブラウザアプリで、どうやって画面遷移するのか試行錯誤してました。結論から言うとストアアプリと同じでした…。

ストアアプリからコピーして下準備

Windowsストアアプリのナビゲーションするアプリから、navigator.jsをコピーしてきます。そして、トップページに以下のようなnavigator.jsで定義されているコントロールを使うHTMLを書きます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="WinJS/js/base.js"></script>
    <script src="WinJS/js/ui.js"></script>
    <script src="WinJS/js/WinJS.js"></script>
    <script src="Script/navigator.js"></script>
    <script src="Script/index.js"></script>
    <title>Hello winjs</title>
</head>
<body>
    <div id="container" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/default/default.html'}"></div>
</body>
</html>

初期画面の表示

index.jsでは、初期画面に遷移する処理を書きます。先ほどのindex.htmlで定義したcontainerの要素のwinControlをとってきてhomeプロパティに指定した値に遷移するようにしています。

(function () {
    
    WinJS.Application.onready = function () {
        WinJS.UI.processAll().then(function () {
            var host = document.querySelector("#container").winControl;
            WinJS.Navigation.navigate(host.home);
        });
    }

    WinJS.Application.start();
})();

初期画面の準備

最初に表示される初期画面の準備をします。こんな感じで。ちゃんとWinJSのコントロールが使えるか確認するためにRatingコントロールを置いてみました。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="default.js"></script>
    <title></title>
</head>
<body>
    OK<br/>
    <button id="nextButton">Next</button><br/>
    <div id="rating" data-win-control="WinJS.UI.Rating"></div>
</body>
</html>

初期画面の処理

Pageを定義して、その中のreadyメソッドで初期化時の処理を行います。単純にボタンをとってきて、クリックしたら次のページへ遷移するようにしています。

WinJS.UI.Pages.define("/pages/default/default.html", {
    ready: function () {
        var nextButton = document.querySelector("#nextButton");
        nextButton.addEventListener("click", function () {
            WinJS.Navigation.navigate("/pages/next/next.html");
        });
    }
});

遷移先のページの準備

これはただのHTMLです。WinJS.UI.BackButton使ってるくらいが目新しいところです。こいつを使うと戻れます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <button data-win-control="WinJS.UI.BackButton" ></button>
    <h1 class="win-type-xx-large" style="display:inline;">next page</h1>
</body>
</html>

実行して動作確認

実行すると初期画面がちゃんと表示されます。

f:id:okazuki:20150103201044p:plain

Nextボタンを押すとちゃんと画面遷移した!

f:id:okazuki:20150103201139p:plain