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

FIGURE 7-4 The Navigation App project.
Another difference from the Blank App template is the navigator.js file. The file contains the
implementation of the Application.PageControlNavigator object. You can consider this file as an
extension of the native WinJS library.
Note If you open up the default.js file, and compare it to the same file you get with
a Blank App, you see some differences too. In particular, the file contains the logic
that automatically navigates to the URL pointed to by the home property of the
PageControlNavigator object.
Setting up the home screen
The default.html determines the main user interface of the application. It contains the following code:
<div id="contenthost"
data-win-control="Application.PageControlNavigator"
data-win-options="{home: '/pages/home/home.html'}">
</div>
This code sets up the navigator and makes it point to home.html as the provider of the fragment
for the initial screen. To arrange the home screen, you make changes to default.html . For example,
you can add the same header.html and footer.html files that you created in the previous chapter to the
pages folder. Next, you edit the BODY of default.html, as shown below:
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/header.html'}"></div>
<h1 class="title">My Pet Gallery</h1>
<div id="contenthost"