libro
www.tuyano.com
JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

アプリバー／メニュー／HTMLコントロール (4/4)

作成:2012-11-15 08:16
更新:2012-11-15 08:21

■HTMLページの埋め込みと切り替え

複数の画面を持つアプリの場合、複数のHTMLページを用意して切り替える操作を行うことになります。ページの移動は？　<a>タグで移動先にリンクをはっておけば、それで終わりです。リンクをクリックすれば、そのページが表示されます。

ただし、こうしたページ全体をまるごと切り替えるような場合ばかりではありません。アプリでは、統一された画面デザインを用意して、その中のコンテンツだけを切り替えるようなやり方をすることが多いでしょう。サンプルでいえば、default.htmlの中に、実際に表示するHTMLを埋め込んで表示し、必要に応じて埋め込んであるページを変更する、というようにするわけです。

HTMLの中に別のHTMLファイルを埋め込むには、HtmlControlというコントロールを使用します。これは、<div>タグに「data-win-control="WinJS.UI.HtmlControl"」という属性を用意することで作成できます。

このコントロールでは、data-win-options属性に「uri」というオプションでHTMLファイルを指定することで、そのファイルを埋め込んで表示することができます。整理するとこんな感じです。
<div data-win-control="WinJS.UI.HtmlControl" 
    data-win-options="{uri: HTMLファイル }"></div>
単純にページを埋め込むだけならこれでOKです。が、埋め込まれたHTMLファイルを切り替えるには、JavaScriptによる操作が必要となります。
WinJS.UI.Pages.render( HTMLファイル , はめこみ先のDOMオブジェクト );
WinJS.UI.Pagesは、文字通りページを扱うための機能を提供するオブジェクトです。「render」は、指定のHTMLページをレンダリングして組み込むものです。引数には、はめ込むHTMLファイル名と、はめ込む<div data-win-control="WinJS.UI.HtmlControl">タグのDOMオブジェクトを指定します。

では、実際に簡単な例を作ってみましょう。まず、プロジェクトにHTMLファイルを２つ新たに作成します。これは、＜プロジェクト＞メニューから＜新しい項目の追加…＞を選んで行います。メニューを選ぶとダイアログが現れ、追加する項目が一覧リストで表示されるので、「HTMLページ」を選択して、下の方にある「名前」にファイル名を記入して「追加」ボタンを押すだけです。

今回、新たに作成するのは、「page1.html」「page2.html」の２つのファイルです。いずれも、default.htmlと同じ場所に保存しておきましょう。サンプルなので、内容は適当に用意して構いません。

ファイルを用意したら、default.htmlとdefault.jsの内容を下のリスト欄のように修正しましょう。これで、リンクをクリックすると、page1.htmlとpage2.htmlが交互に切り替わって表示されます。単純にページを移動するのと違い、統一感ある画面構成の中で表示を切り替えることができるようになります。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

*program list*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
※default.htmlに追加するタグ
 
<button data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{label:'First Page', section:'global'}"
    id="menubtn1"></button>
<hr data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{type:'separator', section:'global'}" />
<button data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{label:'Second Page', section:'global'}"
    id="menubtn2"></button>
<hr />
 
<div id="container" data-win-control="WinJS.UI.HtmlControl"
    data-win-options="{uri:'page1.html'}"></div>
 
 
※app.onactivatedの処理
 
app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.
            ApplicationExecutionState.terminated) {} else {}
        args.setPromise(WinJS.UI.processAll().then(function completed() {
            var menubtn1 = document.getElementById("menubtn1");
            var menubtn2 = document.getElementById("menubtn2");
            var menubtn3 = document.getElementById("menubtn3");
            menubtn1.addEventListener("click", button1Click);
            menubtn2.addEventListener("click", button2Click);
        }));
    }
}
 
 
※追加するイベント用関数
 
function button1Click(event) {
    var host = document.getElementById("container");
    host.innerHTML = "";
    WinJS.UI.Pages.render("page1.html", host);
}
function button2Click(event) {
    var host = document.getElementById("container");
    host.innerHTML = "";
    WinJS.UI.Pages.render("page2.html", host);
}
※関連コンテンツ

「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る