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

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

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

■選択された項目を利用するには？

リストビューは、ただ表示できればいいわけではありません。表示されたリストから項目をクリックしたら、その項目に関する処理が実行される――というように、選択した項目へのイベント処理が必須となります。

クリックしての処理は、onclickイベントをそのまま使えばよいでしょう。これをListViewのDOMオブジェクトにAddEventListenerで組み込めば使えるようになります。問題は、「クリックした項目の情報をどうやって取り出すか」です。

ListViewで選択された項目に関する情報は、ListViewオブジェクトに用意されている「currentItem」というプロパティで得ることができます。ListViewオブジェクトは、リストビューのDOMオブジェクトの「winControl」プロパティで取り出せます。

currentItemで取り出されるのは、選択された項目の情報をまとめたオブジェクトです。このオブジェクトには「index」というプロパティがあり、その項目（選択された項目）のインデックス番号を得ることができます。後は、データの配列からそのインデックス番号の連想配列を取り出せばいい、というわけです。

では、先ほどの修正として、「クリックしたらその項目を表示する」というアプリに作り変えてみましょう。下のリスト欄にコードを掲載しておきます。リストビューから項目をクリックすると、その内容が上に表示されます。

ここでは、以下のようにして選択された項目のインデックス番号を取得しています。
var obj = event.currentTarget.winControl;
var item = obj.currentItem;
var n = item.index;
document.getElementByIdを使ってDOMオブジェクトを取得してもいいのですが、ここでは引数で渡されるEventオブジェクトのcurrentTargetでイベントの発生したDOMを取得しています。そのwinControlでListViewオブジェクトを取得し、そのcurrentItemプロパティでインデックス番号が得られます。あとは、データ配列からその番号の連想配列を取り出して処理するだけです。

リストビューは、データとのバインドがちょっと面倒くさいのですが、そこさえクリアできれば、いかにもWindows 8っぽい雰囲気のアプリが作れます。ぜひマスターしておきましょう！

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

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

●プログラム・リスト●

※完成したHTMLの<body>タグ

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

    <div id="listTemp1" data-win-control="WinJS.Binding.Template">
        <div style="width: 250px; 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="listview1" data-win-control="WinJS.UI.ListView"
        data-win-options="{itemDataSource:mydata.itemList.dataSource, itemTemplate:select('#listTemp1')}">
    </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 list = document.getElementById("listview1");
                list.addEventListener("click", list1Action);
            }));
        }
    }

    app.oncheckpoint = function (args) {};

    // ※追加した関数
    function list1Action(event) {
        var obj = event.currentTarget.winControl;
        var item = obj.currentItem;
        var n = item.index;
        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 アプリ・プログラミング入門」に戻る