Windows 存储应用程序的PageControl对象和导航

分享于 

49分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

你在前面的教程中创建的"你好,世界"应用程序只包含一页内容。 大多数现实世界的应用程序包含多个页面。 本文将在一个新应用程序中复制代码,该应用程序将使用导航应用程序模板,然后添加额外的页面。

了解如何:

在开始前

  • 这是本系列的第三篇。 在开始本教程之前,请阅读第 2部分: 管理应用程序生命周期和状态管理。 我们从你为第 2部分创建的代码开始。

关于 Windows 商店应用程序中的导航

几乎每个网站都提供了一些形式的导航,通常以超链接形式单击以转到不同的页面。 每个页面都有自己的JavaScript函数和数据集。一组新的HTML显示。样式信息等。 这里导航模型称为多页面导航。 这个设计对大多数网站都很好,但是它可能会导致应用程序出现问题。

另一个导航模型是单页面导航插件,你可以在应用程序中使用单个页面,并根据需要将额外的数据加载。 你仍然将应用程序分割为多个文件,而不是从页面移动到页面,应用程序将其他文档加载到主页面。 因为你的应用程序页面的主要部分从未卸载过,所以永远不会卸载脚本,这使得管理状态。转换或者动画变得更。 我们建议 Windows 商店应用使用单一页面导航模型。

为了帮助你创建使用单页面导航模型的应用程序,JavaScript的Windows 库提供了收费的WinJS.UI.Pages.PageControl 对象。 此外,还有导航应用程序项目模板,它提供了一些额外的导航基础设施。 在下一步中,你将使用这里模板创建新项目。

步骤 1: 在 Visual Studio 中创建一个新的导航应用程序

让我们创建一个名为HelloWorldWithPages的新应用程序,它使用导航应用程序模板。 以下是操作方法:

  • 为 Windows 8启动 Microsoft Visual Studio Express 2012.
  • 菜单选择新项目

将显示项目 dialog。 对话框的左窗格可以让你选择要显示的模板类型。

  • 将所有模板设置为 ,然后展开 Windows,然后选择存储模板类型。 对话框窗格的中心显示了用于JavaScript的项目模板列表。

对于本教程,我们使用导航应用程序模板。

  • 在中间窗格中,选择导航应用程序模板。
  • 名称文本框中,输入"helloworldwithpages"。
  • 取消选中解决方案 Create的创建目录。

  • 单击 ok以创建项目。

Visual Studio 创建项目并将它的显示在解决方案资源管理器中。

注意,新的导航应用程序包含的文件数比"你好,世界"应用程序要多一些。 让我们看一下这些新文件:

  • /pages/home/home.css,/pages/home/home. html,和/pages/home/home.js

这三个页面为应用程序页面的主页定义了一个的PageControl。 用HTML文件。JavaScript文件和CSS文件构成了一个收费的。 PageControl是一个模块化的HTML,CSS和JavaScript模块,可以导航到( 像一个HTML页面) 或者作为自定义控件。 你可以使用 PageControl 对象将大型应用程序分成更小,更易于管理的部分。

PageControl 对象支持多种方法,使应用于应用程序比使用松散 HTML。CSS和JavaScript页面更容易。 你将在以后的步骤中进一步了解这些方法。

  • /js/navigator.js

这个文件提供了 PageControlNavigator helper 类,你可以使用它来显示 PageControl 对象并在它们之间导航。 你不需要显示一个收费的PageControl,但是它可以让使用起来更容易。

让我们看一下你的新应用程序的default.html 页面:

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>HelloWorldWithPages</title><!-- WinJS references --><linkhref="http://www.codeproject.com/Microsoft.WinJS.1.0/css/ui-dark.css"rel="stylesheet"/><scriptsrc="http://www.codeproject.com/Microsoft.WinJS.1.0/js/base.js"></script><scriptsrc="http://www.codeproject.com/Microsoft.WinJS.1.0/js/ui.js"></script><!-- HelloWorldWithPages references --><linkhref="http://www.codeproject.com/css/default.css"rel="stylesheet"/><scriptsrc="http://www.codeproject.com/js/default.js"></script><scriptsrc="http://www.codeproject.com/js/navigator.js"></script></head><body><divid="contenthost"data-win-control="Application.PageControlNavigator"data-win-options="{home: '/pages/home/home.html'}"></div><!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
 <button data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{id:'cmd', label:'Command',
 icon:'placeholder'}" 
 type="button"></button>
 </div> --></body></html>

文件的正文 包含两个元素: PageControlNavigatordiv div,并为的AppBar 注释出了的div。 现在让我们忽略现在的应用程序栏,并仔细查看第一个收费的div元素。

<divid="contenthost"data-win-control="Application.PageControlNavigator"data-win-options="{home: '/pages/home/home.html'}"></div>

这里 元素创建PageControlNavigator控件。 PageControlNavigator加载并显示我们的主页。 你使用 data-win-options属性告诉它加载哪个页面。

继续运行应用程序。

这个应用程序实际上既显示 default.html 和 home.html.,也显示了一个HTML页面,它显示一个HTML页面,另一个HTML页面是HTML页面。

步骤 2: 从"你好,世界"应用程序复制你的HTML和CSS内容

我们的新应用程序有两个HTML页面: default.html 和 home.html. 在哪里放置内容?

  • 使用 default.html 对应始终存在的UI,不管应用程序显示哪个页面。 例如你可以使用 default.html 来承载导航栏。
  • 在应用程序中使用 home.html,,如,用于构成单个屏幕的内容。

打开 home.html 并查看它包含的一些标记。

<head><metacharset="utf-8"/><title>homePage</title><!-- WinJS references --><linkhref="http://www.codeproject.com/Microsoft.WinJS.1.0/css/ui-dark.css"rel="stylesheet"/><scriptsrc="http://www.codeproject.com/Microsoft.WinJS.1.0/js/base.js"></script><scriptsrc="http://www.codeproject.com/Microsoft.WinJS.1.0/js/ui.js"></script><linkhref="http://www.codeproject.com/css/default.css"rel="stylesheet"/><linkhref="http://www.codeproject.com/pages/home/home.css"rel="stylesheet"/><scriptsrc="http://www.codeproject.com/pages/home/home.js"></script></head>
  • 它有一个页面 header 区域,其中包含后退按钮和标题区域。 模板包含自动启用后退按钮的代码,当你可以向后导航时。 按钮在我们添加第二页并在那里导航之前将不可见。
<headeraria-label="Header content"role="banner"><buttonclass="win-backbutton"aria-label="Back"disabledtype="button"></button><h1class="titlearea win-type-ellipsis"><spanclass="pagetitle">Welcome to HelloWorldWithPages!</span></h1></header>
  • 它为你的主要内容提供了一个部分。
<sectionaria-label="Main content"role="main"><p>Content goes here.</p></section>

让我们向"你好,世界"应用程序添加应用程序中的内容到我们新HelloWorldWithPages项目的主页( home.html )。

从"你好,世界"应用程序中添加HTML和CSS内容

  • 从"你好,世界"应用程序的default.html 文件中复制 final HTML内容到新项目中的/pages/home/home.html的主内容部分。
<body><!-- The content that will be loaded and displayed. --><divclass="fragment homepage"><headeraria-label="Header content"role="banner"><buttonclass="win-backbutton"aria-label="Back"disabledtype="button"></button><h1class="titlearea win-type-ellipsis"><spanclass="pagetitle">Welcome to HelloWorldWithPages!</span></h1></header><sectionaria-label="Main content"role="main"><!-- Copied from"Hello, world" --><h1class="headerClass">Hello, world!</h1><divclass="mainContent"><p>What's your name?</p><inputid="nameInput"type="text"/><buttonid="helloButton">Say"Hello"</button><divid="greetingOutput"></div><labelfor="ratingControlDiv"> Rate this greeting: 
 </label><divid="ratingControlDiv"data-win-control="WinJS.UI.Rating"></div><divid="ratingOutput"></div></div></section></div></body>
  • 将你复制到的标题内容移动到 home.html 为你提供的 element元素。 由于 home.html 已经包含一个主要内容部分,所以删除你复制的( 但保留它的内容)的" mainContent" 元素。
<body><!-- The content that will be loaded and displayed. --><divclass="fragment homepage"><headeraria-label="Header content"role="banner"><buttonclass="win-backbutton"aria-label="Back"disabledtype="button"></button><h1class="titlearea win-type-ellipsis"><spanclass="pagetitle">Hello, world!</span></h1></header><sectionaria-label="Main content"role="main"><p>What's your name?</p><inputid="nameInput"type="text"/><buttonid="helloButton">Say"Hello"</button><divid="greetingOutput"></div><labelfor="ratingControlDiv"> Rate this greeting: 
 </label><divid="ratingControlDiv"data-win-control="WinJS.UI.Rating"></div><divid="ratingOutput"></div></section></div></body>
  • switch 到光源样式表。 替换对深色样式表的引用:
<!-- WinJS references --><linkhref="http://www.codeproject.com/Microsoft.WinJS.1.0/css/ui-dark.css"rel="stylesheet"/>

有了这个

<!-- WinJS references --><linkhref="http://www.codeproject.com/Microsoft.WinJS.1.0/css/ui-light.css"rel="stylesheet"/>

greetingOutput 样式从你在部分 1中创建的default.css 文件中复制: 创建一个"你好,世界"应用程序到 home.css。

.homepage section[role=main] {
 margin-left: 120px;
}
#greetingOutput {
 height: 20px; 
 margin-bottom: 40px;
}
@media screen and (-ms-view-state: snapped) {
. homepage section[role=main] {
 margin-left: 20px;
 }
}
@media screen and (-ms-view-state: portrait) {
. homepage section[role=main] {
 margin-left: 100px;
 }
}
  • 运行应用程序。

你已经从原始"你好,世界"应用程序重新创建了内容。 接下来,我们通过复制"你好,世界"事件处理程序来添加交互。

步骤 3: 复制事件处理程序

每个 PageControl有自己的JavaScript文件。 让我们看一下 Visual Studio 为"主页" PageControl 创建的JavaScript文件,home.js:

(function () {
 "use strict";
 WinJS.UI.Pages.define("/pages/home/home.html", {
 // This function is called whenever a user navigates to this page. It// populates the page elements with the app's data. ready: function (element, options) {
 // TODO: Initialize the page here. }
 });
})();

这个文件看起来跟你的default.js 文件有点不同。 首先,它要短得多。 那是因为 default.js 已经处理激活和核心应用逻辑。 每个 PageControl只需要包含页面自身的逻辑。

第一行代码,对 WinJS.UI.Page.define 函数的调用,创建的PageControl 对象。 这里函数采用两个参数: 这个示例中的页面 ("/pages/home/home.html"的URI,以及定义收费的成员的对象。 你可以添加任意类型的成员。 还可以实现由 IPageControlMembers 接口描述的一组特殊成员,当你使用收费的PageControl接口时,该接口会自动调用。

模板创建的home.js 文件定义了这些特殊成员之一, ready function函数。ready函数在页面初始化和呈现之后调用。 这是一个附加事件处理程序的好地方。

你可能注意到代码不包括对 WinJS.UI.processAll的呼叫。 这是因为 的PageControl 会自动为你呼叫它。 调用 ready函数时,已经调用了 WinJS.UI.processAll,并已经完成了它的处理。

添加事件处理程序

WinJS.UI.Pages.define("/pages/home/home.html", {
 // This function is called whenever a user navigates to this page. It// populates the page elements with the app's data. ready: function (element, options) {
 // TODO: Initialize the page here. },
 buttonClickHandler: function (eventInfo) {
 var userName = document.getElementById("nameInput").value;
 var greetingString = "Hello," + userName + "!";
 document.getElementById("greetingOutput").innerText = greetingString;
 // Save the session data. WinJS.Application.sessionState.greetingOutput = greetingString;
 },
 ratingChanged: function (eventInfo) {
 var ratingOutput = document.getElementById("ratingOutput");
 ratingOutput.innerText = eventInfo.detail.tentativeRating;
 // Store the rating for multiple sessions.var appData = Windows.Storage.ApplicationData.current;
 var roamingSettings = appData.roamingSettings;
 roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
 },
 nameInputChanged: function (eventInfo) {
 var nameInput = eventInfo.srcElement;
 // Store the user's name for multiple sessions.var appData = Windows.Storage.ApplicationData.current;
 var roamingSettings = appData.roamingSettings;
 roamingSettings.values["userName"] = nameInput.value;
 }
});
  • 现在我们需要附加事件处理程序。 在 1和 2部分,我们为 的承诺创建了一个,然后用WinJS.UI.processAll 返回了承诺的。 现在的事情比较简单,因为我们可以使用 ready ready函数来附加事件处理程序。ready function函数被自动调用 WinJS.UI.processAll 为我们自动调用之后,将调用 ready function函数。

将附加事件处理程序的代码复制到中的ready 函数。

// This function is called whenever a user navigates to this page. It// populates the page elements with the app's data.ready: function (element, options) {
 // TODO: Initialize the page here.// Retrieve the div that hosts the Rating control.var ratingControlDiv = document.getElementById("ratingControlDiv");
 // Retrieve the actual Rating control.var ratingControl = ratingControlDiv.winControl;
 // Register the event handler. ratingControl.addEventListener("change", this.ratingChanged, false);
 // Retrieve the button and register our event handler.var helloButton = document.getElementById("helloButton");
 helloButton.addEventListener("click", this.buttonClickHandler, false);
 // Retrieve the input element and register our// event handler.var nameInput = document.getElementById("nameInput");
 nameInput.addEventListener("change", this.nameInputChanged);
}
  • 运行应用程序当你输入 NAME 并单击按钮时,它会显示一个问候语。 当你对问候语进行评分时,它将显示数值值。

步骤 4: 恢复应用程序的状态

我们已经在"你好,世界"应用程序中重新创建了我们的功能。 现在我们唯一需要做的就是在用户启动应用程序时恢复应用程序的状态。

你可能记得,我们有两种类型的应用程序状态要还原:

  • 用户 NAME 和分级。 不管应用如何关闭,我们都恢复这个状态。
  • 个性化问候语。如果应用程序成功终止,最后一次运行时,我们只恢复该状态。

恢复应用程序的状态

  • 复制"你好,世界"应用程序中恢复用户 NAME 和分级的代码。 在 home.js. 中将代码添加到 就绪的 函数中
// This function is called whenever a user navigates to this page. It// populates the page elements with the app's data.ready: function (element, options) {
 // TODO: Initialize the page here.// Retrieve the div that hosts the Rating control.var ratingControlDiv = document.getElementById("ratingControlDiv");
 // Retrieve the actual Rating control.var ratingControl = ratingControlDiv.winControl;
 // Register the event handler. ratingControl.addEventListener("change", this.ratingChanged, false);
 // Retrieve the button and register our event handler.var helloButton = document.getElementById("helloButton");
 helloButton.addEventListener("click", this.buttonClickHandler, false);
 // Retrieve the input element and register our// event handler.var nameInput = document.getElementById("nameInput");
 nameInput.addEventListener("change", this.nameInputChanged);
 // Restore app data.var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
 // Restore the user name.var userName =
 Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
 if (userName) {
 nameInput.value = userName;
 }
 // Restore the rating.var greetingRating = roamingSettings.values["greetingRating"];
 if (greetingRating) {
 ratingControl.userRating = greetingRating;
 var ratingOutput = document.getElementById("ratingOutput");
 ratingOutput.innerText = greetingRating;
 }
},
 app.addEventListener("activated", function (args)
{
 if (args.detail.kind === activation.ActivationKind.launch) {
 if (args.detail.previousExecutionState!== activation.ApplicationExecutionState.terminated) {
 // TODO: This application has been newly launched. Initialize// your application here. } else {
 // TODO: This application has been reactivated from suspension.// Restore application state here. }
 // Save the previous execution state.  WinJS.Application.sessionState.previousExecutionState = 
 args.detail.previousExecutionState;
 if (app.sessionState.history) {
 nav.history = app.sessionState.history;
 }
 args.setPromise(WinJS.UI.processAll().then(function () {
 if (nav.location) {
 nav.history.current.initialPlaceholder = true;
 return nav.navigate(nav.location, nav.state);
 } else {
 return nav.navigate(Application.navigator.home);
 }
 }));
 }
 });
// If the app was terminated last time it ran, restore the personalized// greeting.if (
 WinJS.Application.sessionState.previousExecutionState
 === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
 var outputValue = WinJS.Application.sessionState.greetingOutput;
 if (outputValue) {
 var greetingOutput = document.getElementById("greetingOutput");
 greetingOutput.innerText = outputValue;
 }
}

以下是完整的 方法。

// This function is called whenever a user navigates to this page. It// populates the page elements with the app's data.ready: function (element, options) {
 // TODO: Initialize the page here.// Retrieve the div that hosts the Rating control.var ratingControlDiv = document.getElementById("ratingControlDiv");
 // Retrieve the actual Rating control.var ratingControl = ratingControlDiv.winControl;
 // Register the event handler. ratingControl.addEventListener("change", this.ratingChanged, false);
 // Retrieve the button and register our event handler.var helloButton = document.getElementById("helloButton");
 helloButton.addEventListener("click", this.buttonClickHandler, false);
 // Retrieve the input element and register our// event handler.var nameInput = document.getElementById("nameInput");
 nameInput.addEventListener("change", this.nameInputChanged);
 // Restore app data.var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
 // Restore the user name.var userName =
 Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
 if (userName) {
 nameInput.value = userName;
 }
 // Restore the rating.var greetingRating = roamingSettings.values["greetingRating"];
 if (greetingRating) {
 ratingControl.userRating = greetingRating;
 var ratingOutput = document.getElementById("ratingOutput");
 ratingOutput.innerText = greetingRating;
 }
 // If the app was terminated last time it ran, restore the personalized// greeting.if (
 WinJS.Application.sessionState.previousExecutionState
 === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
 var outputValue = WinJS.Application.sessionState.greetingOutput;
 if (outputValue) {
 var greetingOutput =
 document.getElementById("greetingOutput");
 greetingOutput.innerText = outputValue;
 }
 }
}
  • 我们现在已经复制了我们原来的"你好,世界"应用程序中的功能。

步骤 5: 添加另一页

大多数应用程序包含多个页面。 让我们在应用程序中添加另一页。 因为我们使用的导航应用程序模板 ,所以添加额外的页面是很容易的。

添加另一页

  • 解决方案资源管理器,右击Folder文件夹并选择添加> 新文件夹。 项目中出现一个新文件夹。
  • 将文件夹重命名为"page2页"。
  • 右键单击 page2 page2文件夹并选择添加新项目。 。出现项dialog对话框。
  • 从列表中选择页控制。 在名称文本框中,输入" page2.html"。

  • 单击添加 to添加的PageControl。 新的PageControl出现在解决方案资源管理器中。

新的PageControl 有三个文件: page2.css, page2.html, 和 page2.js.

你已经创建了一个新页面。 在下一步中,你将获得如何导航到。

步骤 6: 使用导航功能在页面间移动

现在,我们有第二页,但用户没有办法进入它。 让我们更新 home.html 页面,添加一个指向 page2.html.的链接

在页面之间导航

  • 打开 home.html 并添加指向 page2.html.的链接
<body><!-- The content that will be loaded and displayed. --><divclass="fragment homepage"><headeraria-label="Header content"role="banner"><buttonclass="win-backbutton"aria-label="Back"disabledtype="button"></button><h1class="titlearea win-type-ellipsis"><spanclass="pagetitle">Hello, world!</span></h1></header><sectionaria-label="Main content"role="main"><p>What's your name?</p><inputid="nameInput"type="text"/><buttonid="helloButton">Say"Hello"</button><divid="greetingOutput"></div><labelfor="ratingControlDiv"> Rate this greeting:
 </label><divid="ratingControlDiv"data-win-control="WinJS.UI.Rating"></div><divid="ratingOutput"></div><!-- A hyperlink to page2.html. --><p><ahref="http://www.codeproject.com/pages/page2/page2.html">Go to page 2.</a></p></section></div></body>
  • 运行该应用程序并单击链接。 它似乎工作:应用程序显示 page2.html.

但是,有一个问题:应用程序执行了顶级导航。 它不是从 home.html 导航到 page2.html,,而是从 default.html 导航到 page2.html.

你想要的是用 page2.html. 代替 home.html的内容

幸运的是,PageControlNavigator控件使得执行这种类型的导航变得相当容易。 PageControlNavigator代码( 在应用程序文件的navigator.js 中) 为你的WinJS.Navigation.navigated 事件。 当事件发生时,PageControlNavigator加载由事件指定的页面。

当你使用 WinJS.Navigation.navigate/或者 WinJS.Navigation.forward 函数来导航时,会发生 WinJS.Navigation.navigated 事件。

你需要调用 WinJS.Navigation.navigate,而不是使用默认超链接行为。 你可以用按钮替换链接,并使用按钮事件处理程序的单击来调用收费的。 或者你可以更改超链接的默认行为,这样当用户单击某个链接时,应用程序使用 WinJS.Navigation.navigate 导航到链接目标。 为此,请按链接点击事件并使用事件停止默认超链接导航行为,然后调用 WinJS.Navigation.navigate 函数,并将链接目标传递给 link。

重写默认超链接行为的步骤

linkClickEventHandler: function (eventInfo) {
}
  • 调用 preventDefault preventDefault方法,以防止默认链接行为。
linkClickEventHandler: function (eventInfo) {
 eventInfo.preventDefault();
}
  • 检索触发事件的超链接。
linkClickEventHandler: function (eventInfo) {
 eventInfo.preventDefault();
 var link = eventInfo.target;
}
  • 调用 WinJS.Navigation.navigate 函数并将它的传递给链接目标。 ( 也可以通过传递描述该页状态的状态对象)。 有关详细信息,请参阅 WinJS.Navigation.navigate 页。)
linkClickEventHandler: function (eventInfo) {
 eventInfo.preventDefault();
 var link = eventInfo.target;
 WinJS.Navigation.navigate(link.href);
}
  • 在 file 准备 ready 函数中,将事件处理程序附加到超级链接。

JavaScript库提供了一个的WinJS.Utilities.query 函数,可以方便地检索页面上的大量元素。 函数返回的QueryCollection,它提供附加和移除事件处理程序的附加方法。 让我们使用 WinJS.Utilities.query 集合和 方法来附加我们的linkClickEventHandler

// This function is called whenever a user navigates to this page. It// populates the page elements with the app's data.ready: function (element, options) {
 // TODO: Initialize the page here. WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);

这种方法的优点在于它可以在页面上任意数量的链接上工作。 我们现在只有一个链接,但是通过这种方法,我们可以添加更多的链接,我们不必改变代码。

  • 运行该应用程序并单击 page2.html. 链接

现在页面显示使用适当的导航 Pattern。

步骤 7: 添加用于附加导航的应用程序栏

在用户需要时,用户可以方便地访问命令。 用户可以滑动屏幕的底部边缘来显示应用程序栏。 它们覆盖了应用程序的内容,并且可以由用户解除,或者与应用程序交互。 使用应用栏向用户显示导航。命令和工具。

app栏是用于JavaScript控件的Windows 库。 要在你的HTML中声明一个,你可以使用以下语法:

<divid="appbar"data-win-control="WinJS.UI.AppBar"></div>

应用栏被设计用来包含应用栏命令按钮。 要创建应用栏命令按钮,可以使用按钮 element元素,并使用 data-win-control属性使它的成为命令按钮。

<divid="appbar"data-win-control="WinJS.UI.AppBar"><buttondata-win-control="WinJS.UI.AppBarCommand"></button></div>

你还需要使用 data-win-options属性为命令按钮指定几个选项:

  • id: 命令的ID。
  • 标签: 要为命令显示的标签。
  • icon: 用于命令的icon,或者自定义PNG文件的路径。 ( 有关 icon 值的列表,请参见 AppBarIcon。)
  • 部分: 命令所属的节。 可能的值是"选择"和"全局"。
  • 工具提示: 要为命令显示的工具提示。
  • 类型: 命令的类型。可能的值为"按钮","切换","弹出按钮"和"分隔符"。

下面是语法的一个示例:

<divid="appbar"data-win-control="WinJS.UI.AppBar"><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'cmdID', label:'Command', icon:'placeholder', section='global', tooltip: 'Command', type='button'}"></button></div>

你还可以将 元素作为分隔符添加,如下所示:

<divid="appbar"data-win-control="WinJS.UI.AppBar"><hrdata-win-control="WinJS.UI.AppBarCommand"data-win-options="{type:'separator', section:'global'}"/><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'cmdID', label:'Command', icon:'placeholder', tooltip: 'Command'}"></button></div>

默认情况下,应用程序栏中唯一的元素是命令按钮和hr元素,它们都必须设置 data-win-control=" WinJS.UI.AppBarCommand"属性。 ( 要了解如何创建可以包含其他元素的自定义应用程序栏,请参阅快速入门: 添加自定义应用程序栏插件。)

创建应用程序栏后,需要将事件处理程序附加到命令。 可以像其他控件一样执行这里操作,也可以使用 getCommandById方法检索命令:

var appbar = document.getElementById("appbar").winControl;
appbar.getCommandById("cmdID").addEventListener("click", myEventHandler, false);

我们的应用包含几页。 我们应该在哪里添加应用程序栏?

让我们创建一个简单的应用程序栏,让用户在 home.html 和 page2.html. 之间导航我们将在 default.html 文件中定义我们的应用程序栏。

添加应用程序栏

  • 你的default.html 文件为我们创建了一个应用程序栏,但是它被注释掉了。 取消注释。
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>HelloWorldWithPages</title><!-- WinJS references --><linkhref="http://www.codeproject.com/Microsoft.WinJS.1.0/css/ui-dark.css"rel="stylesheet"/><scriptsrc="http://www.codeproject.com/Microsoft.WinJS.1.0/js/base.js"></script><scriptsrc="http://www.codeproject.com/Microsoft.WinJS.1.0/js/ui.js"></script><!-- HelloWorldWithPages references --><linkhref="http://www.codeproject.com/css/default.css"rel="stylesheet"/><scriptsrc="http://www.codeproject.com/js/default.js"></script><scriptsrc="http://www.codeproject.com/js/navigator.js"></script></head><body><divid="contenthost"data-win-control="Application.PageControlNavigator"data-win-options="{home: '/pages/home/home.html'}"></div><divid="appbar"data-win-control="WinJS.UI.AppBar"><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"type="button"></button></div></body></html>
  • 运行应用程序要显示栏,请使用顶部或者底部边缘刷新,按 enter + Z 或者单击鼠标右键。

现在这个应用栏没有什么意思。

  • 删除 bar app按钮,并用你自己的按钮元素替换它: 一个导航到 home.html,一个导航到 page2.html. Give home按钮 an"homebutton"和导航到 page2.html的按钮" page2Button"。 让我们添加一个分隔符。
<divid="appbar"data-win-control="WinJS.UI.AppBar"><hrdata-win-control="WinJS.UI.AppBarCommand"data-win-options="{type:'separator',section:'global'}"/><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'homeButton',label:'Home',icon:'home',section:'global',
 tooltip:'Go to the home page', type: 'button'}"></button><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'page2Button',label:'Page 2',icon:'page',section:'global',
 tooltip:'Go to page 2', type: 'button'}"></button></div>
<divid="appbar"data-win-control="WinJS.UI.AppBar"data-win-options="{placement:'top'}"><hrdata-win-control="WinJS.UI.AppBarCommand"data-win-options="{type:'separator',section:'global'}"/><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'homeButton',label:'Home',icon:'home',section:'global',
 tooltip:'Go to the home page', type: 'button'}"></button><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'page2Button',label:'Page 2',icon:'page',section:'global',
 tooltip:'Go to page 2', type: 'button'}"></button></div>

你已经声明了一个应用程序栏。 接下来,让我们把它。

  • 在文件的开头打开 ,并在文件的开头创建一个用于更改它的background 颜色的应用程序条的CSS样式。
#appbar {
 background-color: #03abe2;
}

现在,让我们附加事件处理程序,以便按钮可以执行某些操作。

function goToHomePage(eventInfo) {
 WinJS.Navigation.navigate("/pages/home/home.html");
}
function goToPage2(eventInfo) {
 WinJS.Navigation.navigate("/pages/page2/page2.html");
}
(function () {
 "use strict";
 WinJS.Binding.optimizeBindingReferences = true;
 var app = WinJS.Application;
 var activation = Windows.ApplicationModel.Activation;
 var nav = WinJS.Navigation;
 // Create variables for the navigation buttons.var homeButton, page2Button;
app.addEventListener("activated", function (args) {
 if (args.detail.kind === activation.ActivationKind.launch) {
 if (args.detail.previousExecutionState!== activation.ApplicationExecutionState.terminated) {
 // TODO: This application has been newly launched. Initialize// your application here. } else {
 // TODO: This application has been reactivated from suspension.// Restore application state here. }
 // Save the previous execution state. WinJS.Application.sessionState.previousExecutionState =
 args.detail.previousExecutionState;
 if (app.sessionState.history) {
 nav.history = app.sessionState.history;
 }
 args.setPromise(WinJS.UI.processAll().then(function () {
 // Retrieve the app bar.var appbar = document.getElementById("appbar").winControl;
 // Attach event handlers to the command buttons. homeButton = appbar.getCommandById("homeButton");
 homeButton.addEventListener("click", goToHomePage, false);
 page2Button = appbar.getCommandById("page2Button");
 page2Button.addEventListener("click", goToPage2, false);
 if (nav.location) {
 nav.history.current.initialPlaceholder = true;
 return nav.navigate(nav.location, nav.state);
 } else {
 return nav.navigate(Application.navigator.home);
 }
 }));
 }
});
  • 运行应用程序。现在你可以使用应用程序栏在两个页面之间导航。
  • 我们已经完成了。注意你可以在查看 home.html. 时单击do按钮,让我们添加一些代码禁用导航按钮。 更新按钮的一种简单方法是使用导航事件。

定义一个导航的事件处理程序,名为 navigatedHandler。 在处理程序中,使用 detail.location 属性查找应用程序导航到的页面。 当应用程序导航到 home.html, 禁用主页按钮并启用 2按钮。 当应用程序导航到 page2.html, 启用主页按钮并禁用 2按钮时。

( 因为我们在前面的步骤中为主页和第1 页按钮创建了变量,所以在处理事件时不需要每次都检索它们。)

function navigatedHandler(eventInfo) {
 if (eventInfo.detail.location === "/pages/home/home.html") {
 homeButton.disabled = true;
 page2Button.disabled = false;
 }
 elseif (eventInfo.detail.location === "/pages/page2/page2.html") {
 homeButton.disabled = false;
 page2Button.disabled = true;
 }
}
args.setPromise(WinJS.UI.processAll().then(function () {
 // Retrieve the app bar.var appbar = document.getElementById("appbar").winControl;
 // Attach event handlers to the command buttons. homeButton = appbar.getCommandById("homeButton");
 homeButton.addEventListener("click", goToHomePage, false);
 page2Button = appbar.getCommandById("page2Button");
 page2Button.addEventListener("click", goToPage2, false);
 WinJS.Navigation.addEventListener("navigated", navigatedHandler, false);
 if (nav.location) {
 nav.history.current.initialPlaceholder = true;
 return nav.navigate(nav.location, nav.state);
 } else {
 return nav.navigate(Application.navigator.home);
 }
}));
  • 再次运行该应用程序。现在应用程序栏只显示有效的导航命令。

摘要

恭喜你,你已经完成了第三教程 ! 你了解了如何创建使用导航应用程序模板的项目,以及如何使用 PageControl对象。 你还了解了如何创建应用程序栏。

查看完整代码

你被卡住了还是想检查你的工作? 如果是,请参见完整代码

本教程由MSDN的团队提供给你。 要了解有关 Windows 商店应用程序编码的更多信息,请访问 http://dev.windows.com 应用程序。

HTML5视频资源