画面はまたこのゲームサンプル(の一部)を使いました ( 正式タイトルは JavaScript and HTML5 touch game sample )結局、要素の部分を置き換える為の正式な SDK は存在しました。そのサンプルのタイトルは 『Loading HTML fragments sample』ですが、navigate メソッドはやはり骨格であって、置き 換えは自分で行って検証しました。置き換える為に使われる HTML のヘッダ部分の置き換え後 の影響は厳密では無い事もわかりましたが、確実に説明のつかない結果だったので、不必要な ものは省いてコードを構成しています。 一つ解ったのは、navigate の骨格を使う事によって、自動的に back メソッド等が使えるよう になる事です。他のサンプルでも不思議だったのですが、『戻る』アイコンがあるのに、どうも イベント定義されているふしが無かったのですが、navigate 完了後に一網打尽にされるようで す。
default.html 誤解を招かないように、JavaScript の読み込みはここでしか行っていません
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8"> <title>Application2</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script> <!-- Application2 references --> <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> </head> <body> <div id="contentHost"></div> <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{ commands:[ {id:'home', label:'メニュー', icon:'', section: 'global', onclick: R101.navigateHome}, {id:'play', label:'ゲーム', icon:'', section: 'global', onclick: R101.navigateGame}, {id:'rules', label:'ルール', icon:'', section: 'global', onclick: R101.navigateRules}, {id:'scores', label:'スコア', icon:'', section: 'global', onclick: R101.navigateScores}, {id:'credits', label:'クレジット', icon:'', section: 'global', onclick: R101.navigateCredits} ]}"></div> </body> </html>
default.js VS11 のブランクのスケルトンを使用しています。 WinJS.Utilities.empty と WinJS.UI.Fragments.render が正式な SDK ですが、察するにたいした事はやってなさそうです。内容は、empty でクリアして おかないと追加されるので、極端な話、 innerHTML = "" と appendChild だけ かもしれません。 それより、『戻るボタン』の捕まえ方に特徴があります。render 後、成功したら、 win-backbutton クラスを探してイベント追加と状態処理を行います。ページがい くつあっても、ほぼ自動です。
// For an introduction to the Blank template (function () { "use strict"; var app = WinJS.Application; var nav = WinJS.Navigation; app.onactivated = function (eventObject) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. // 追加部分 nav.navigate("/html/homePage.html"); Debug.writeln("初期処理"); } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } WinJS.UI.processAll(); } }; // 追加部分 WinJS.Navigation.addEventListener("navigated", function (ev) { Debug.writeln("navigated"); Debug.writeln(ev.detail.location); var target = document.querySelector("#contentHost"); WinJS.Utilities.empty(target); WinJS.UI.Fragments.render(ev.detail.location, target).then(function () { var backButton = document.querySelector(".win-backbutton"); if (backButton) { backButton.addEventListener('click', function () { WinJS.Navigation.back(); }, false); if (WinJS.Navigation.canGoBack) { backButton.removeAttribute('disabled'); } else { backButton.setAttribute('disabled', 'true'); } } }); }, false); // 追加部分 function navigateHome() { Debug.writeln("メニュー"); document.getElementById("appbar").winControl.hide(); } function navigateGame() { Debug.writeln("ゲーム"); document.getElementById("appbar").winControl.hide(); } function navigateRules() { Debug.writeln("ルール"); document.getElementById("appbar").winControl.hide(); } function navigateScores() { Debug.writeln("スコア"); nav.navigate("/html/homePage.html"); document.getElementById("appbar").winControl.hide(); } function navigateCredits() { Debug.writeln("クレジット"); document.getElementById("appbar").winControl.hide(); nav.navigate("/html/homePage_light.html"); } // もともとあった部分 app.oncheckpoint = function (eventObject) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. You might use the // WinJS.Application.sessionState object, which is automatically // saved and restored across suspension. If you need to complete an // asynchronous operation before your application is suspended, call // eventObject.setPromise(). }; app.start(); // 追加部分 WinJS.Namespace.define("R101", { navigateHome: navigateHome, navigateGame: navigateGame, navigateRules: navigateRules, navigateScores: navigateScores, navigateCredits: navigateCredits }); })();
homePage.html 画面が変わる確認をしたかったので、もう一つの画面とはほとんど同じです。 もう一つの画面に無いものとして、二つ目のボタンに onclick 処理をインラインで 記述しています。( R101.navigateRules(); ) この画面定義に、.js の読み込みはありませんが、R101.navigateRules(); の実行 に支障はありません( そもそも、Fragment の変更ですし ) そういえば、最初の画面に homePage.css を最初から置いておいて動作するかどうかを テストしていませんでした・・・・しまった、うかつでした。 ( 現状では、少なくともここに homePage.css が無いと画面は正しく表示されません )
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>homePage</title> <link rel="stylesheet" href="/css/homePage.css" /> </head> <body> <!-- The content that will be loaded and displayed. --> <div class="fragment homePage"> <header role="logo" aria-label="Game logo"> <div role="logo" /> </header> <section role="menu" aria-label="Game menu"> <div class="menu-buttons"> <button role="menuitem" aria-label="Play game" id="playMenuItem"><span class="menu-icon"></span>ゲーム開始</button><br /> <button onclick="R101.navigateRules();" role="menuitem" aria-label="Rules" id="rulesMenuItem"><span class="menu-icon"></span>ルール</button><br /> <button role="menuitem" aria-label="High scores" id="scoresMenuItem"><span class="menu-icon"></span>ハイスコア</button><br /> <button role="menuitem" aria-label="Credits" id="creditsMenuItem"><span class="menu-icon"></span>クレジット</button> </div> </section> </div> </body> </html>
homePage_light.html ここに、『戻るボタン』があります。( class="win-backbutton" )
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>homePage</title> <link rel="stylesheet" href="/css/homePage.css" /> </head> <body> <!-- The content that will be loaded and displayed. --> <div class="fragment homePage"> <header role="logo" aria-label="Game logo"> <div role="logo" /> </header> <section role="menu" aria-label="Game menu"> <div class="menu-buttons"> <button role="menuitem" aria-label="Play game" id="playMenuItem"><span class="menu-icon"></span>ゲーム開始 2</button><br /> <button role="menuitem" aria-label="Rules" id="rulesMenuItem"><span class="menu-icon"></span>ルール</button><br /> <button role="menuitem" aria-label="High scores" id="scoresMenuItem"><span class="menu-icon"></span>ハイスコア</button><br /> <button role="menuitem" aria-label="Credits" id="creditsMenuItem"><span class="menu-icon"></span>クレジット</button><br /> <br /> <button class="win-backbutton"></button> </div> </section> </div> </body> </html>
|
【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 ドキュメントを使ってソースコード配布と解説
- querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード
- Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します
- Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います
- Win8 Metro(JS) : 印刷処理
- Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)