ＳＱＬの窓
<< 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#) | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり