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

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

作成:2012-11-17 15:54
更新:2012-11-17 16:11

■データ表示とリストビュー

Windows 8のUIでもっともインパクトがあるのは、スタート画面などで用いられている「横スクロールリスト」でしょう。左右にスクロールしてパネルが表示されていく姿はなかなか感動的です。

この「多数の項目を横スクロールして表示する」というUIを実現するのが「リストビュー」と呼ばれるコントロールです。これは、WinJS.UI.ListViewというオブジェクトとして用意されています。以下のような形でタグを記述して利用します。
<div data-win-control=
    "WinJS.UI.ListView"
    data-win-options="オプションの設定"></div>
data-win-control属性に「WinJS.UI.ListView」を指定することで、リストビューのタグとして認識されるようになります。ただし! これは、あくまで「作成されたリストを表示するためのタグ」でしかありません。要するに、「ただの入れ物」部分なのです。具体的にどのような内容のものを表示するかは、別に指定する必要があります。

リストビューに表示される中身は、大きく分けて2つのものから構成されます。1つは、表示するデータですね。そしてもう1つは、そのデータを表示するのに用いるテンプレートです。

リストビューでは、ある値をずらっと表示するだけ、というようなシンプルな使い方ばかりするわけではありません。さまざまな値で構成されるデータをうまくまとめて表示することが圧倒的に多いでしょう。そこで、データとは別にテンプレートを用意し、両者を組み合わせてリストを作成するようになっているのです。

これは、データベースのようなものを想像するとわかりやすいでしょう。データベースでは「テーブル」を定義し、そこにレコードを保存していきますね? 例えば個人情報のテーブルなら、名前・住所・電話番号・メールアドレスといった項目があり、それらをセットで保管していくわけです。となると、このデータを表示する場合には、名前・住所・電話番号・メールアドレスといった値をひとまとめにしたテンプレートを用意し、これを使って1つ1つのレコードをリストに組み込んでいくわけです。

ということは、リストに表示される各項目は、すべて同じ形式になる、ということを忘れてはいけません。1つ1つの項目の表示内容がてんでバラバラになるようなものは、テンプレートを使ったやり方ではうまく作れません。リストビューは基本的に「定形データをレイアウトするためのもの」なのです。

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

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

※関連コンテンツ

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