参照 引用
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh700356.aspx
準備»
- ListViewのコントロールをHTMLに準備する
<div id="basicListView"
data-win-control="WinJS.UI.ListView">
</div>
データの定義»
- データオブジェクトを作成する（/js/dataExample.js）
(function () {
"use strict";
var dataArray = [
{ title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
{ title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
{ title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
{ title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
{ title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
{ title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
{ title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
];
})();
var dataList = new WinJS.Binding.List(dataArray);
- 名前空間を宣言し、パブリック メンバーとして List を追加して、List を公開
// Create a namespace to make the data publicly
// accessible.
var publicMembers =
{
itemList: dataList
};
WinJS.Namespace.define("DataExample", publicMembers);
作ったコードは匿名関数でカプセル化されているので、パブリックにアクセスすることはできません。これは匿名関数を使う理由の 1 つで、プライベート データの機密性を確保するためです。ListView から List にアクセスするには、パブリックにアクセスできるようにする必要があります。そのためには、WinJS.Namespace.define 関数を使って名前空間を作成し、そのメンバーの 1 つとして List を追加する方法があります。
この例では、List を返す itemList という名前のパブリック メンバーを公開する、DataExample という名前の名前空間を作成します。
これで、ListView からアクセスできるデータ ソースが作成されました。 次に、データを ListView に接続します。
ListView(HTML)へのデータ(JS)の接続»
- ListView が含まれている HTML ファイルの head セクションに、作成したデータ ファイル (dataExample.js) への参照を追加
<script src="/js/dataExample.js"></script>
itemDataSource プロパティは IListDataSource オブジェクトを受け取ります。
List オブジェクトは IListDataSource ではありませんが、
それ自体の IListDataSource バージョンを返す dataSource プロパティを持っています。
<div id="basicListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>
http://msdn.microsoft.com/ja-jp/library/windows/apps/br211837.aspx
WinJS.UI.List.View
Applies to: Windows Store apps only
Displays data items in a customizable list or grid.
Syntax
<div data-win-control="WinJS.UI.ListView"></div>
var object = new WinJS.UI.ListView(parentObject, options);
Members
The ListView object has these types of members:
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh700703.aspx
ListView.itemDataSource property
Gets or sets the data source that provides the ListView with items.
Syntax
<div data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : value}" />
var itemDataSource = listView.itemDataSource;
listView.itemDataSource = itemDataSource;
Property value
Type: IListDataSource
An IListDataSource that represents the data source from which the data-bound control retrieves its data. The default value is null
ここまででアプリを実行してもデータオブジェクトの文字列がリスト表示されるのみ。
表示しようとしたとおりにレンダリングするには、Template を定義する必要があります。
項目テンプレートの定義
各リスト項目の表示に使うマークアップを含む項目テンプレートが必要です。
テンプレートを作成する方法（２種類）
マークアップを使って WinJS.Binding.Template を定義する方法»
各リスト項目の表示に使うマークアップを定義し、各データ フィールドの表示場所を指定する。
HTML で WinJS.Binding.Template コントロールを作成し、ID を割り当てます。この例では ID “mediumListIconTextTemplate” を使います。
注 ：テンプレートを使う前に定義する必要があるので、ListView の HTML の”前”に、テンプレートの HTML を追加します。
テンプレートのコンテンツの親として機能する div 要素を作成します。
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
</div>
この例では、テンプレート内の項目を、対応するデータ フィールドにバインドします。
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div style="width: 150px; height: 100px;">
<!-- Displays the "picture" field. -->
<img src="#" style="width: 60px; height: 60px;"
data-win-bind="alt: title; src: picture" />
<div>
<!-- Displays the "title" field. -->
<h4 data-win-bind="innerText: title"></h4>
<!-- Displays the "text" field. -->
<h6 data-win-bind="innerText: text"></h6>
</div>
</div>
</div>
項目（アイテム)テンプレートを使うには、select 構文を使って、
ListView の itemTemplate プロパティに使う項目テンプレートを設定します。
<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource : DataExample.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate')}">
</div>
これで、アプリを実行すると、バインドされたデータがリストに表示されるようになりました。
ListView のスタイル指定
- ListView では、高さを動的に調整してコンテンツに合わせることはできません
- ListView をレンダリングする場合は、高さの”絶対値を指定する”必要があります。
JavaScript 用 Windows ライブラリのスタイル シートでは、ListView コントロールの高さが 400 ピクセルに設定されます。
ただし、独自の CSS を作成して既定のスタイルを上書きし、独自のスタイルを簡単に指定できます。
次の CSS をアプリの CSS ファイルに追加して、ListView の高さと幅を設定し、境界線を追加します。
- win-listview は JavaScript 用 Windows ライブラリで定義されるクラスで、ListView のスタイル指定に使うことができます。
.win-listview
{
height: 500px;
width: 500px;
border: 2px solid gray;
}
- 特定の ListView だけを変更するには、ListView コントロールをホストする div 要素の ID をセレクター要素に追加します。
#basicListView.win-listview
{
height: 500px;
width: 500px;
border: 2px solid gray;
}
項目のスタイル指定
前の例では、インライン スタイルと JavaScript 用 Windows ライブラリのクラスを使って、ListView とその項目のスタイルを指定しました。
ListView では、左側、上側、下側の余白はサポートされますが、右側の余白は指定できません。1 つの回避策として、右側に設ける余白の幅と同じ幅の要素を追加し、その style.visibility プロパティを “none” に設定して、その要素を ListView の右側に追加する方法があります。
項目テンプレートのスタイルを指定する CSS クラスを使うこともできます。
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="mediumListIconTextItem">
<img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
<div class="mediumListIconTextItem-Detail">
<h4 data-win-bind="innerText: title"></h4>
<h6 data-win-bind="innerText: text"></h6>
</div>
</div>
</div>
この例では、定義してあったインライン スタイルを削除し、CSS クラスが追加されています。
これらのスタイルをアプリの CSS に追加します。
.mediumListIconTextItem
{
width: 282px;
height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
.mediumListIconTextItem img.mediumListIconTextItem-Image
{
width: 60px;
height: 60px;
margin: 5px;
-ms-grid-column: 1;
}
.mediumListIconTextItem .mediumListIconTextItem-Detail
{
margin: 5px;
-ms-grid-column: 2;
}
この ListView の外観は次のようになります。
あ
