Win10系列：JavaScript 的 WinJS库

WinJS 库是由 CSS 和 JavaScript 文件组成的。使用Visual Studio 2012新建一个JavaScript 的Windows应用商店的空白应用程序项目，在项目的引用管理器中会默认添加这个库，如图19-1所示：

图19-1 JavaScript 的 WinJS库

上图可以看出，WinJS库主要包含ui-dark.css、ui-light.css、base.js和ui.js四个文件。其中ui-dark.css和ui-light.css是JavaScript主题风格库，ui-dark.css表示昏暗风格，而ui-light.css表示明亮风格；base.js是WinJS的基础类库，包含了处理程序激活、挂起、异常等行为的函数；ui.js是WinJS控件库，包含了一些Windows 应用商店应用的前台界面常用的控件和控件样式。

新建项目的default.html页面会默认引用WinJS 库中的ui-dark.css、base.js 和ui.js文件。相关代码如下所示：

2.
WinJS库中的命名空间

为了防止同名函数和变量发生冲突，同时也可以方便代码的管理，在WinJS库中也使用了命名空间的概念来规划库中的资源，这些命名空间封装了与Windows应用商店应用开发相关的对象和函数。通过相应的命名空间名称能对该空间里的对象和函数进行访问。接下来介绍WinJS库中几个主要的命名空间。

（1）WinJS.UI.Pages命名空间

WinJS.UI.Pages命名空间主要包含PageControl 控件和 define函数。其中PageControl 控件与其他的WinJS库控件有所不同，它是一种自定义控件，需要使用WinJS.UI.Pages命名空间下的define函数来定义PageControl控件。define函数有两个参数，一个是uri，另一个是members，uri为页面的地址，members是对这个页面中的成员进行的一些初始化操作，相关语法格式代码如下所示：

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

（2）WinJS.Binding 命名空间

WinJS.Binding 命名空间里面主要包含在数据与模板绑定时所使用的一些对象，如List对象和Template对象。List对象用于表示数据列表，通过WinJS.Binding.List函数可以新建一个List对象，该函数有一个数组类型的参数，表示初始化列表的数据集合，语法格式代码如下所示：

var JSlist = new WinJS.Binding.List(list);

例如先定义一个数据集合myData，然后使用WinJS.Binding.List函数创建一个itemsList数据列表，并用myData数据集合初始化该数据列表，相关代码如下所示：

//数据集合

var myData = [

{ title: "Banana", text: "Low-fat frozen yogurt", picture: "images/Banana.png" },

{ title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/Lemon.png" },

{ title: "Marvelous Mint", text: "Gelato", picture: "images/Mint.png" },

{ title: "Creamy Orange", text: "Sorbet", picture: "images/Orange.png" },

{ title: "Succulent Strawberry", text: "Sorbet", picture: "images/Strawberry.png" }

];

// 创建一个List对象

var itemsList = new WinJS.Binding.List(myData);

在上面的代码中，首先定义用于初始化列表的数据集合myData，myData是一个数组类型的对象，包含了五个数据对象，每个数据对象都有三个属性title、text和picture，其中title属性的值为数据对象的标题，text属性的值为对数据对象的描述，picture属性的值为数据对象中图片的地址。接着以myData为参数调用WinJS.Binding.List函数创建一个itemsList数据列表。

Template对象即Template控件，用于格式化显示数据内容。值得注意的是Template控件内部只能有一个根元素，向Template控件添加其他元素都要在这个根元素里添加。向页面中添加Template控件可以通过在body元素中定义一个div元素，并将div元素的data-win-control属性设置为"WinJS.Binding.Template"来完成。

下面演示向页面中添加一个Template控件，并在Template控件里添加用于显示图片的img元素和用于显示标题的h4元素，相应代码如下所示：

<body>

<div>

<h4>
Banana</h4>

</div>

</body>

在上面代码中，首先在页面的body元素里面定义一个div元素，并将div元素的data-win-control属性设置为"WinJS.Binding.Template"来向页面中添加Template控件。接下来向Template控件添加img和h4两个元素，由于Template控件内部只能有一个根元素，因此先为Template控件添加一个div元素作为根元素。然后向根元素添加img元素和h4元素，并设置img元素的src属性值为"images/Banana.png"，h4元素的显示内容为"Banana"。

另外WinJS.Binding 命名空间内还有一个processAll函数，该函数用来查找绑定目标元素的data-win-bind属性，通过此方法可以把数据源与绑定目标关联在一起。后面在介绍简单对象的数据绑定时会用到processAll函数。processAll函数中有两个参数，一个是rootElement，另一个是dataContext。其中rootElement为绑定目标，dataContext为绑定源，语法格式代码如下所示：

WinJS.Binding.processAll(rootElement, dataContext)；

（3）WinJS.UI命名空间

WinJS.UI命名空间提供一些常用的控件和初始化操作函数，例如DatePicker控件、ListView控件和AppBar控件等常用控件以及processAll函数，这里的processAll函数与上面介绍的processAll函数功能不同。接下来简单介绍下WinJS.UI 命名空间里面的主要控件和函数。

DatePicker控件用于选择一个date类型的值，如用户可以选择年份、月份、日期等信息。通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.DatePicker"可以向页面中添加DatePicker控件。相关代码如下所示：

ListView控件用于以列表或者网格的形式显示多条数据。可以通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.ListView"来向页面中添加ListView控件，还可以通过div元素的data-win-options属性设置ListView控件的属性和值，相关代码如下所示：

AppBar控件用于定义一个显示操作命令的应用栏。可以通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.AppBar"来向页面中添加AppBar控件，相关代码如下所示：

AppBarCommand控件是在AppBar控件中显示的一条命令。一般通过定义一个button元素，并将button元素的data-win-control属性设置为"WinJS.UI.AppBarCommand"来向AppBar控件中添加AppBarCommand命令控件，还可以通过button元素的data-win-options属性设置AppBarCommand控件的属性和值，相关代码如下所示：

</div>

Rating控件用于方便地进行评级。该控件有个averageRating属性，使用这个属性开发者可以获取或者设置平均评级。通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.Rating"来向页面中添加Rating控件，相关代码如下所示：

HtmlControl控件用于加载一个HTML页面。可以通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.HtmlControl"来向页面中添加HtmlControl控件，还可以使用div元素的data-win-options属性把HtmlControl控件的uri属性设置成所要加载的页面地址，相关代码如下所示：

processAll函数用于初始化页面中WinJS库控件。基于空白项目模板新建的应用程序项目中，default.js文件中默认调用了WinJS.UI.processAll 函数，相关代码如下所示：

app.onactivated = function (args) {

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

// 此应用程序刚刚启动。在此处初始化应用程序。

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

}

//此应用程序已从挂起状态重新激活。在此处恢复应用程序状态。

else {

}

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

}

};

下面通过一个小示例演示如何使用Rating控件和WinJS.UI.processAll函数，首先在Visual Studio 2012中新建一个JavaScript 的Windows应用商店的空白应用程序项目，将其命名为rating。然后打开default.html文件，向body元素中添加Rating控件，相关代码如下所示：

<body>

</body>

布置好前台界面后，接下来打开default.js文件，为processAll函数添加初始化代码，相关代码如下所示：

args.setPromise(WinJS.UI.processAll().done(function () {

var control = document.getElementById("ratingControlHost").winControl;

control.averageRating = 3;

})

);

在上面代码中，首先在setPromise函数里调用WinJS.UI.processAll 函数来初始化所添加的Rating控件，通过getElementById函数获取id为"ratingControlHost"的Rating控件，然后把该控件的averageRating属性设置为3。

（4）WinJS.Class命名空间

WinJS.Class命名空间包含一个define函数，用于自定义类。这个函数中有三个参数，一个是constructor，一个是 instanceMembers，另一个是staticMembers。其中constructor参数是类的构造函数，instanceMembers参数为类的成员函数和成员属性，staticMembers参数为静态成员函数和成员属性，语法格式代码如下所示：

var object = WinJS.Class.define(constructor, instanceMembers, staticMembers);

例如使用 define函数定义一个Person类，该类有name属性和一个静态属性harmsHumans，相关代码如下所示：

var Person = WinJS.Class.define(

function (name) {

this.name = name;

{ name: "" },

{ harmsHumans: false });

//声明并实例化Person对象

var person = new Person("paul");

person.name = "jack";

Person.harmsHumans = false;

上面代码中，首先定义Person类，接着实例化一个Person类的对象person，并设置该对象的name属性和harmsHumans属性。由于harmsHumans属性是一个静态属性，可以直接使用类名来调用。

Win10系列：JavaScript 的 WinJS库的更多相关文章

Win10系列：WinJS库控件
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件在开发Windows应用商店应用时可以使用ListVie ...
Windows Store App JavaScript 开发：WinJS库控件
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件在开发Windows应用商店应用时可以使用ListVie ...
Win10系列：JavaScript 模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...
Win10系列：JavaScript 数据绑定
使用数据绑定可以使页面中元素的属性值与数据源中的数据同步,其中数据源可以来自数据库.文件以及自定义的数据等.在常用的数据绑定方法中,简单对象绑定是将HTML元素与一个仅包含数据的简单对象相绑定,模板绑 ...
Win10系列：JavaScript页面导航
页面导航是在开发应用的过程中使用频率较高的技术,其中比较常用的导航方式有多页导航和页内导航,采用多页导航方式的应用程序包含一系列的页面,在一个页面中加入另一个页面的链接地址后,单击链接将跳转到指定页面 ...
Win10系列：JavaScript小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
Win10系列：JavaScript 控件的使用
向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件.其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框:WinJS库控件是为开发基于JavaScript 的Wi ...
Win10系列：JavaScript 项目模板中的文件和项模板文件
通过上面内容的学习,相信读者已经对各种项目模板和项模板有了大致的了解,本节将进一步介绍项目模板中默认包含的项目文件以及项模板文件,首先讲解这些文件中的初始内容以及作用,然后介绍在一个页面中如何添加控件 ...
顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下 ...

随机推荐

PostgreSQL安装及使用教程一（exe安装方式）
下载安装百度搜索PostgreSQL,进入官网,选择相应版本的图形化安装程序(BigSQL)安装即可连接数据库对数据库操作有两种方式,一种是通过命令行工具psql,另一种是通过图形化界面pgAd ...
一个请求需要调用两个不同的数据库添加DbContext
当请求进入application中的方法时会开启一个工作单元这里面调用不同的DbContext 会默认使用第一次调用的DbContext 需要手动开启工作单元来隔离两个不同的DbContex ...
Spring Cloud 入门教程(一): 服务注册
1. 什么是Spring Cloud? Spring提供了一系列工具,可以帮助开发人员迅速搭建分布式系统中的公共组件(比如:配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁 ...
Windows下tomcat启动一闪而过
1.用记事本打开tomcat/bin/setclasspath.bat 2.添加两行代码,jdk和jre的根目录,相当于直接给出JAVA_HOME和JRE_HOME路径 set JRE_HOME=D: ...
JavaScript 第七章总结
前言主要介绍了关于 JavaScript 中有关 type 的问题.讲了很多关于各种 type 的 idiosyncrasies. 谈谈JavaScript types 在 JavaScript 中 ...
tchart...
using System;using System.Collections;using System.ComponentModel;using System.Drawing; using System ...
雷林鹏分享：C# 判断
C# 判断判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的). 下面是大多数编程语言中典型的判断结构的一般形式: 判断语句 C ...
Jumpserver3.0部署(Centos6.x)
1.jumpserver基础环境准备[root@jumpserver ~]# yum -y install epel-release[root@jumpserver ~]# yum clean all ...
Linux命令详解-file
file命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 1．命令格式: file [ -bchikL ...
layuitable设置数据表
如图,要设置类似这样的格式步骤如下: 1. 设置一个列表表格 2. 获取数据 table.render({ elem: '#pl-list' ,id: 'pl_table' ,height: 480 ...

Win10系列：JavaScript 的 WinJS库

Win10系列：JavaScript 的 WinJS库的更多相关文章

随机推荐

热门专题