リストボックスの値によって表示データを切り替える
最後に、リストボックスの値によって表示するデータを切り替えられるようにプログラミングします。今回の旅行カタログアプリでは、前回の連載で画面の右側（main-right要素内）に旅行先を選択できるリストボックスをあらかじめ配置しています。そこで、このリストボックスの選択値によって、カタログに表示するデータを切り替えます。
| 値 | Index値 | 表示するデータ |
|---|---|---|
| ヨーロッパ | 0 | TravelData.EU |
| ビーチリゾート | 1 | TravelData.Beach |
この処理をプログラミングするため、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に対応したアプリケーションの作成方法もご紹介する予定です。
