11.3.3 导航模型
几乎每个网站都会提供一个导航方式，但是通常使用超链接的形式，当用户单击时，会浏览不同的页面。每个页面都有自己的一套Javascript函数和数据，一套新的要显示的HTML文件，样式信息或者其他信息。这种导航成为多页面导航（multi-page navigation）。
另一个导航模型就是单页面导航，为应用程序使用单一页面，并且为页面加载必要的数据。仍然需要将应用程序划分为多个文件，但是与从一个页面到另一个页面不同的是，应用程序将其他文档加载到主页面中。因为应用程序的主页面不会卸载，这样就可以很容易的管理页面状态、过渡和动画。建议嵌有Javascript 脚本的Metro风格的应用程序使用单页面导航模型。
下面列举了一些控件，可以使用这些控件将需要的内容传递到主页面中：
q 可以使用DOM从另一个源文件中加载文档
q 对于简单的HTML内容（内容不与用户交互和不含脚本引用），使用HTMLControl
q 对于外部页面，使用iframe对象
q 对其他所有的内容，使用Page控件
Visual Studio 11提供了一些新的项目模板，这些模板可以更加使导航控制更加容易。Grid Application， Split Application和 Navigation Application模板提供了PageControlNavigator的导航控件，可以使用它来在不同的Page控件中进行导航。PageControlNavigator类说明：可以使用Page控件可以更方便实现单页面导航。
11.3.4创建Page控件，使用单页面导航模型
1.创建导航应用项目
1）运行Visual Studio 11。
2）在Start Page标签中，单击New Project，会弹出创建New Project对话框。
3）在Install面板，展开JavaScript并且选中Windows Metro Style模板类型。可用的JavaScript项目模板会在对话框的中央显示。.
4)在面板中央，选择Navigation Application项目模板。
5）在Name Text box中，为项目重命名，在本话题中使用“NavigationAppExample”作为项目名字。
6）点击OK就可以创建一个项目，这可能需要花一些时间。
可以浏览新创建的项目的内容，新创建的NavigationApplication项目包含开始页面，和一些支持文件。如下图11-1所示。
新创建的NavigationApplication项目包含以下HTML文件：
q default.html，这是一个起始页面，它首先被加载，包含一个PageControlNavigator（将每个页面加载到主窗体中）实例和创建AppBar的位置。
q homepage.html，这是一个主页，可以显示Welcome标题。
新建的项目包含以下JavaScript文件：
q default.js，这个文件指定了当程序运行时的动作。
q homepage.js，指定了一些与主页相关联的行为。
q navigator.js,,这个文件使得PageControlNavigator对象支持使用Metro风格的应用程序的JavaScript模板，作为导航模板。
新建的项目包含以下CSS文件：
q default.css，这个文件为主页的内容和整体的应用程序指定了一个CSS样式。
q homepage.css，这个文件为主页设定了一个CSS样式。
这个项目还包括package.appxmanifest文件：
这个文件用来描述Window的应用程序包。这个项目还包括几个图片文件，例如：splashscreen.png作为屏幕的斑点画面，用来做Windows Store。
运行应用程序，可以显示文本“Welcome to NavigateAppExample”和“Content goes here”如图11-2所示：
图11-2 创建导航程序运行效果图
注意：上面看到的内容不是在default.html中定义的，是在homePage.html中定义的，这是一个单独的页面。PageControlNavigator从主页中获得内容然后在default.html中显示。
下面是一个default.html页面的完整标记：
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavigationAppExample</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- NavigationAppExample references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
<script src="/js/navigator.js"></script>
</head>
<body>
<!—加载并显示主页. -->
<div id="contenthost"
data-win-control="NavigationAppExample.PageControlNavigator"
data-win-options="{home: '/html/homePage.html'}">
</div>
</body>
</html>
图11-3展示了在应用程序窗口中显示的不同的部分。
图11-3 default.html与homePage.html的显示效果图
2.创建Page控件
1）在解决方案资源管理器中，右键单击html文件夹然后选择Add > New Item。
2）选择HTML Page Control并且命名为Page2.html.
3）单击Add创建页面，Visual Studio会自动创建三个文件：page2.html，page2.js和 page2.css表示一个Page控件。
3.定制页面
需要修改新建的Page使得其可以显示不同的信息并且可以显示一周的日期。
定制页面操作步骤：
1）打开page2.html。
Page模板创建了HTML页面。这个页面包含页眉部分（包含Back按钮），还包含用于网页Main content部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page2</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<link href="page2.css" rel="stylesheet">
<script src="page2.js"></script>
</head>
<body>
<div class="page2 fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to page2</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<p>Content goes here.</p>
</section>
</div>
</body>
</html>
2）用下面的代码替换main content部分。
<section aria-label="Main content" role="main">
<p>Page controls make it easy to divide your app into modular portions.</p>
<p>Today is <span id="datePlaceholder"></span>.</p>
</section>
现在page2.html文件应该像下面一样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page2</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<link href="page2.css" rel="stylesheet">
<script src="page2.js"></script>
</head>
<body>
<div class="page2 fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to page2</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<p>Page controls make it easy to divide your app into modular portions.</p>
<p>Today is <span id="dayPlaceholder"></span>.</p>
</section>
</div>
</body>
</html>
3）打开page.js 文件。
Page 控件包含一些预定义函数，可以在预定义命令中自动被调用。Page的项模板为用户提供了Ready和updateLayout函数。
当应用程序的视图状态发生改变时，PageControlNavigator会调用updateLayout方法。例如：当应用程序在竖树屏，快照，全屏和填充视图之间进行切换时，这个方法就会被调用。只有在页面的DOM（文档对象模型）加载时，控件才被激活，并且只有页面加载到main DOM时，Ready方法才被调用。注意，Page控件支持为页面的循环周期添加额外的函数。
下面是Page 模板创建的page.js文件：
// page2.js
(function () {
"use strict";
// 当用户导航到这个页面时这个函数将被调用。它使用应用程序数据填充页面元素
function ready(element, options) {
// TODO: Initialize the fragment here.
}
function updateLayout(element, viewState) {
// TODO: Respond to changes in viewState.
}
WinJS.UI.Pages.define("/html/page2.html", {
ready: ready,
updateLayout: updateLayout
});
})();
修改ready函数使其可以检索在11.4.4.2中创建的span，并且设置innerText的值为当前日期值。
// page2.js
(function () {
"use strict";
// 当用户导航到这个页面时这个函数将被调用。它使用应用程序数据填充页面元素
function ready(element, options) {
// TODO: 在此处初始化fragment。
var dayPlaceholder = document.querySelector("#dayPlaceholder");
var calendar = new Windows.Globalization.Calendar();
dayPlaceholder.innerText =
calendar.dayOfWeekAsString();
}
function updateLayout(element, viewState) {
// TODO: Respond to changes in viewState.
}
WinJS.UI.Pages.define("/html/page2.html", {
ready: ready,
updateLayout: updateLayout
});
})();