Win10系列:JavaScript 控件的使用

向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件。其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框;WinJS库控件是为开发基于JavaScript 的Windows应用商店应用提供的新控件,如ListViewHtmlControlPageControl等。下面首先介绍如何添加这两种类型的控件,然后介绍如何为控件注册事件处理函数和设计控件的样式。

(1)添加标准的HTML控件

向页面中添加标准的HTML控件可以通过定义相应的HTML元素来实现。例如要在某个页面中添加一个按钮,就可以在这个页面的body元素内定义一个button元素,HTML代码片段如下所示:

<button id="SaveButton"></button>

在上面的代码中,为按钮的id属性赋予了属性值SaveButton,用于唯一标识这个控件。

(2)添加WinJS库控件

WinJS库为开发JavaScript 的Windows应用商店应用提供了一些新控件,如RatingListViewHtmlControlPageControlFlipView控件等,这些控件统称为WinJS库控件。添加一个WinJS库控件与添加标准的HTML控件不同,WinJS库控件没有专用的HTML元素,在一个页面中无法通过定义ListView元素来添加一个ListView控件。

向页面中添加一个WinJS库控件有两种方式,HTML方式和JavaScript方式。HTML方式指的是定义一个标准的HTML元素,并将data-win-control属性设置为WinJS库控件类型来添加控件。例如,要在某个页面中添加一个Rating控件,可以在这个页面的body元素内定义一个div元素,然后将div元素的data-win-control属性设置成"WinJS.UI.Rating",相应的HTML代码片段如下所示:

<body>

<div data-win-control="WinJS.UI.Rating"></div>

</body>

而JavaScript方式是在JavaScript代码中通过实例化WinJS库对象来添加控件,例如在某个页面中添加一个Rating控件,可以首先通过id属性获得一个标准HTML控件的元素对象,然后以这个元素对象为参数调用Rating构造函数,以下JavaScript代码片段获得id属性为RatingHost的元素对象,并以该元素对象为参数实例化一个Rating控件:

var ratingHost = document.getElementById("RatingHost");

var ratingControl = new WinJS.UI.Rating(ratingHost);

与添加一个控件相对应,设置一个控件的属性也有HTML和JavaScript两种方式。对于HTML方式,可以使用标准HTML控件的data-win-options属性来设置。例如,向某个页面中添加一个Rating控件,设置maxRating属性的值为5,averageRating属性的值为3,相应的HTML代码片段为:

<div id="RatingControlHost" data-win-control="WinJS.UI.Rating" data-win-options="{maxRating: 5, averageRating: 3}"></div>

对于JavaScript方式,设置一个控件属性的方法是直接为控件对象的属性赋值,例如上面的ratingControl对象,设置它的disabled属性值为true,相应的JavaScript代码片段如下所示:

ratingControl.disabled = true;

(3)为控件注册事件处理函数

为页面中的控件注册事件处理函数一般在JavaScript代码中使用addEventListener函数来实现。addEventListener函数有三个参数,分别是type、listener和useCapture。type参数指定触发的事件类型,listener代表type事件的处理函数,第三个参数useCapture为bool类型,当值为true时事件处理函数在type事件的捕获阶段执行,当值为false时事件处理函数在type事件的冒泡阶段执行。

这里简要介绍一下JavaScript的事件机制,元素事件的触发分为三个阶段:捕获阶段、目标阶段和冒泡阶段。当用户触发一个元素的某事件时,系统会从HTML文档的根元素到目标元素由外向内,检测每个元素是否注册了此事件的处理函数,如果已经注册并且useCapture 为true,则调用该事件处理函数,这是事件的捕获阶段。事件的目标阶段是指系统调用在目标元素本身注册的事件处理函数,这里的目标元素指用户与之交互的元素,比如用户点击一个div元素,那么此div元素就是目标元素。在冒泡阶段,系统从目标元素到根元素由内向外,检测每个元素是否注册了此事件的处理函数,如果注册了并且 useCapture为false,则调用该事件处理函数。

例如在一个id属性值为FirstDiv的div元素内依次嵌套了id属性值为SecondDiv、ThirdDiv、ForthDiv的div元素,当用户触发id属性值为ForthDiv的div元素的事件时,在捕获阶段系统将检测最外层的div元素,即id属性值为firstDiv的div元素是否注册了useCapture参数为 true 的事件处理函数,若注册了该事件处理函数就执行,然后再依次检测id属性值为SecondDiv和ThirdDiv的元素。在目标阶段系统会触发id属性为ForthDiv的元素的事件处理函数,不论在添加ForthDiv元素的事件处理函数时useCapture参数是true还是false。在冒泡阶段系统将依次检测id属性值为ThirdDiv、SecondDiv、FirstDiv的元素,如果其中某个元素注册了useCapture参数为false的事件处理函数,那么执行该处理函数。

addEventListener函数的语法格式代码如下所示:

object.addEventListener(type, listener, useCapture);

    下面以一个应用程序为例,介绍如何使用addEventListener函数为页面中标准的HTML控件注册事件处理函数。在这个应用程序运行时,单击应用中的按钮,会在界面中显示一段文本。

新建一个JavaScript的Windows应用商店的空白应用程序项目,将其命名为AddListener。在default.html页面中添加一个div元素和一个按钮,代码片段如下所示:

<body>

<div id="PromptMessageDiv"></div>

<button id="ShowMessageButton">点击这里</button>

</body>

接下来打开default.js文件,在处理应用激活事件的函数中添加代码,为"点击这里"按钮注册单击事件处理函数ShowMessageButton_Click。代码片段如下所示:

app.onactivated = function (args) {

if (args.detail.kind === activation.ActivationKind.launch) {

if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

} else {

}

args.setPromise(WinJS.UI.processAll());

var showMessageButton = document.getElementById("ShowMessageButton");

showMessageButton.addEventListener("click", ShowMessageButton_Click);

}

};

在上面的代码中,首先调用document对象的getElementById函数获得id属性值为ShowMessageButton的元素对象,并赋值给showMessageButton变量,接着通过showMessageButton变量调用元素对象的addEventListener函数为按钮注册单击事件处理函数ShowMessageButton_Click。

下面编写ShowMessageButton_Click函数的代码,实现当单击"点击这里"按钮时,在界面中显示一段文本。代码片段如下所示:

function ShowMessageButton_Click() {

var promptMessage = document.getElementById("PromptMessageDiv");

promptMessage.innerHTML = "您已经点击了按钮";

}

在上面的代码中,调用document对象的getElementById函数获得id属性值为PromptMessageDiv的元素对象,并赋值给promptMessage变量,接着设置promptMessage的innerHTML属性值为"您已经点击了按钮"。

启动调试,界面上显示"点击这里"按钮,单击这个按钮,界面中就会显示文本"您已经点击了按钮"。如图19-4所示:

Win10系列:JavaScript 控件的使用

图19-4运行效果图

对于WinJS库控件,为这类控件注册事件处理函数与标准HTML控件类似,只不过查找控件的函数稍有不同,例如查找一个id为"ShowMessageButton"的按钮,相应的JavaScript代码为:

document.getElementById("ShowMessageButton");

而查找一个id为"listViewID"的ListView控件,相应的JavaScript代码为:

document.getElementById("listViewID").winControl;

(4)为控件添加样式

为控件添加样式可以改变控件的外观,例如可以设置控件的大小、位置和控件中文本的字体颜色等。在为控件添加样式时,可以使用WinJS库样式,也可以使用自定义的样式。WinJS库样式是一组预定义的样式,使用WinJS库样式需要将控件的class属性设置为相应样式的名称。下面以一个简单的应用程序为例,介绍如何使用WinJS库中的样式和如何为控件自定义样式,在这个应用程序中包含两个按钮,一个按钮使用WinJS库中的win-backbutton样式,形状是一个向左的箭头,另一个按钮使用自定义样式,在样式定义中设置文本颜色为红色。

新建一个JavaScript的Windows应用商店的空白应用程序项目,将其命名为AddStyle。在default.html页面中添加两个按钮,分别设置这两个按钮的class属性,代码片段如下所示:

<body>

<button class="win-backbutton"></button>

<br />

<button class="buttonStyle">按钮 </button>

</body>

在上面的代码中,为两个按钮设置了class属性值,分别为win-backbutton和buttonStyle,其中win-backbutton是WinJS库中定义的样式,buttonStyle为自定义样式名称。

接下来打开default.css文件,在其中添加代码定义buttonStyle样式,将元素中文本的颜色改为红色。代码片段如下所示:

.buttonStyle {

color:red;

}

启动调试,界面上显示两个按钮,一个按钮形状是向左的箭头,另一个按钮的文本颜色为红色,如图19-5所示:

Win10系列:JavaScript 控件的使用

图19-5 运行效果图

上一篇:WPF 模仿 UltraEdit 文件查看器系列一 用户控件


下一篇:CRLF攻击的一篇科普:新浪某站CRLF Injection导致的安全问题(转)