Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 153

application, you might want to get all pictures from the local disk or perhaps from Flickr. For the
exercise to work, you need to have five .png image files ready and add them under the images folder
of the project. To keep these images distinct from all other images you usually have in the project
(logo files, for example), it is advisable that you also create a data subfolder under images and copy
the files there.
Note There is no special reason why the images are .png files. You can use .jpg or . gif
images as well. If you use .png files, however, then you can give them a transparent
background with some ad hoc tool such as Paint.NET, which produces a much nicer
graphical effect. Also, note that when you build galleries of pictures you might want to
ensure that all the pictures are the same size. In the example, they're all 250 x 250 pixels.
Creating the FlipView component
To add the FlipView component, you open the home.html file and make sure it contains the following
code in the BODY element:
<div class="fragment homepage">
<h1>My Pet Gallery</h1>
<div id="gallery"
data-win-control="WinJS.UI.FlipView">
</div>
</div>
This code just gets you a new instance of the FlipView component. The next step consists of
binding it to some photos. You open the gallery.js file and add the following code to it:
var Gallery = WinJS.Class.define(function (arrayOfPhotos) {
var that = {};
that.photos = new WinJS.Binding.List(arrayOfPhotos);
return that;
});
Next, you edit the previously created Gallery.init method, as shown below:
GalleryApp.init = function () {
var photos = [
new Photo("images/data/german-sheperd.png", "German sheperd"),
new Photo("images/data/tiger.png", "Just bigger than a cat"),
new Photo("images/data/lion.png", "Just hairier than a cat"),
new Photo("images/data/leopard.png", "Running as a leopard"),
new Photo("images/data/dane.png", "Hungry from Denmark")
];
GalleryApp.Gallery = new Gallery(photos);