デベロッパーの時のサンプルと、コンシューマーの時のサンプルとでは若干仕様変更 があったような気がしますが、それでも画面変更は基本的にこんな感じで行うようです。 ( そういえば、MessageDialog のスタイル(色)が変わっていました ) 今日調べたサンプルは、以下のような画面でゲームそのものは単純ですが表示ページ がたくさんありました。メインページ(default.html)画面入れ替え用の DIV が一つあるだけで、画面は他の HTML より動的に作成されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Game</title>
<!-- WinJS references -->
<link rel="stylesheet" href="//Microsoft.WinJS.0.6/css/ui-dark.css" />
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- App references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/assetManager.js"></script>
<script src="/js/movingAverage.js"></script>
<script src="/js/frameTimer.js"></script>
<script src="/js/touchPanel.js"></script>
<script src="/js/scores.js"></script>
<script src="/js/gameState.js"></script>
<script src="/js/game.js"></script>
<script src="/js/navigator.js"></script>
<script src="/js/default.js"></script>
<script src="/js/homePage.js"></script>
<script src="/js/creditsPage.js"></script>
<script src="/js/rulesPage.js"></script>
<script src="/js/gamePage.js"></script>
<script src="/js/scoresPage.js"></script>
</head>
<body>
<!-- Fragment host -->
<div id="contentHost" data-win-control="GameManager.PageControlNavigator" data-win-options="{home: '/html/homePage.html'}"></div>
<!-- App bar -->
<div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{
commands:[
{id:'home', label:'Menu', icon:'', section: 'global', onclick: GameManager.navigateHome},
{id:'play', label:'Game', icon:'', section: 'global', onclick: GameManager.navigateGame},
{id:'rules', label:'Rules', icon:'', section: 'global', onclick: GameManager.navigateRules},
{id:'scores', label:'Scores', icon:'', section: 'global', onclick: GameManager.navigateScores},
{id:'credits', label:'Credits', icon:'', section: 'global', onclick: GameManager.navigateCredits},
{id:'newgame', label:'New', icon:'', section: 'selection', onclick: GameManager.game.newGame},
{id:'pause', label:'Pause', icon:'', section: 'selection', onclick: GameManager.game.togglePause}
]}"></div>
</body>
</html>
パっと見は、contentHost に勝手にページがロードされるように読めるのですが、すべて カスタムの作業となっており、その時に利用されるのが、WinJS.Navigation Namespace と いう名前空間です。 ここに navigate と言う function が存在するのですが、それを実行したからといって 何かが起こるのでは無く、navigated というイベントが発生するだけで、そこで実際の 実装を行うようですが、他にもこの作業を行うのにいろいろガイドラインが存在するよ うです。 これは、無理に読み解かずに『ありもの』を利用するのが良いと思われます
|
|
【Windows8 Metro(JS/C#)の最新記事】
- Win8(JS Metro)の『分割･･･』テンプレートにアプリバーを追加して、新しいページを定義する
- Win8(JS Metro)の『分割･･･』テンプレートを使って RSS を収集するサンプル
- Win8(JS Metro)の『分割･･･』テンプレートから追加のページを定義する方法
- 『分割アプリケーション』/ Win8(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(JS) : 印刷処理
- Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)
