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>