back
リストビューとフリップビュー (5/5)
■フリップビューを使おう！
リストビューは、すべてのデータをリスト表示するものでした。が、すべてを一覧表示する他にも、データを表示するためのコントロールは用意されています。リストビューとともに重用されるのが「フリップビュー（FlipView）」というものでしょう。
これは、データを１つずつ順番に表示していくためのものです。基本的な使い方はリストビューとほとんど同じです。以下にタグの基本形を整理しておきましょう。
※フリップビューのタグ
※テンプレートのタグ
注意したいのは、「現在、選択されているデータ」の取得方法でしょう。これはListViewとは微妙に違っています。FlipViewには「currentPage」というプロパティが用意されています。これは、現在表示しているページ（データのインデックス番号）を示すものです。ですから、このcurrentPageの値を取得し、データからそのインデックスの連想配列を取り出すことで、現在のデータを知ることができます。
下にフリップビューの利用例を上げておきました。先ほどのリストビューのデータをそのままフリップビューにしただけで、ほとんど同じものです。左右の移動ボタンをクリックするとデータが切り替わり、表示されたデータの内容がその上に出力されます。
リストビューとフリップビューは基本的な使い方はほぼ同じで、単に見せ方が違うだけです。セットで覚えておくようにしましょう。
これは、データを１つずつ順番に表示していくためのものです。基本的な使い方はリストビューとほとんど同じです。以下にタグの基本形を整理しておきましょう。
※フリップビューのタグ
<div id="flipview1"
data-win-control="WinJS.UI.FlipView"
data-win-options="{itemDataSource:データ,
itemTemplate:テンプレート }">
</div>
※テンプレートのタグ
<div data-win-control="WinJS.Binding.Template">見ればわかるように、リストビューと全く同じですね。違いは、data-win-controlに「WinJS.UI.FlipView」を指定しているだけです。テンプレートの使い方も全く同じです。これで、用意したテンプレートを使い、フリップビューが表示されるようになります。起動時には最初のデータが表示され、自動生成される左右に移動するボタンをクリックして次々とデータを移動できます。
……表示する内容を用意する……
</div>
注意したいのは、「現在、選択されているデータ」の取得方法でしょう。これはListViewとは微妙に違っています。FlipViewには「currentPage」というプロパティが用意されています。これは、現在表示しているページ（データのインデックス番号）を示すものです。ですから、このcurrentPageの値を取得し、データからそのインデックスの連想配列を取り出すことで、現在のデータを知ることができます。
下にフリップビューの利用例を上げておきました。先ほどのリストビューのデータをそのままフリップビューにしただけで、ほとんど同じものです。左右の移動ボタンをクリックするとデータが切り替わり、表示されたデータの内容がその上に出力されます。
リストビューとフリップビューは基本的な使い方はほぼ同じで、単に見せ方が違うだけです。セットで覚えておくようにしましょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※修正したHTMLタグ
<body>
<h1 id="title">Sample Page</h1>
<p id="msg">this is list sample page.</p>
<div id="flipTemp1" data-win-control="WinJS.Binding.Template">
<div style="width: 300px; height:250px; background-color:blue">
<div data-win-bind="textContent: title" style="font-size:18pt;"></div>
<div data-win-bind="textContent: content" style="font-size:14pt;"></div>
</div>
</div>
<div id="flipview1" data-win-control="WinJS.UI.FlipView"
style="width: 350px; height:250px;"
data-win-options="{itemDataSource:mydata.itemList.dataSource, itemTemplate:select('#flipTemp1')}">
</div>
</body>
※修正したスクリプト
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
// ListView用のデータ
var dataArray = [
{ title: "Windows", content: "WindowsはマイクロソフトのOSです。" },
{ title: "Mac OS X", content: "Mac OS Xはアップルが提供するOSです。Macにのみ搭載されています。" },
{ title: "Linux", content: "LinuxはオープンソースのOSです。標準搭載されるPCはまだ少数です。" },
{ title: "Android", content: "AndroidはGoogleが開発するOSです。スマートフォンやタブレット他、多数の危機に用いられています。" },
{ title: "iOS", content: "iOSはアップルのOSです。iPhone/iPadに搭載されています。" },
{ title: "Chrome OS", content: "Chrome OSはGoogleによるOSです。Chromebookに搭載される他、オープンソースで配布されてもいます。" }
];
var dataList = new WinJS.Binding.List(dataArray);
var members = { itemList: dataList };
WinJS.Namespace.define("mydata", members);
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.
ApplicationExecutionState.terminated) {} else {}
args.setPromise(WinJS.UI.processAll().then(function completed() {
var flip = document.getElementById("flipview1");
flip.addEventListener("click", flip1Action);
}));
}
}
app.oncheckpoint = function (args) {};
// ※追加した関数
function flip1Action(event) {
var obj = event.currentTarget.winControl;
var n = obj.currentPage;
var h = document.getElementById("title");
h.textContent = dataArray[n].title;
var p = document.getElementById("msg");
p.innerHTML = dataArray[n].content;
}
app.start();
})();
| << 前へ |