Windows Store App JavaScript 开发:页面加载

 

在开发基于JavaScriptWindows应用商店应用时,可以使用HtmlControlPageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlControl控件接收一个包含页面地址的对象作为参数,并根据这个地址加载相应的页面;PageControl控件是自定义控件,可以使用WinJS.UI.Pages.define函数将一个页面定义为PageControl控件,然后在其他页面中使用,使用这个PageControl控件就相当于加载了该控件相对应的页面。下面首先介绍如何使用HtmlControl控件加载一个页面。

1HtmlControl控件

在开发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”是被加载页面的地址。

2PageControl控件

PageControl控件是一种自定义控件,可以将一个页面的内容和逻辑功能定义成一个PageControl控件,然后通过在其他页面中添加这个PageControl控件来加载相应的内容,使用PageControl控件可以方便地在其他不同页面中重用一个被定义好的页面内容。下面通过一个示例介绍如何定义和使用PageControl控件。

Visual Studio 2012中新建一个JavaScriptWindows应用商店的空白应用程序项目,将其命名为ContentLoader,在项目中新建一个名为ContentPage的文件夹,并在这个文件夹下添加一个页面控制项,命名为ContentPage,添加完成之后ContentPage文件夹会包含三个文件,名称分别为ContentPage.htmlContentPage.jsContentPage.css

首先在ContentPage.html文件中布局应用的前台界面,打开ContentPage.html文件,可以发现body元素内已经默认包含了导航按钮、页面标题等内容,删除body元素内的代码然后添加一个按钮和一个画布,画布作为一个图形容器,当点击按钮时将在画布上绘制一个图形。代码片段如下所示:

<body>

    <button id="ShowRectangleButton">显示矩形</button><br /> <br />

    <canvas id="ContentCanvas"></canvas>

</body>

完成前台界面的布局之后,接下来实现ContentPage.html页面的逻辑功能。打开ContentPage.js文件可以发现,文件内已经默认包含了一个匿名函数,匿名函数中调用了WinJS.UI.Pages.define函数,用于创建一个PageControl控件。下面定义一个名为contentPageControl的变量,将WinJS.UI.Pages.define函数的返回值赋予该变量,用于在HTML页面中添加PageControl控件时使用。在ready函数内为id属性为“showRectangleButton”的元素添加click事件处理函数ShowRectangleButton_Click,代码片段如下所示:

var contentPageControl = WinJS.UI.Pages.define("/ContentPage/ContentPage.html", {

    ready: function (element, options) {

        var showRectangleButton = document.getElementById("ShowRectangleButton");

        showRectangleButton.addEventListener("click", ShowRectangleButton_Click);

    }

});

在上面的代码中,调用define函数之后将函数的返回值赋给contentPageControl变量,define函数接收了两个函数参数,一个参数为ContentPage.html页面的地址,另一个参数是一个对象,这个对象有一个ready函数,表示当页面准备就绪之后要做的逻辑处理,在ready函数内调用document对象的getElementById函数获取id属性值为ShowRectangleButton的元素对象,并为元素对象注册了单击事件处理函数ShowRectangleButton_Click

下面实现ShowRectangleButton_Click函数,用于在ContentPage.html页面的画布中绘制一个矩形,代码片段如下所示:

function ShowRectangleButton_Click(eventInfo) {

    var contentCanvas = document.getElementById(‘ContentCanvas‘);

    var canvasContext = contentCanvas.getContext(‘2d‘);

    canvasContext.fillStyle = ‘#FF0000‘;

    canvasContext.fillRect(0, 0, 90, 100);

}

上面的代码调用document对象的getElementById 函数获得id属性值为ContentCanvas的元素对象,赋值给contentCanvas变量,并通过contentCanvas变量调用元素对象的getContext函数以“2d”为参数得到用于2D绘图的对象,赋值给canvasContext变量,接着使用canvasContext变量调用对象的fillStyle属性设置填充颜色,并调用fillRect函数向画布绘制一个矩形。

PageControl控件的定义包含在ContentPage.js文件的匿名函数内,由于匿名函数中定义的变量为局部变量,不能直接使用在项目的其他文件中,为此在ShowRectangleButton_Click函数的后面定义一个命名空间,以便通过命名空间引用PageControl控件。代码片段如下所示:

WinJS.Namespace.define("ContentPage", {

    pageControlName: contentPageControl

});

在上面的代码中,调用WinJS.Namespace.define函数定义了一个命名空间ContentPage,在命名空间中添加了一个名为pageControlName的成员,将其值设置为前面定义的PageControl控件contentPageControl

以上的过程实现了一个PageControl控件,接下来介绍如何在default.html页面中使用PageControl控件。打开项目中的default.html文件,在文件的head元素内引用ContentPage.js文件,代码片段如下所示:

<script src="/ContentPage/ContentPage.js"></script>

引用ContentPage.js文件之后,在default.html文件的body元素中添加一个h2和一个div元素,h2元素用于显示default.html页面的标题,div元素用于定义PageControl控件,代码片段如下所示:

<body>

    <h2>default页面</h2>

    <div data-win-control="ContentPage.pageControlName"}"></div>

</body>

在上面的代码中,通过将div元素的data-win-control属性设置为命名空间ContentPage下的pageControlName成员,添加一个PageControl控件。

启动调试,应用程序界面上显示“default页面”文本和“显示矩形”按钮,单击“显示矩形”按钮,将在按钮的下方显示一个红色的矩形,如图19-7所示:

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。