SQLの窓

2012年07月11日


Win8(JS Metro)の『分割・・・』テンプレートにアプリバーを追加して、新しいページを定義する



アプリバーは、Metro スタイル アプリのナビゲーション デザイン で説明されていますが、上の画像の画面下部にある細い帯のような部分の事で、画面上をマウスで右クリックするか、画面の下端をスワイプする事によって表示されます。

ここには、現在のビューに対して作用するコマンドを置く事がガイドラインとして書かれていますが、Microsoft のサンプルであるこの図のようなサンプルもあります( メニューとしても使われています ) 



新しいページの追加



新しいページの追加は、HTML で画面を作成し、その HTML 用の JavaScript のコードで、WinJS.UI.Pages.define を使ってページの定義を行う事によって準備できます。

ここでは、その呼び出しに『アプリバー』を使う為に、そのイベントを data.js で定義しています。

参考 : Win8(JS Metro)の『分割・・・』テンプレートを使って RSS を収集するサンプル

data.js では、本来リストビュー用のデータの処理を行っていますが、二つのビューから利用されるので定義場所として良い場所となります。また、元々複数のコード間で名前を参照できるように、名前空間の定義もあるのでイベントの実体をここで定義します。

但し、イベントの登録は各ページ定義の ready イベント で行います。

default.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>GetXmlList</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- GetXmlList references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
    <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder' }"></button>
    </div>
</body>
</html>

アプリバーの定義は、Metro JS のひな型のエントリポイント的位置付けの default.html で行われます。意味合い的には、アプリバーはコントロール用オブジェクト(data-win-control属性を持つ)であって、他の一般的な HTML とは識別され、実装は default.js で実行される『WinJS.UI.processAll()』で行われるようです。( ビューの書き換え/Navigate はその上にある DIV 内で行われます )


split.html
data.js

アプリバーとは関係無いですが、動的な HTML 処理サンプルとしてリンクと IFRAME を実装しています。リンクは直接 HTML を書き込む方法と、A要素にデータをバインドする方法の二つを実装しています




data.js 内の呼び出し部分
    function newPage() {
        Debug.writeln("newPage:" + WinJS.Navigation.location);
        if (WinJS.Navigation.location != "/pages/hello/hello.html") {
            WinJS.Navigation.navigate(
                '/pages/hello/hello.html',
                {
                    param1: '自動的に',
                    param2: 'ページのオプションとして ready イベントへ'
                }
            );
        }
        document.getElementById("appbar").winControl.hide();

    }

    WinJS.Namespace.define("Data", {
        items: groupedItems,
        newPage: newPage,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        getItemReference: getItemReference,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });

新しいページ

アプリバーは、▼この新しいページでも処理される為、自身である場合はなにもしないようにしています。また、戻るボタンはHTML側の定義で完結しています

hello.html
hello.js




posted by lightbox at 2012-07-11 12:08 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり