リストビューとフリップビュー (1/5)
作成:2012-11-17 15:54
更新:2012-11-17 16:11
更新:2012-11-17 16:11
■データ表示とリストビュー
Windows 8のUIでもっともインパクトがあるのは、スタート画面などで用いられている「横スクロールリスト」でしょう。左右にスクロールしてパネルが表示されていく姿はなかなか感動的です。
この「多数の項目を横スクロールして表示する」というUIを実現するのが「リストビュー」と呼ばれるコントロールです。これは、WinJS.UI.ListViewというオブジェクトとして用意されています。以下のような形でタグを記述して利用します。
リストビューに表示される中身は、大きく分けて2つのものから構成されます。1つは、表示するデータですね。そしてもう1つは、そのデータを表示するのに用いるテンプレートです。
リストビューでは、ある値をずらっと表示するだけ、というようなシンプルな使い方ばかりするわけではありません。さまざまな値で構成されるデータをうまくまとめて表示することが圧倒的に多いでしょう。そこで、データとは別にテンプレートを用意し、両者を組み合わせてリストを作成するようになっているのです。
これは、データベースのようなものを想像するとわかりやすいでしょう。データベースでは「テーブル」を定義し、そこにレコードを保存していきますね? 例えば個人情報のテーブルなら、名前・住所・電話番号・メールアドレスといった項目があり、それらをセットで保管していくわけです。となると、このデータを表示する場合には、名前・住所・電話番号・メールアドレスといった値をひとまとめにしたテンプレートを用意し、これを使って1つ1つのレコードをリストに組み込んでいくわけです。
ということは、リストに表示される各項目は、すべて同じ形式になる、ということを忘れてはいけません。1つ1つの項目の表示内容がてんでバラバラになるようなものは、テンプレートを使ったやり方ではうまく作れません。リストビューは基本的に「定形データをレイアウトするためのもの」なのです。
この「多数の項目を横スクロールして表示する」というUIを実現するのが「リストビュー」と呼ばれるコントロールです。これは、WinJS.UI.ListViewというオブジェクトとして用意されています。以下のような形でタグを記述して利用します。
<div data-win-control=data-win-control属性に「WinJS.UI.ListView」を指定することで、リストビューのタグとして認識されるようになります。ただし! これは、あくまで「作成されたリストを表示するためのタグ」でしかありません。要するに、「ただの入れ物」部分なのです。具体的にどのような内容のものを表示するかは、別に指定する必要があります。
"WinJS.UI.ListView"
data-win-options="オプションの設定"></div>
リストビューに表示される中身は、大きく分けて2つのものから構成されます。1つは、表示するデータですね。そしてもう1つは、そのデータを表示するのに用いるテンプレートです。
リストビューでは、ある値をずらっと表示するだけ、というようなシンプルな使い方ばかりするわけではありません。さまざまな値で構成されるデータをうまくまとめて表示することが圧倒的に多いでしょう。そこで、データとは別にテンプレートを用意し、両者を組み合わせてリストを作成するようになっているのです。
これは、データベースのようなものを想像するとわかりやすいでしょう。データベースでは「テーブル」を定義し、そこにレコードを保存していきますね? 例えば個人情報のテーブルなら、名前・住所・電話番号・メールアドレスといった項目があり、それらをセットで保管していくわけです。となると、このデータを表示する場合には、名前・住所・電話番号・メールアドレスといった値をひとまとめにしたテンプレートを用意し、これを使って1つ1つのレコードをリストに組み込んでいくわけです。
ということは、リストに表示される各項目は、すべて同じ形式になる、ということを忘れてはいけません。1つ1つの項目の表示内容がてんでバラバラになるようなものは、テンプレートを使ったやり方ではうまく作れません。リストビューは基本的に「定形データをレイアウトするためのもの」なのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ
「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る