ページ遷移は本来 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 によって見栄えが変わる本当の意味でのテンプレートになっています。殆ど、テンプレートコードを触る余地は無く、よほどの知識が無いと逆に動かないものになってしまうようなものである事は間違いありません。
|
|
【Windows8 Metro(JS/C#)の最新記事】
- Win8(JS Metro)の『分割･･･』テンプレートにアプリバーを追加して、新しいページを定義する
- Win8(JS Metro)の『分割･･･』テンプレートを使って RSS を収集するサンプル
- Win8(JS Metro)の『分割･･･』テンプレートから追加のページを定義する方法
- Windows8(JavaScript Metro Style) 関連リンク
- Windows8 で SkyDrive にアップロードするサンプル
- Windows8 Metro(JS) で LiveSDK を使って signin してテキスト表示するだけのサンプルコードの実行
- Windows8 Metro(JS) でのカメラの利用は簡単ですが、まだ製品版では無いせいか他の処理と同時に動かすと、問題もあるようです
- Windows8 Metro(JS) で Three.js の 3D モデル表示(Canvas)を行う
- Windows8 Metro(JS)の画面切り替えが解る、jQuery とのコラボ
- Google ドキュメントを使ってソースコード配布と解説
- 余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移
- querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード
- Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します
- Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います
- Win8 Metro(JS) : 印刷処理
- Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)
