SQLの窓

2012年04月17日


Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います

デベロッパーの時のサンプルと、コンシューマーの時のサンプルとでは若干仕様変更
があったような気がしますが、それでも画面変更は基本的にこんな感じで行うようです。
( そういえば、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:'&#xE10F;', section: 'global', onclick: GameManager.navigateHome},
            {id:'play', label:'Game', icon:'&#xE102;', section: 'global', onclick: GameManager.navigateGame},
            {id:'rules', label:'Rules', icon:'&#xE104;', section: 'global', onclick: GameManager.navigateRules},
            {id:'scores', label:'Scores', icon:'&#xE113;', section: 'global', onclick: GameManager.navigateScores},
            {id:'credits', label:'Credits', icon:'&#xE10C;', section: 'global', onclick: GameManager.navigateCredits},
            {id:'newgame', label:'New', icon:'&#xE10E;', section: 'selection', onclick: GameManager.game.newGame},
            {id:'pause', label:'Pause', icon:'&#xE103;', section: 'selection', onclick: GameManager.game.togglePause}
        ]}"></div>
</body>
</html>

パっと見は、contentHost に勝手にページがロードされるように読めるのですが、すべて
カスタムの作業となっており、その時に利用されるのが、WinJS.Navigation Namespace と
いう名前空間です。

ここに navigate と言う function が存在するのですが、それを実行したからといって
何かが起こるのでは無く、navigated というイベントが発生するだけで、そこで実際の
実装を行うようですが、他にもこの作業を行うのにいろいろガイドラインが存在するよ
うです。

これは、無理に読み解かずに『ありもの』を利用するのが良いと思われます



【Windows8 Metro(JS/C#)の最新記事】
posted by lightbox at 2012-04-17 23:19 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり