在开发基于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 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所示：

Windows Store App JavaScript 开发：页面加载的更多相关文章

  1. Windows Store App JavaScript 开发：页内导航

    页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...

  2. Windows Store App JavaScript 开发：WinJS库控件

    在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...

  3. Windows Store App JavaScript 开发：简单对象绑定

    简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用 ...

  4. Windows Store App JavaScript 开发：获取文件和文件夹列表

    在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...

  5. Windows Store App JavaScript 开发：选取文件和文件夹

    前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...

  6. Windows Store App JavaScript 开发：模板绑定

    WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...

  7. Windows Store App JavaScript 开发：小球运动示例

    通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...

  8. Windows Store App JavaScript 开发：文件选取器

    正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...

  9. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

随机推荐

  1. LINUX下查看日志

    LINUX的日志都在 /var/log 目录下:    进入此文件查看目录详情: 查看某个日志的命令: 1.cat messages可以查看某个日志文件. 2.要达到实时更新,可以通过tail命令查看 ...

  2. Windows2012 显示我的电脑

    从Windows2012开始,微软取消了服务器桌面个性化选项,如何重新调出配置界面,可以使用微软命令调出.具体方法如下: 1.同时按住键盘上的“Windows键”+“R”,调出运行窗口.在运行窗口输入 ...

  3. C# API项目代码正确 ，页面出不来的问题

    C# API项目代码正确  页面出不来的问题,截图如下: 解决方法: 在项目里设置好[起始页],就可以了.

  4. 关于Advertising Campaign

    Advertise Campaigns 是指为了传播企业创意或者宣传主题而采取的一些列的整合营销(IMC)活动,也称为广告战役.广告战役主要在一段明确的时间内,通过不同的媒体渠道投放广告,现在经常会整 ...

  5. 微信小程序-登陆、支付、模板消息

    wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key).用户数据的加解密通讯需要 ...

  6. 微信小程序-上传下载

    wx.uploadFile(OBJECT) 上传 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...

  7. 关于DSP的boot mode / boot loader /上电顺序 /在线升级等问题的总结

    使用器件 ti dsp c2000 2837x 1.dsp的上电过程和boot mode以及boot loader 1)dsp的上电顺序, 对于双核系统而言 , 他的上电启动顺序如下所示: 系统复位或 ...

  8. getElementsByClassName 兼容性

    getElementsByClassName是html5 新增加的一个类名.该方法可以让我们通过class属性中的类名来访问元素.不过该方法比较新,某些DOM树还没有,因此在使用中要当心.由于只有较新 ...

  9. ubuntu服务管理

    uRedhat 提供了chkconfig这个命令来管理系统在不同运行级别下的服务开启/关闭: chkconfig ServiceName on/off 并可以用chkconfig --list(两个杠 ...

  10. Css 备忘知识点

    1.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 2.HTML5的form如 ...