HTML and CSS Reference
In-Depth Information
However, when you get your JSON data from a remote source, you can only control the
deserialization portion of the full data cycle. Unfortunately, this doesn't mean that you need to do
only half the work. Although commonly used and close to a de facto standard state, JSON is not an
exact science. As you'll see in this exercise, there's always the risk that you will get invalid JSON. When
that's the case, you're responsible for fixing it.
Laying out a Flickr viewer
In this exercise, you'll build an application that retrieves and displays public photos from the
popular website Flickr. Links to photos, and related information such as author and description are
downloaded as a JSON string and then rendered using a ListView component.
Setting up the Flickr Viewer app
Create a new Blank App project and name it FlickrPhotoViewer . After adding the usual new Pages
folder with header.html and footer.html files (as you did in previous exercises), open up the default.js ile
and add the usual handler for the onready event. Using that method, you can control the application's
initialization, as shown below:
app.onready = function (args) {
The next step is to add a new JavaScript file to the project named flickrApp.js. . Initially, the file will
contain only the following:
var flickrApp = flickrApp || {};
flickrApp.init = function () {
// More to go here
Now turn your attention to the user interface of the application and open default.html . Make sure
it contains the following markup:
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Flickr Photo Viewer</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
Search WWH ::

Custom Search