余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移 : logical　error

Google

<< querySelectorAll(… | TOP | Google ドキュメン… >>

2012年04月25日

余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移

画面はまたこのゲームサンプル(の一部)を使いました
( 正式タイトルは 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:'&#xE10F;', section: 'global', onclick: R101.navigateHome},
        {id:'play', label:'ゲーム', icon:'&#xE102;', section: 'global', onclick: R101.navigateGame},
        {id:'rules', label:'ルール', icon:'&#xE104;', section: 'global', onclick: R101.navigateRules},
        {id:'scores', label:'スコア', icon:'&#xE113;', section: 'global', onclick: R101.navigateScores},
        {id:'credits', label:'クレジット', icon:'&#xE10C;', 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">&#xE102;</span>ゲーム開始</button><br />
                <button onclick="R101.navigateRules();" role="menuitem" aria-label="Rules" id="rulesMenuItem"><span class="menu-icon">&#xE104;</span>ルール</button><br />
                <button role="menuitem" aria-label="High scores" id="scoresMenuItem"><span class="menu-icon">&#xE113;</span>ハイスコア</button><br />
                <button role="menuitem" aria-label="Credits" id="creditsMenuItem"><span class="menu-icon">&#xE10C;</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">&#xE102;</span>ゲーム開始 2</button><br />
                <button role="menuitem" aria-label="Rules" id="rulesMenuItem"><span class="menu-icon">&#xE104;</span>ルール</button><br />
                <button role="menuitem" aria-label="High scores" id="scoresMenuItem"><span class="menu-icon">&#xE113;</span>ハイスコア</button><br />
                <button role="menuitem" aria-label="Credits" id="creditsMenuItem"><span class="menu-icon">&#xE10C;</span>クレジット</button><br />
                <br />
                <button class="win-backbutton"></button>
            </div>
        </section>
    </div>
</body>
</html>

【Windows8 Metro(JS/C#)の最新記事】

posted by lightbox at 2012-04-25 22:51 | Windows8 Metro(JS/C#) |

Seesaa ブログ

	指定した位置でレジストリエディタを開く為の VBScript をダウンロードします
	JScript / VBScript : 指定したフォルダ内のフォルダ毎の使用済みサイズを読める範囲でレポートする
	デスクトップを部分キャプチャした時に切り取り&スケッチを起動してキャプチャ画像に枠線を付加させる。
	#Zoom の必殺技 : 相手に自分の Zoom 関連のウインドウを見せる
	GAS でユーザ作成 : 組織は "orgUnitPath": "/組織名A/組織名B"
	Windows 機能の呼び出し
	Google 共有ドライブの容量の上限について
	#ZOOM #アバター #ベータ版
	VScode でダークテーマでキャプチャした画像を印刷しないようにしましょう。トナーがもったいないです。
	Visual Studio Code で行末のスペースを消去する
	Microsoft Edge を終了してもメモリに残るのを避ける
	VBScript / JScript: Windows標準のオブジェクト( CDO.Message ) とロリポップメールを使ってメール送信
	C# : HttpClient で Post と Get する汎用 static クラス
	キーボード入力をファイル化
	コマンドリダイレクト演算子を使用する( Using command redirection operators )
	アンパサンド(&) を使用して複数のコマンドを一行で続けて実行
	コマンドプロンプトの省略ディレクトリ変更
	VSCode : あるショートカットをぜひ設定して、SHIFT_JIS が化けた時とりえず正しく表示する
	「送る」からファイルのダンプ
	GAS : 自分の共有ドライブ一覧とマイドライブのルートフォルダ一覧

	一部のファイル形式がブロックされる(GMail)
	Creating Shortcut Menu Handlers
	Microsoft Word のキーボードショートカット
	Excel のショートカットキーとファンクションキー
	サイトへの不自然なリンクを否認する新しいツールの提供を開始しました

logical error

2012年04月25日

余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移

logical　error