在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlControl控件接收一个包含页面地址的对象作为参数,并根据这个地址加载相应的页面;PageControl控件是自定义控件,可以使用WinJS.UI.Pages.define函数将一个页面定义为PageControl控件,然后在其他页面中使用,使用这个PageControl控件就相当于加载了该控件相对应的页面。下面首先介绍如何使用HtmlControl控件加载一个页面。
(1)HtmlControl控件
在开发Windows应用商店应用时,有时候需要在一个页面中的某个位置显示另一个页面的内容,这时可以使用HtmlControl控件。HtmlControl控件具有一个名为“uri”的属性,该属性的值为被显示页面的地址,通过赋予该属性不同的值,可以在HtmlControl控件所在的位置加载不同的页面。
使用HtmlControl控件加载页面的方式如下:首先在一个HTML页面中添加一个HtmlControl控件,然后将HtmlControl控件的uri属性设置为被加载的地址。代码片段如下所示:
<body>
<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/contentpage.html'}"></div>
</body>
在上面的代码中,在一个HTML页面的body元素下定义了一个div元素,通过将div元素的data-win-control属性设置为WinJS.UI.HtmlControl,添加了一个HtmlControl控件,接着使用data-win-options属性设置HtmlControl控件的uri属性,其中“/contentpage.html”是被加载页面的地址。
(2)PageControl控件
PageControl控件是一种自定义控件,可以将一个页面的内容和逻辑功能定义成一个PageControl控件,然后通过在其他页面中添加这个PageControl控件来加载相应的内容,使用PageControl控件可以方便地在其他不同页面中重用一个被定义好的页面内容。下面通过一个示例介绍如何定义和使用PageControl控件。
在Visual Studio 2012中新建一个JavaScript的Windows应用商店的空白应用程序项目,将其命名为ContentLoader,在项目中新建一个名为ContentPage的文件夹,并在这个文件夹下添加一个“页面控制”项,命名为ContentPage,添加完成之后ContentPage文件夹会包含三个文件,名称分别为ContentPage.html、ContentPage.js、ContentPage.css。
首先在ContentPage.html文件中布局应用的前台界面,打开ContentPage.html文件,可以发现body元素内已经默认包含了导航按钮、页面标题等内容,删除body元素内的代码然后添加一个按钮和一个画布,画布作为一个图形容器,当点击按钮时将在画布上绘制一个图形。代码片段如下所示:
<body>
<button >所示: