HTML and CSS Reference
In-Depth Information
Adding pictures to the user interface
To display the retrieved pictures, you can use a Windows 8 ListView . In default.html you already have
a DIV element bound to the ListView component. The next step consists of binding the ListView to a
data source and defining an item template.
Because you just want to display pictures, the HTML item template can be simple, as shown below:
<div id="picturesItemTemplate"
data-win-control="WinJS.Binding.Template" style="display: none;">
<div class="listItem">
<img id="picture" data-win-bind="src: photoUrl" alt="" />
The src attribute of the IMG element is bound to the photoUrl property of the bound data object.
You add the template at the beginning of the body for the default.html page.
As you did in the first exercise of this chapter, you also define a binding list object at the top of the
flickrApp.js ile:
WinJS.Namespace.define("FlickrFeed", { Pictures: new WinJS.Binding.List() });
You populate the list during the enumeration of the JSON content.
flickrApp.parseFeed = function (json) {
var pictures = JSON.parse(json);
for (var i = 0; i < pictures.items.length; i++) {
var pictureElement = {};
pictureElement.photoUrl = pictures.items[i].media.m;
// Add the object to the listview
Finally, you bind the ListView to the FlickrFeed.Pictures list. In default.html you add the following
<div id="picturesList" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: FlickrFeed.Pictures.dataSource,
itemTemplate: picturesItemTemplate,
layout: {type: WinJS.UI.GridLayout} }">
Search WWH ::

Custom Search