柠檬铺

使用 JavaScript 在 Windows 应用商店应用程序中构建

—

由

柠檬铺
于

下载代码示例
在 前一篇文章“使用 JavaScript 在 Windows 应用商店应用程序中进行数据绑定”中，我们探讨了 Windows JavaScript 库 (WinJS) 及其对数据绑定的支持。在使用数据绑定时，数据绑定通常位于控件环境中，这就是为什么我们用了这么多时间来深入讨论 ListView 控件的管理和维护（您可以在 msdn.microsoft.com/magazine/jj651576 中查看这篇文章）。在本文中，我们将快速介绍一下在您作为 JavaScript 程序员构建 Windows Store 应用程序时可供您使用的控件。并且，如果这些控件无法满足您的需要，我们将会介绍如何构建您自己的应用程序。
当使用 JavaScript 在 Windows 应用商店应用程序中构建控件时，您可以访问若干系列中的控件：

  • HTML5 元素： 从 HTML5 元素是可重复使用的 UI 和行为块这个意义上来说，HTML5 元素属于控件，例如 <progress /> 和 <a />。
  • WinRT 控件： 作为投影到 JavaScript 中的 Windows 运行时 (WinRT) 类公开的控件，例如 Windows.UI.Popups.PopupMenu。
  • WinJS 控件： 作为 JavaScript 类实现的控件，例如 WinJS.UI.ListView。
  • CSS 样式： CSS 提供若干样式，这些样式允许您对内容项进行布局，就好像它们是控件容器一样，例如列计数： 4.

在本文中，我们将重点讨论前三个类别的控件。

HTML5 元素

因为使用 JavaScript 构建的 Windows 应用商店应用程序基于 Web 技术，因此所有 HTML5 元素都会正常运行，如图 1 所示。

图 1 可用于使用 JavaScript 构建的 Windows 应用商店应用程序的 HTML5 控件
HTML5 元素的详细信息不在本文的介绍范围之内，但我们建议您参阅相关 HTML5 文档以便了解更多信息。此外，用于创建图1 的示例在随附的源代码下载中提供。

WinRT 控件

Windows 运行时提供所有类型领域中的所有类型功能，但就控件而言，它仅提供两个：

  • 消息对话框： 具有可选标题的消息。
  • 弹出菜单： 限制为六个或更少项的菜单。

使用 MessageDialog 函数调用该消息对话框：

双击代码全选

1

2

3

          var popups = Windows.UI.Popups;  

var mb = new popups.MessageDialog("and welcome to my message box!", "Hello!");  

mb.showAsync();

 

MessageDialog 类具有一个 showAsync 方法，该方法返回一个承诺，就像使用 JavaScript 构建的 Windows 应用商店应用程序已经拥有的所有其他异步操作一样。但在本例中，我们忽略该约定，因为我们通常不关心对话框何时消失。图 2 显示结果（使用“MessageBox”，这是以前用于 MessageDialog 的术语）。

图 2 WinRT 消息对话框
以类似方式使用 PopupMenu 类：

双击代码全选

1

2

3

4

5

6

7

8

          var popups = Windows.UI.Popups;  

var menu = new popups.PopupMenu();  

menu.commands.push(new popups.UICommand("one", null, 1));  

menu.commands.push(new popups.UICommand("two", null, 2));  

menu.showAsync({ x: 120, y: 360 }).done(function (e) {  

  // Do something with e.label and/or e.id  

  ...  

          });

 

在这个示例中，在创建 PopupMenu 对象后，我们提供两个 UICommand 对象，每个对象都具有一个标签以及可选的回调和 ID 参数。我们没有将回调用于此示例中的每个命令，因为我们在“done”完成方法中捕获事件参数。一个弹出菜单看上去符合您的期望，如图 3 中所示。

图 3 WinRT 弹出菜单
请记住，在撰写本文时，上下文菜单限制为仅六个项。

WinJS 控件

尽 管 HTML5 控件丰富且各不相同，但在万维网联合会决定添加新的元素标签且浏览器供应商决定实现新标签之前，该控件集将是不可扩展的。同样，WinRT 控件集也不可扩展（尽管您可以构建非 UI Windows 运行时组件）。对于使用 Windows 应用商店应用程序专门构建的控件的可扩展集合，其优势是 WinJS 提供的集合。
WinJS 控件是在 JavaScript 中实现的控件，在构造函数中提供某个签名：

双击代码全选

1

2

      function MyControl(element,  

options) {...}

 

元素参数是 HTML 文档对象模型 (DOM) 元素，旨在充当控件内容的宿主，通常为 div。选项参数是 JavaScript 对象，用于提供可选的配置参数，例如 ListView itemDataSource 属性。
若要看到 WinJS 控件的实际效果，我们来看看旨在充当 DatePicker 控件宿主的 div：

双击代码全选

1

<div id="datePickerDiv"></div>

 

这种情况下，我们可以轻松地按如下所示创建 DatePicker：

双击代码全选

1

var datePicker = new WinJS.UI.DatePicker(datePickerDiv);

 

输出是全新的 DatePicker 控件，如图 4 中所示。

图 4 DatePicker 控件的输出
如果我们想要配置一个控件，可以传入一组选项：

双击代码全选

1

var datePicker = new WinJS.UI.DatePicker(datePickerDiv, { current: "6/2/1969" });

 

就 DatePicker 而言，当前选项允许我们设置当前显示的日期，如图 5 中所示。

图 5 设置当前显示的日期