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

リストビューとフリップビュー (5/5)

作成:2012-11-17 16:09
更新:2012-11-17 16:09

■フリップビューを使おう！

リストビューは、すべてのデータをリスト表示するものでした。が、すべてを一覧表示する他にも、データを表示するためのコントロールは用意されています。リストビューとともに重用されるのが「フリップビュー（FlipView）」というものでしょう。

これは、データを１つずつ順番に表示していくためのものです。基本的な使い方はリストビューとほとんど同じです。以下にタグの基本形を整理しておきましょう。

※フリップビューのタグ
<div id="flipview1" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{itemDataSource:データ, 
        itemTemplate:テンプレート }">
</div>

※テンプレートのタグ
<div data-win-control="WinJS.Binding.Template">
    ……表示する内容を用意する……
</div>
見ればわかるように、リストビューと全く同じですね。違いは、data-win-controlに「WinJS.UI.FlipView」を指定しているだけです。テンプレートの使い方も全く同じです。これで、用意したテンプレートを使い、フリップビューが表示されるようになります。起動時には最初のデータが表示され、自動生成される左右に移動するボタンをクリックして次々とデータを移動できます。

注意したいのは、「現在、選択されているデータ」の取得方法でしょう。これはListViewとは微妙に違っています。FlipViewには「currentPage」というプロパティが用意されています。これは、現在表示しているページ（データのインデックス番号）を示すものです。ですから、このcurrentPageの値を取得し、データからそのインデックスの連想配列を取り出すことで、現在のデータを知ることができます。

下にフリップビューの利用例を上げておきました。先ほどのリストビューのデータをそのままフリップビューにしただけで、ほとんど同じものです。左右の移動ボタンをクリックするとデータが切り替わり、表示されたデータの内容がその上に出力されます。

リストビューとフリップビューは基本的な使い方はほぼ同じで、単に見せ方が違うだけです。セットで覚えておくようにしましょう。

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

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

●プログラム・リスト●

※修正したHTMLタグ

<body>
    <h1 id="title">Sample Page</h1>
    <p id="msg">this is list sample page.</p>

    <div id="flipTemp1" data-win-control="WinJS.Binding.Template">
        <div style="width: 300px; height:250px; background-color:blue">
            <div data-win-bind="textContent: title" style="font-size:18pt;"></div>
            <div data-win-bind="textContent: content" style="font-size:14pt;"></div>
        </div>
    </div>

    <div id="flipview1" data-win-control="WinJS.UI.FlipView"
        style="width: 350px; height:250px;" 
        data-win-options="{itemDataSource:mydata.itemList.dataSource, itemTemplate:select('#flipTemp1')}">
    </div>
</body>


※修正したスクリプト

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    // ListView用のデータ
    var dataArray = [
         { title: "Windows",  content: "WindowsはマイクロソフトのOSです。" },
         { title: "Mac OS X", content: "Mac OS Xはアップルが提供するOSです。Macにのみ搭載されています。" },
         { title: "Linux", content: "LinuxはオープンソースのOSです。標準搭載されるPCはまだ少数です。" },
         { title: "Android", content: "AndroidはGoogleが開発するOSです。スマートフォンやタブレット他、多数の危機に用いられています。" },
         { title: "iOS", content: "iOSはアップルのOSです。iPhone/iPadに搭載されています。" },
         { title: "Chrome OS", content: "Chrome OSはGoogleによるOSです。Chromebookに搭載される他、オープンソースで配布されてもいます。" }
    ];
    var dataList = new WinJS.Binding.List(dataArray);
    var members = { itemList: dataList };
    WinJS.Namespace.define("mydata", members);
    
    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 flip = document.getElementById("flipview1");
                flip.addEventListener("click", flip1Action);
            }));
        }
    }

    app.oncheckpoint = function (args) {};

    // ※追加した関数
    function flip1Action(event) {
        var obj = event.currentTarget.winControl;
        var n = obj.currentPage;
        var h = document.getElementById("title");
        h.textContent = dataArray[n].title;
        var p = document.getElementById("msg");
        p.innerHTML = dataArray[n].content;
    }
    
    app.start();
})();
※関連コンテンツ

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