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
});
})();