Windowsストアアプリでさまざまな情報を表示しよう

作って学ぶ！ 新人研修／Windowsストアアプリで電子カタログを作ろう（5）

リストボックスの値によって表示データを切り替える

　最後に、リストボックスの値によって表示するデータを切り替えられるようにプログラミングします。今回の旅行カタログアプリでは、前回の連載で画面の右側（main-right要素内）に旅行先を選択できるリストボックスをあらかじめ配置しています。そこで、このリストボックスの選択値によって、カタログに表示するデータを切り替えます。

リストボックスの値と表示データ

値	Index値	表示するデータ
ヨーロッパ	0	TravelData.EU
ビーチリゾート	1	TravelData.Beach

　この処理をプログラミングするため、default.jsを開き、次のように修正します。

ListViewコントロールの表示（default.jsの抜粋）

(function () {
    "use strict";
    ～中略～
    app.onactivated = function (args) {
             ～中略～

            // 連載 第5回   ListViewコントロール表示
            showInfo();
            var list1 = document.getElementById("area");
            list1.addEventListener("change", showInfo, false);
        }
    };
    ～中略～

    // 連載 第5回   ListViewコントロール表示
    function showInfo() {
        var listViewControl = document.getElementById("travel-list").winControl;
        //  1. 旅行先(area)のリストボックスの値に応じて表示データを切り替える
        if (area.selectedIndex == 0) {
            listViewControl.itemDataSource = TravelData.EU.dataSource;
        } else {
            listViewControl.itemDataSource = TravelData.Beach.dataSource;
        }
    }
    app.start();
})();

　追加したプログラムの説明は次のとおりです。

1.リストボックスの値に応じて表示データを切り替える

　リストボックスで選択された項目のIndex値（area.selectedIndex）に応じて、ListViewコントロールで表示させるデータを切り替えます。

　まず、ListViewコントロールで表示するデータは、itemDataSourceプロパティで設定します。今回のサンプルで作成したリストボックスの値と、表示させたいデータは次のとおりです。

リストボックスの値と表示データ

リストボックスのIndex値	リストボックスの値	表示データ（名前空間.名前）
0	ヨーロッパ	TravelData.EU
1	ビーチリゾート	TravelData.Beach

　そこで、area.selectedIndexの値が0のとき、つまりヨーロッパが選択されているときは、ListViewコントロールで表示するデータをヨーロッパのものにします。そのため、ListViewコントロールのitemDataSourceの値を、TravelDataという名前空間のEUというデータにします。

　また、area.selectedIndexの値が0以外のときは、同様にしてListViewコントロールのitemDataSourceの値を、TravelDataという名前空間のBeachというデータにします。

　これでプログラミングは終わりましたので、［F5］キーを押してデバッグを行ってください。次のように、ListViewコントロールに配置された旅行先情報が表示されます。

旅行カタログの実行例

（応用）チャレンジしてみよう

　今回はストアアプリでのプログラミングを行いました。余力のある人は、今回作成したWindowsストアアプリを、JavaScriptやHTML5のリファレンスなどを参照して、自由にカスタマイズしてみてください。

• ListViewコントロールのサイズや配置を変更する
• ヨーロッパとビーチリゾート以外の旅行先を追加する

おわりに

　今回は、サンプルで作成した旅行カタログアプリに、旅行先の写真などの情報を表示しました。これを通して、ストアアプリの代表的なコントロールであるListViewコントロールの使い方をご紹介しました。

　次回の記事では、この旅行カタログに旅行先の地図を表示するため、Web APIを使ったプログラミングについて説明します。また、Winodow 8.1に対応したアプリケーションの作成方法もご紹介する予定です。