Windows Store App JavaScript 开发:WinJS库控件

在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件。

(1)ListView控件

在开发Windows应用商店应用时可以使用ListView控件以网格或列表的方式显示多条数据。ListView控件的常用属性有:

groupDataSource属性,用来设置分组的数据源。

groupHeaderTemplate属性,用来为分组的头部设置模板。

itemDataSource属性,用来为组中的数据项设置数据源。

itemTemplate属性,用来为组中的数据项设置模板。

selectionMode属性,用来设置数据项的选择模式,属性值有“none”、“single”和“multi”。当该属性的值为“none”时表示不允许选择数据项;当值为“single”时表示只可以选择一个数据项;当值为“multi”时表示可以选择多个数据项。

layout属性,用来设置ListView控件的布局,该属性的值是Object类型,属性值有“{type:WinJS.UI.GridLayout}”和“{ type:WinJS.UI.ListLayout}”。当该属性的值为“{type:WinJS.UI.GridLayout}”时,ListView控件会以网格形式显示数据;当值为“{ type:WinJS.UI.ListLayout}”时,ListView控件会以列表形式显示数据。

在应用程序中使用ListView控件来显示多条数据时,对ListView控件的不同操作会触发不同的事件,该控件的常用事件有:

oniteminvoked事件,当单击数据项时会触发该事件。

onkeyboardnavigating事件,使用键盘上的方向键改变选区内的焦点时会触发该事件。

onselectionchanged事件,当选择发生改变时会触发该事件。

在介绍了ListView控件的常用属性和事件后,下面来看一下如何向页面中添加ListView控件,以及如何为ListView控件设置属性和注册事件处理函数。

可以通过在页面中定义一个div元素并将data-win-control属性设置为“WinJS.UI.ListView”来向页面中添加ListView控件,同时可以通过div元素的data-win-options属性设置ListView控件的属性。例如,要在一个页面中添加一个ListView控件并以网格形式显示数据,那么可以在这个页面的body元素内定义一个div元素,并将data-win-control属性设置为“WinJS.UI.ListView”,同时通过data-win-options属性设置ListView控件的layout属性值为“{type:WinJS.UI.GridLayout}”,相应的HTML代码片段如下所示:

<div id="listviewID" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>

添加了ListView控件之后,可以在后台使用addEventListener函数来为其注册相关事件的处理函数。例如为上面示例中的ListView控件注册oniteminvoked事件的处理函数InvokeItemHandler,相应的JavaScript代码片段如下所示:

var listview = document.getElementById("listviewID").winControl;

listview.addEventListener("iteminvoked", InvokeItemHandler);

function InvokeItemHandler() {

    /* 在此处编写事件处理过程的代码 */

}

在上面的代码中,首先以“listviewID”作为参数调用document对象的getElementById函数并使用winControl属性获得id属性值为listviewID的元素对象,并赋值给变量listview。然后通过listview变量调用元素对象的addEventListener函数为oniteminvoked事件注册事件处理函数InvokeItemHandler,在InvokeItemHandler函数中编写处理这个事件的过程代码。

(2)HtmlControl控件

可以在一个页面中使用HtmlControl控件来显示另一个页面的内容。这个控件有一个uri属性,该属性的值为被显示页面的地址,通过赋予该属性不同的值,可在HtmlControl控件所在的位置加载不同的页面。与ListView控件类似,可以通过在一个页面的body元素中定义一个div元素并将data-win-control属性设置成“WinJS.UI.HtmlControl”来向这个页面中添加HtmlControl控件,同时可以通过div元素的data-win-options属性设置HtmlControl控件的属性。

例如,要在一个现有项目的default.html页面中显示项目根目录下的IncludedPage.html页面的内容,那么可以在default.html页面的body元素中定义一个div元素并将data-win-control属性设置成“WinJS.UI.HtmlControl”,同时通过div元素的data-win-options属性设置HtmlControl控件的uri属性值为IncludedPage.html页面的地址,相应的HTML代码片段如下所示:

<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/IncludedPage.html'}"></div>

(3)PageControl控件

PageControl控件是一种自定义控件,可以将一个页面的内容和逻辑功能定义成一个PageControl控件,然后通过在其他页面中添加这个PageControl控件来加载相应的页面内容,这样就方便了在多个页面中加载相同的页面内容。

可以使用WinJS.UI.Pages命名空间下的define函数来将一个页面定义成PageControl控件,该函数有uri和members两个参数,其中uri表示页面的地址,members是对这个页面中的成员进行的一些初始化操作,该函数执行完成后会返回一个PageControl类型的对象,语法格式如下所示:

var pageControlObject = WinJS.UI.Pages.define(uri, members);

定义了PageControl控件后,如果想要向一个页面中添加这个控件,可以在该页面的body元素中定义一个div元素并将data-win-control属性设置为define函数所返回的PageControl对象,同时还需要在这个页面的head元素中引用定义PageControl控件的Javscript文件。

(4)Menu控件

在开发应用程序时使用Menu控件可以创建命令菜单弹出窗口。Menu控件的常用属性有:

alignment属性,用于设置命令项的对齐方式,属性值有“center”、“left”和“right”,默认值为“center”。

commands属性,用于向菜单弹出窗口中添加命令。

hidden属性,用于判断Menu控件是否隐藏。

q  placement属性,用于设置菜单弹出窗口的默认位置,属性值有“auto”、“top”、“bottom”、“left”和“right”,默认值为“auto”。

当对Menu控件进行操作时,不同的操作会触发不同的事件,该控件的事件有:

onafterhide事件,命令菜单弹出窗口被隐藏之后会触发该事件。

onaftershow事件,命令菜单弹出窗口显示后会触发该事件。

onbeforehide事件,命令菜单弹出窗口被隐藏之前会触发该事件。

onbeforeshow事件,已被隐藏的命令菜单弹出窗口显示前会触发该事件。

   

在介绍了Menu控件的常用属性和事件后,下面来看一下如何向页面中添加Menu控件,以及如何为Menu控件设置属性和注册事件处理函数。

通过在页面中定义一个div元素并将data-win-control属性设置为“WinJS.UI.Menu”可以向页面中添加Menu控件,但只能通过编写JavaScript代码的方式为Menu控件设置属性。例如,要向一个页面中添加一个Menu控件并设置命令项的对齐方式为左对齐,那么可以在这个页面的body元素内定义一个div元素并将div元素的data-win-control属性设置成“WinJS.UI. Menu”,为了能检索到这个div元素,设置它的id属性值为“menuID”。相应的HTML代码片段如下所示:

<div id="menuID" data-win-control="WinJS.UI.Menu"></div>

这样就向这个页面中添加了Menu控件,然后在后台编写JavaScript代码来设置这个Menu控件的alignment属性值为“left”,JavaScript代码片段如下所示:

var menuControl = document.getElementById("menuID").winControl;

menuControl.alignment = "left";

添加了Menu控件之后,除了能够后台设置控件的属性之外,还可以在后台使用addEventListener函数来为其注册相关事件的处理函数。例如,为上面示例中的Menu控件注册onafterhide事件的处理函数HideMenuHandler,相应的JavaScript代码片段如下所示:

var menuControl= document.getElementById("menuID").winControl;

menuControl.addEventListener("afterhide", HideMenuHandler);

function HideMenuHandler() {

    /* 在此处编写事件处理过程的代码 */

}

在上面的代码中,首先以“menuID”作为参数调用document对象的getElementById函数并使用winControl属性获得id属性值为menuID的元素对象,并赋给变量menuControl。然后通过menuControl变量调用元素对象的addEventListener函数为onafterhide事件注册处理函数HideMenuHandler,在HideMenuHandler函数中编写处理这个事件的过程代码。

上一篇:CF1620F 题解


下一篇:C#编程 委托 Lambda表达式和事件