ページ遷移は本来 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 によって見栄えが変わる本当の意味でのテンプレートになっています。殆ど、テンプレートコードを触る余地は無く、よほどの知識が無いと逆に動かないものになってしまうようなものである事は間違いありません。
▼ 手順となると、やたらと画像が多くなるので全体像は NAVER で見れるようにしています
エミュレータは、4.0.3 も動作しますが、現状では 2.3.3 を使うか実機でテストするのが良いです(4.0.3 は日本語入力が面倒です)。特に実機はストレスなくすぐ確認できます。実機は以下のように中古を買うと言う手もあります。
■ 
重要なポイント
★ Java SDK のバージョン選択
1.5 と 1.6 と 1.7 があると思いますが、いろいろな意味で 1.6 を選択しておくほうが無難だと思います( 1.7 は他の開発で動かなかったりします )が、Eclipse がデフォルトで低いバージョンを選んでしまっている場合は、世の中のソースコードに書かれている @Override でエラーになる可能性が大きいので、意図的に 1.6 を選んでおきます。
★ AndroidManifest.xml に注意する
とにかく、当たり前のように関係してくる制限事項がここに絡んで来ます。
1) 最低必要な SDK バージョン( これより低いものをエミュレータで使うとエラー )
2) パーミッション( 宣言しないと使えないものが多々ある )
3) デバッグ用の設定等( 世間にたくさん転がってます )
ここでは、SDK では存在しないパーミッション(com.android.launcher.permission.INSTALL_SHORTCUT)を入力しておかないと動きません。
★ Eclipse のクセを知る
Eclipse の問題なんですが、こういうものなので受け入れるしかありません。エラーが表示されていても、それは実は Eclipse が消去するのを忘れている場合もあります。実行してやるととりあえず再度チェックしますから、動作確認も含めて時間がかかるかもしれませんが、実行したり、いったん終了したりしてるほうがトラブルを回避できる事が多いかもしれません。
★ Run Configurations と DDMS はいろいろ知っておく
結局エミュレータあってのデバッグなので、この二つの機能はできるだけ知っておく必要があります。多少でも知っておれば特に問題も無く前へ進めるはずです。
※ 上の画像は、画面のキャプチャの説明用ですが、デバイスが選択されています。これをしておかないと、LogCat すらまともに表示されません。
これは、Windows8 リリースプレビューでホーム画面のアプリを使っていて遭遇したバグらしきものです。まあ、おかげでアプリの再登録手順を経験できました。
■ 
( この画面のサンプルは、JavaScript and HTML5 touch game sample )
プロシェクト作成時に、画面分割アプリとグリッドと言う ListView と 画面遷移のひな形が用意されていますが、そもそもコードを読むものではなくデータ部分( JSON ) を変更して作るようなものになっています。コードは相当の知識が無いと読めない SDK レベルのものなのですが、これは、その中の Navigate 処理に触れたものです。
■ 
印刷処理は簡単です。ただ、UI が全くいままでと違うのと、印刷する部分を CSS で制御したりするのが新鮮でした。しかし、まだバグがあるようで Canvas 内の印刷は固まってしまってうまくいきませんでした。Canvas 内で Three.js が動いていて、メモリを使いすぎていたのかもしれません。
■ 
というか、JavaScript Metro は jQuery を元に作られているような部分が多々あります。サンプルの中にも jQuery の少し古いライブラリが組み込まれていたのもありました。とにかく、ふつうに動作しますので、Metro の画面遷移使うより、jQuery の UI 使ったほうが実装ははるかに簡単なような気がします
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
