HTML and CSS Reference
In-Depth Information
Building a video clip gallery
After having built an image gallery, let's go ahead and try to build a video gallery while using a
different control to organize navigation. To be precise, in this new exercise there will be navigation
but it will be embedded in a new component—the SemanticZoom component. The application will
group clips by category and show the available clips once the user has made a selection. Finally,
clicking the clip will play the video.
Note The SemanticZoom component only provides a fixed form of navigation through
some content in a master/detail way. The application programming interface (API) for
navigation you discovered in the previous exercise is, instead, a more powerful and
general-purpose API for navigating between any number of pages and at any number of
nesting levels.
Introducing the SemanticZoom component
As you rely on the built-in capabilities of a specific component to switch between master and detail
view, there's no need to start from a Navigation App template. Let's create a new Blank App project
and name it Video . As usual, you might want to add header.html and footer.html and make edits to
default.css, so that the look and feel of the application is the same as other examples. In particular,
you might want to import into default.css the styles for HEADER, FOOTER , and BODY elements that
you used for all past examples.
Important Unless otherwise noted, adding header.html, footer.html, and making
related changes to default.css will be considered a required preliminary step for any
of the upcoming exercises. Note also that you probably won't experience any major
inconvenience if you miss it—at worst, you'll run into some graphical inconsistencies!
Another aspect of nearly all Windows Store applications that will be taken for granted in
the rest of exercises is the way in which startup code is injected in the application. So far,
you added a then function call to the activation event handler in default.js . A neater, but
functionally equivalent, way of doing the same thing is the following:
app.onready = function (args) {
You place this code in the immediate function that the default.js file is usually made of.
From within the onready function, you simply call the init function on the application
speciic object you create for the exercise. A standard pattern of all exercises in the topic
is having most script gathered in a single JavaScript file with an init function to do all the
initialization work.
Search WWH ::

Custom Search