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) {
flickrApp.init();
};
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>
<html>
<head>
<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