SkyDrive へ移動
( 自作のイラストを背景画像として使用しています ) 製品になる前のサンプルコードから様変わりし、以前のままでは動作しなかったものを修正しました。以前から比べて、アプリバーのボタンの作成方法が変わり、画面定義にイベント記述ができないようになっていました。しかし、その他の大きな骨格は基本的に以前と変わっていませんでした。 default.js
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var nav = WinJS.Navigation;
var activation = Windows.ApplicationModel.Activation;
// ************************************************
// 開始処理
// ************************************************
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
nav.navigate("/HomePage.html");
} else {
// TODO: このアプリケーションは中断状態から再度アクティブ化されました。
// ここでアプリケーションの状態を復元します。
}
args.setPromise(WinJS.UI.processAll());
}
};
// ************************************************
// Navigate された時の処理( 画面変更 )
// ************************************************
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');
}
}
// ************************************************
// 画面が切り替わった時の処理
// ************************************************
if (ev.detail.location == "/HomePage.html") {
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "url(/images/back_001.jpg)";
}
if (ev.detail.location == "/NextPage.html") {
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "url(/images/back_002.jpg)";
}
});
}, false);
// ************************************************
// イベント処理の登録
// ************************************************
var page = WinJS.UI.Pages.define("/default.html", {
ready: function (element, options) {
document.getElementById("home")
.addEventListener("click", EVENT.navigateHome, false);
document.getElementById("play")
.addEventListener("click", EVENT.navigateGame, false);
document.getElementById("rules")
.addEventListener("click", EVENT.navigateRules, false);
document.getElementById("scores")
.addEventListener("click", EVENT.navigateScores, false);
document.getElementById("credits")
.addEventListener("click", EVENT.navigateCredits, false);
},
});
// ************************************************
// 実際のイベント処理
// ************************************************
function navigateHome() {
Debug.writeln("メニュー");
document.getElementById("appbar").winControl.hide();
nav.navigate("/HomePage.html");
}
function navigateGame() {
Debug.writeln("ゲーム");
document.getElementById("appbar").winControl.hide();
nav.navigate("/NextPage.html");
}
function navigateRules() {
Debug.writeln("ルール");
document.getElementById("appbar").winControl.hide();
}
function navigateScores() {
Debug.writeln("スコア");
document.getElementById("appbar").winControl.hide();
}
function navigateCredits() {
Debug.writeln("クレジット");
document.getElementById("appbar").winControl.hide();
}
app.oncheckpoint = function (args) {
};
app.start();
// ************************************************
// 各ページから参照可能な名前空間の定義
// ************************************************
WinJS.Namespace.define("EVENT", {
navigateHome: navigateHome,
navigateGame: navigateGame,
navigateRules: navigateRules,
navigateScores: navigateScores,
navigateCredits: navigateCredits
});
})();
default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JSBasic</title>
<!-- WinJS 参照 -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- JSBasic 参照 -->
<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">
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'home', label:'メニュー', icon:'', section: 'global'}">
</button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'play', label:'ゲーム', icon:'', section: 'global'}">
</button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'rules', label:'ルール', icon:'', section: 'global'}">
</button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'scores', label:'スコア', icon:'', section: 'global'}">
</button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'credits', label:'クレジット', icon:'', section: 'global'}">
</button>
</div>
</body>
</html>
第二画面にコンテンツは無く、背景画像のみ変更するようにしています。※ アプリバーは動作します
|
|
【Win8 ストアアプリの最新記事】
- C# : HttpClient で Post と Get する汎用 static クラス
- Win8.1 ストアアプリ(JS) : Visual Studio 2013 で Three.js(v65) の WebGLRenderer の動作を確認しました
- WinJS ストア : Three.js を組み込んで、『画像を飛ばす』テンプレート( Bird.js を利用 )
- VS2012ストア(C#) : WebView テンプレート
- VS2012(C#)ストア : ListView Twitter 検索テンプレート
- イラストを背景にして２ページの画面遷移を解りやすくした Windows Store テンプレート
- Twitter API の自分のアプリのトークンを使って投稿するだけの class VS2012_Twitter
- Win8 ストア(C#) / PDF viewer sample (Windows 8.1)
- ストアアプリの TextBox のスクロールバー
- Win8 ストアアプリの、メモリ上にページを残す画面遷移と、前画面のコントロールの参照
- Win8 ストアアプリで、『選択肢を応答するダイアログ』を簡単に使うための MessageBox クラス
- Win8 ストアから Post 投稿
- Win8ストア XAML の AppBarButtonStyle のContent に指定する 16進数 Unicode の取得
- Win8 ストア : UrlEncode と UrlDecode
- Win8 ストア : HttpClient + XDocument で RSS の取得
- Win8 ストア : リストボックス テンプレート
- Win8 ストア : ファイルアクセス テンプレート
- Win8 ストア : ストアブランク テンプレート
- AppBar テンプレート / Win8 ストアアプリ(C#)
- Windows ストアアプリの AppBar を作成してテストする
