HTML and CSS Reference
In-Depth Information
<!-- Flickr Photo Viewer references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/flickrApp.js"></script>
</head>
<body>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/header.html'}"></div>
<h1>Flickr Viewer (CH11)</h1>
<br />
<input type="text" placeholder="Subject" id="subject" value="" />
<button id="buttonSearch">Search</button>
<div id="picturesList" data-win-control="WinJS.UI.ListView">
</div>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/footer.html'}"></div>
</body>
</html>
In addition to the usual markup, the page contains a Windows 8 ListView bound to a DIV element
named picturesList . An input text box and a button have been added to let users of your application
type in keywords to select corresponding pictures.
The Search button needs a click handler; add it in the flickrApp.init method, as shown below:
flickrApp.init = function () {
document.getElementById("buttonSearch")
.addEventListener("click", flickrApp.searchClick);
}
The click handler will be responsible for placing the HTTP call to the Flickr web service and
processing the JSON data it receives in response.
Looking at the Flickr public feed
In this example, you will access the public photo feed of Flickr, which requires neither authentication,
nor any Flickr-specific application ID. All you need to know here is the URL to call. As in the first
exercise of this chapter, you save it to a member on the global lickrApp object:
flickrApp.Source = "http://api.flickr.com/services/feeds/photos_public.gne" +
"?tagmode=any&format=json&nojsoncallback=1&tags='{0}'";
Search WWH ::




Custom Search