ページ遷移は本来 Navigate オブジェクトの navigated イベントで自分で動的にページを作成すると思ってたのですが、PageControl オブジェクトの助けを借りて、ページの定義単位で完結するようなテンプレートになっているようです。
まず、開始は default.html ですが、DIV 要素に URL が定義されています
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>SplitApp</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>
<!-- SplitApp references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/data.js"></script>
<script src="/js/default.js"></script>
<script src="/js/navigator.js"></script>
</head>
<body>
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
<!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
</div> -->
</body>
</html>
但し、それは option 部分で、事の始まりは 『data-win-control="Application.PageControlNavigator"』 から開始される事になります。ここで、Application は、このアプリケーションが作成した名前空間で、さらにアプリケーションが作成した PageControlNavigator オブジェクトに支配されている事になります。この PageControlNavigator は、navigator.js で定義されており、この PageControlNavigator こそが、API で定義されている本来の Navigater オブジェクトのこのアプリケーション用のラッパーとなっています。
navigate.js の参照
先頭部分がコンストラクタですが、ここで Navigate オブジェクトの navigated イベントに _navigated イベントがマップされているのが解ります(他にも初期処理がなされています)。そして、肝心の _navigated で、WinJS.UI.Pages.render(args.detail.location, newElement, args.detail.state, parented) が実行されて新しいページ定義が、newElement にロードされてページ遷移が起きます。(この、メソッドは Microsoft のドキュメントではまだ第一引数の記述が無いようです)
このテンプレートの場合、初回の表示で 『/pages/items/items.html』 が呼びだされる事になるわけですが、このページは ListView になっており、それなりにかなりのテンプレート用のコードが付加されています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>itemsPage</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>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/items/items.css" rel="stylesheet" />
<script src="/js/data.js"></script>
<script src="/pages/items/items.js"></script>
</head>
<body>
<!-- This template is used to display each item in the ListView declared below. -->
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
</div>
</div>
<!-- The content that will be loaded and displayed. -->
<div class="itemspage fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">SplitApp</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div class="itemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
</section>
</div>
</body>
</html>
表示される本体は、下のほうにある DIV 要素内( class="itemspage fragment" ) です。上にある DIV 要素は、ListView の一つ一つのアイテムの表示用テンプレートです。しかも、ページ全体を支配するのはこれらでは無く、items.js であり、データ表示の為に data.js も読み込む事になります。
items.js の参照
data.js の参照
items.js では、ページ全体を WinJS.UI.define メソッドで、PageControl オブジェクトとして定義しています。このページ用の interface は、現在のところは ready イベントのみ本来のページ用のもののようです。それ以外は全て内部でのやりとりで呼び出されます。
■ initializeLayout は ready または、updateLayout から。
■ itemInvoked は、ready 内で ListView からマップ
■ updateLayout は、本体の PageControlNavigator から window.onresize の結果として呼び出されています。
参考 : Metro スタイル アプリ用 JavaScript プロジェクト テンプレート
まとめ
結局、split.html でも同様の定義がなされており( unload イベントはドキュメントに無く裏付けできませんでした )、結局 data.js にある JSON オブジェクトの内容によって表示されるコンテンツが決まり、css によって見栄えが変わる本当の意味でのテンプレートになっています。殆ど、テンプレートコードを触る余地は無く、よほどの知識が無いと逆に動かないものになってしまうようなものである事は間違いありません。
アプリバーは、Metro スタイル アプリのナビゲーション デザイン で説明されていますが、上の画像の画面下部にある細い帯のような部分の事で、画面上をマウスで右クリックするか、画面の下端をスワイプする事によって表示されます。 ここには、現在のビューに対して作用するコマンドを置く事がガイドラインとして書かれていますが、Microsoft のサンプルであるこの図のようなサンプルもあります( メニューとしても使われています )
新しいページの追加
新しいページの追加は、HTML で画面を作成し、その HTML 用の JavaScript のコードで、WinJS.UI.Pages.define を使ってページの定義を行う事によって準備できます。 ここでは、その呼び出しに『アプリバー』を使う為に、そのイベントを data.js で定義しています。 参考 : Win8(JS Metro)の『分割･･･』テンプレートを使って RSS を収集するサンプル data.js では、本来リストビュー用のデータの処理を行っていますが、二つのビューから利用されるので定義場所として良い場所となります。また、元々複数のコード間で名前を参照できるように、名前空間の定義もあるのでイベントの実体をここで定義します。 但し、イベントの登録は各ページ定義の ready イベント で行います。 default.html
data.js 内の呼び出し部分
これは、Windows8 リリースプレビューでホーム画面のアプリを使っていて遭遇したバグらしきものです。まあ、おかげでアプリの再登録手順を経験できました。
■ 
( この画面のサンプルは、JavaScript and HTML5 touch game sample )
プロシェクト作成時に、画面分割アプリとグリッドと言う ListView と 画面遷移のひな形が用意されていますが、そもそもコードを読むものではなくデータ部分( JSON ) を変更して作るようなものになっています。コードは相当の知識が無いと読めない SDK レベルのものなのですが、これは、その中の Navigate 処理に触れたものです。
■ 
印刷処理は簡単です。ただ、UI が全くいままでと違うのと、印刷する部分を CSS で制御したりするのが新鮮でした。しかし、まだバグがあるようで Canvas 内の印刷は固まってしまってうまくいきませんでした。Canvas 内で Three.js が動いていて、メモリを使いすぎていたのかもしれません。
■ 
というか、JavaScript Metro は jQuery を元に作られているような部分が多々あります。サンプルの中にも jQuery の少し古いライブラリが組み込まれていたのもありました。とにかく、ふつうに動作しますので、Metro の画面遷移使うより、jQuery の UI 使ったほうが実装ははるかに簡単なような気がします
まずはサインイン
▲ アップードボタンをクリックすると、▼ に画面が切り替わります。
ファイルを選択し終わりましたので、『開く』でアップロードが開始されます。終了メッセージの表示を実装していないので、Debug.writeln の結果で確認します。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
