Windows 8 应用的页面导航(4)

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所示。

图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

});

})();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值