アプリバーは、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
|
|
【Windows8 Metro(JS/C#)の最新記事】
- Win8(JS Metro)の『分割･･･』テンプレートを使って RSS を収集するサンプル
- Win8(JS Metro)の『分割･･･』テンプレートから追加のページを定義する方法
- 『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味
- Windows8(JavaScript Metro Style) 関連リンク
- Windows8 で SkyDrive にアップロードするサンプル
- Windows8 Metro(JS) で LiveSDK を使って signin してテキスト表示するだけのサンプルコードの実行
- Windows8 Metro(JS) でのカメラの利用は簡単ですが、まだ製品版では無いせいか他の処理と同時に動かすと、問題もあるようです
- Windows8 Metro(JS) で Three.js の 3D モデル表示(Canvas)を行う
- Windows8 Metro(JS)の画面切り替えが解る、jQuery とのコラボ
- Google ドキュメントを使ってソースコード配布と解説
- 余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移
- querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード
- Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します
- Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います
- Win8 Metro(JS) : 印刷処理
- Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)
