WinJSを使ったブラウザアプリで、どうやって画面遷移するのか試行錯誤してました。結論から言うとストアアプリと同じでした…。
ストアアプリからコピーして下準備
Windowsストアアプリのナビゲーションするアプリから、navigator.jsをコピーしてきます。そして、トップページに以下のようなnavigator.jsで定義されているコントロールを使うHTMLを書きます。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><linkhref="WinJS/css/ui-dark.css"rel="stylesheet" /><scriptsrc="WinJS/js/base.js"></script><scriptsrc="WinJS/js/ui.js"></script><scriptsrc="WinJS/js/WinJS.js"></script><scriptsrc="Script/navigator.js"></script><scriptsrc="Script/index.js"></script><title>Hello winjs</title></head><body><divid="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><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><scriptsrc="default.js"></script><title></title></head><body> OK<br/><buttonid="nextButton">Next</button><br/><divid="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><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title></head><body><buttondata-win-control="WinJS.UI.BackButton"></button><h1class="win-type-xx-large"style="display:inline;">next page</h1></body></html>
実行して動作確認
実行すると初期画面がちゃんと表示されます。
Nextボタンを押すとちゃんと画面遷移した！
