W3C Widget 配置与打包

W3C Widget 概述

W3C “Widget 打包和配置” 规范是一个新兴的用于配置、打包和部署 Widget 的规范。 W3C Widget 由 HTML、层叠样式表（CSS）、JavaScript 文件和其它资源组成，如图片。 我们可以在设备中使用 Widget 实现一些小型应用，如日历、天气预报、聊天等等。

相对于普通的 Web 应用，使用 Widget 的优点在于它们可以一次下载，然后多次使用， 这类似于安装在设备上的非 Web 应用。这可以让用户节省带宽， 因为它们所传输的数据只是 Widget 使用的数据，而不包括 Widget 文件本身。

Widget 通常都实现了富用户体验，如交互式日历，甚至是游戏。我们可以在移动设备上使用 Widget，而 Widget 的一次下载、重复使用的优点可以节省数据传输的花费。

从 2010 年 1 月起，W3C “Widget 打包和配置” 规范 （见 参考资料 中的完整规范的链接） 就处于候选推荐状态。这表示 W3C 认为这个规范已经处于稳定状态， 并鼓励开发人员实现这个规范。

W3C Widget 规范的目标是提出一个创建和打包 Widget 的标准。 目前有许多不同的供应商支持 Widget （见 参考资料）， 并且他们几乎都实现了它们自己的私有应用程序接口（API）和打包格式。

本文将介绍 W3C 的打包和配置规范， 介绍我们可以怎样将 HTML、CSS 和 JavaScript 文件打包成一个可以部署到实现 W3C Widget 规范的设备的 Widget。 因为这是一个新兴的规范，支持 Widget 渲染的设备实现还是很有限的。如果希望看到 Widget 的实际运行， 同时还没有安装这些应用，我们就需要先下载这些具体的应用。

要查看 W3C Widget 包的运行，我们需要：

• 实现 W3C Widget 规范的软件。本文使用的是 Apache Wookie，它是一个 Apache Incubator 项目， 它的作用是作为了 W3C Widget 内容服务器，用户可以用它来部署 W3C Widget。
• 一个创建 Widget 压缩文件包的工具。
• 用于下载和安装 Apache Wookie 的 Subversion (SVN) 客户端。

相关技术：其它 Widget 和服务器

目前市面上有许多不同版本的 Widget 和 Gadget，所以有时很难分辨这些技术之间的区别。 Widget 技术的差别增加了创建可重用富用户 Web 组件的难度。

Widget 与 Gadget

根据本文的撰写目的，Widget 和 Gadget 表示的是相同的意思 — 可以像应用一样安装和运行在本地的小型组件。 本文采用的是与供应商相对应的方式来使用 Widget 或 Gadget。例如，如果是 W3C 产品，我们称为 Widget， 而对于 Google 的产品，我们则称为 Gadget。

除了 Microsoft® Windows® Vista Gadgets 和 Apple® Widgets，类似的技术还包括 Google Wave Gadgets、 OpenSocial 和 OpenAjax。这些技术都有自己的 API 和规范 （见 参考资料）。

Google Wave Gadgets

Google Wave Gadgets 概念上类似于 W3C Widgets，但是前者只是用在 Google Wave Web 应用中。 相反，W3C Widgets 则是由 W3C 发布的一个规范，是公开的，可以被不同的供应商使用。

Google Wave 是一个 Web 应用，目前处于对开发人员和早期希望学习这个技术的用户开放的有限预览的阶段。 Google Wave 主要是一个社交工具，它以 Google Wave Gadgets 的方式向用户提供不同的功能。 开发人员可以创建 Gadgets 向 Wave 用户提供特定的功能。

OpenSocial

OpenSocial 是一个API，它可以用来创建能运行在社交网络 Web 应用中的 Gadgets。 OpenSocial 1.0 规范目前正处于预览阶段， 而 0.9 版本和 0.8.1 版本已经在各种 containers （使用 Gadgets 的 Web 应用）中使用了， 如 iGoogle、MySpace、Yahoo 和 LinkedIn。

OpenSocial Gadgets 是基于 Google Gadgets 框架的。OpenSocial 框架包括预先写好的 JavaScripts API， 我们可以使用这些 API 来操作人、活动和持久化等数据。

OpenSocial 是另一种备受关注的创建 Gadgets 的方法。

OpenAjax

OpenAjax 是 “一个专注于成功应用开放和互操作的基于 Ajax Web 技术的组织。 它由主流供应商、开放源码项目和使用 Asynchronous JavaScript + XML (Ajax) 技术的公司所组成” （见 参考资料）。

OpenAjax Hub 提供的发布和订阅（pub/sub）技术可以在 OpenSocial Gadgets 中使用。

由于 OpenAjax 基于 W3C 打包和配置规范创建的 Widgets 能够使用 Ajax， 因此它是创建能改进互操作性的 Widgets 的一个非常好的技术。 我们可以创建既使用 OpenAjax 又符合 W3C Widget 规范的 Widgets。

Apache Wookie

Apache Wookie 是一个 Apache Software Foundation 的孵化项目，它能够同时作为 Google Wave Gadgets 和 W3C Widget 包的服务器。 Apache Wookie 是一个服务器应用，可以作为一个 Web 应用下载安装，或者作为单独的服务器运行。

获取 Apache Wookie 源代码也是查看 W3C Widget 源代码的一种很好的方法。

目前官方网站 （见 参考资料） 上还没有预编译好的 Apache Wookie 二进制包， 所以需要安装 SVN 才能下载和运行 Apache Wookie。 使用 清单 1 中显示的简单命令就可以下载 Apache Wookie。

清单1. 下载 Apache Wookie

				
	$ svn co http://svn.apache.org/repos/asf/incubator/wookie/trunk

在下载 Apache Wookie 后，我们可以通过输入 清单 2 中显示的命令来将它作为了一个独立服务器运行：

清单 2. 以独立模式运行 Apache Wookie

				
	$ ant run

ant 命令会以独立模式启动 Apache Wookie 服务器。 在服务器启动后，我们可以通过这个地址访问 Widgets：http://localhost:8080/wookie/。

Widget 配置

创建一个 Widget，首先要创建一个以 Widget 名称命名的目录，如：myWidget。 （在允许使用带点文件名的操作系统上，可以使用 myWidget.wgt。） 我们将会把新的 Widget 文件放到这个目录中。如果想要创建和测试新的 HTML、CSS 和 JavaScript 文件， 我们可以把这个目录创建在 Web 服务器的文档根目录下，这样我们就可以在打包 Widget 前通过浏览器查看 HTML 文件。

每一个 Widget 包必须有一个名为 config.xml （大小写敏感）的配置文件，它就位于我们刚创建的空目录下， 这个目录就是包的根目录。这个配置文件包含了关于 Widget 的重要信息，如：名称、作者、描述、许可证等等。

清单 3 中显示的是一个配置文件例子。

清单 3. 一个示例 config.xml 文件

				
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
id="http://www.example.com/widgets/HelloWidget"
version="0.1" width="300" height="200">
  <name>HelloWidget</name>
  <description>A very basic widget that says, "Hello"</description>
  <content src="index.html" />
  <icon src="images/icon.png" />
  <access network="false" />
  <author>Nathan A. Good</author>
  <license>This is my license</license>
</widget>

这个 XML 文件必须采用 UTF-8 编码，如例子所示。

Widget 父元素有详细说明 Widget 信息的属性，如 表 1 所示。

表 1. Widget 父元素的属性

属性名 描述

id	惟一 URI，它是 Widget 的标识
version	Widget 的版本号
width, height	分别以像素值表示 Widget 的宽和高
viewmodes	Widget 的查看模式 （见 参考资料）

配置中的 XML 元素如 表 2 所示。

表 2. Widget 配置元素

元素名 描述

name	Widget 的缩写名是在属性 short 指定的， 而全名在 XML 元素的文本中指定。
description	Widget 的描述信息
author	Widget 的作者信息
license	Widget 的许可证
icon	图标文件的相对路径

在创建一个简单的配置文件后，我们就可以创建开始文件了。

开始文件

除了 config.xml 配置文件之外，一个有效的 W3C Widget 包至少还需要另一个文件：开始文件。 如果没有指定开始文件，默认的文件就是文件名以 index 开始的文件 —— 通常带有 .html、.htm 或 .xhtml 扩展名。 不同类型的 Widgets 可能允许使用其它的扩展名，但本文仅关注标准的 HTML 例子。

清单 4 显示了一个示例文件。

清单 4. 一个示例开始文件

				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Content-Type" content=
  "text/html; charset=us-ascii" />
  <title>HelloWorld</title>
  <link rel="stylesheet" href="style/common.css" type="text/css" />
</head>
<body>
<h1>Hello World...</h1>
</body>
</html>

清单 4 中显示的 HTML 文件和其他可以显示在浏览器上的符合语法的 HTML 文件很相像。 这使得 Widget 设计时很容易 — 我们像普通的 HTML 页面一样创建 Widget。 这个 HTML 开始文件就是用来渲染 Widget 的文件。

因为 Widget 是由浏览器所渲染的一个简单的 HTML 文件，它们可能包含了 JavaScript 文件。 使用 JavaScript 功能可以使 Widget 拥有富内容和动态内容。 我们可以使用 Ajax 在 Widget 中动态地向用户显示数据。（见 参考资料 中关于 Ajax 的信息）

Widget 的 HTML 开始文件中所引用的 JavaScript 文件必须包含在打包的 Widget 存档包中。

这个 Widget 的示例 HTML 文件还使用了 CSS 样式表。类似于 JavaScript 文件， 这些 CSS 文件也必须包含在作为打包部署的 Widget 的压缩文件存档中。

W3C 规范也规定了本地化（i10n）准则。本地化支持是基于文件夹的， 所以我们可以在 Widget 目录下创建一个名为 locales 目录。 在 locales 文件夹内，我们可以创建以本地化名称命名的文件夹 （例如，en、fr、de）， 它们包含了适合于各个本地化的不同资源。

打包 Widget

Widget 被打包成标准的压缩存档文件，扩展名为 .wgt。 我们可以使用 DEFLATE 方法将一个 Widget 包压缩成一个存档文件。 压缩文件存档包必须包含配置文件、开始文件和文件所使用的所有资源，如 JavaScript 文件、CSS 和 图片。

我们可以使用 清单 5 中所示的命令行工具来创建一个 Widget 的压缩文件包。

清单 5. 创建压缩文件存档包

				
$ cd myWidget
$ zip myWidget.wgt *

我们也可以使用一个图形化用户界面（GUI）来创建 Widget 的压缩文件存档包。 在创建存档包后，我们只需要将扩展名 .zip 修改为 .wgt 即可。

我们可以将 Widget 包按目录整理好，这样就更容易管理包。 例如，图 1 显示了诸如 images、style 和 scripts 的文件夹， 我们可以使用这些文件夹来管理 Widget 包。

图 1. W3C Widget 包文件夹结构

在开始文件中引用资源时，要像部署在 Web 服务器上一样使用相对路径。 例如，使用 style/common.css 引用 style 文件夹下的 common.css 文件， 虽然它们都是包含在 Widget 包的压缩文件存档中。

我们还可以用数字符号来指定 Widget 包文件的安全性设置。 具体可以查看 参考资料 中关于数字方式标记 Widget 包的 W3C 规范的信息。

部署 Widget

有限的实现

因为 W3C Widget 规范是新出现的，而且现在有许多不同的私有 Widget 规范， 所以现在还很难找一个能达到生产环境质量要求的 W3C Widget 规范实现。 Apache Wookie 就是一个还在开发中的 W3C Widget 规范的实现例子。 因为它还在开发过程中，它可能还不稳定。当我运行我的测试时， SVN 中的代码还有一些导致 Apache Wookie 暂时出错的更新， 但它们已经在后面的更新中解决了。

我们可以使用 Apache Wookie 的 Administrative 菜单部署 Widget。我们先要保证 Wookie 正在运行 （在命令行中输入 ant run），然后在浏览器上输入 Apache Wookie 的位置， 我们就可以访问 Apache Wookie 的菜单。默认情况下，它的位置是 http://localhost:8080/wookie。 点击 Administrative 菜单链接（见 图 2）。

图 2. Administrative 菜单链接

我们会被提示输入用户名和密码。如果我们没有修改默认值，用户名和密码都应该是 java。

单击 图 3 所示的 Add new widget。

图 3. 添加一个新的 Widget

单击 Choose File，然后浏览 Widget 存档文件。选择文件，然后单击 Publish（见 图 4）。

图 4. 选择 Widget 存档文件

然后，Apache Wookie 会处理 Widget 存档。当存档处理完成后， 我们可以在 Widget 清单和 Widget 库中看到所发布的 Widget。

另外，我们也可以在 Apache Wookie 中不使用管理工具部署 Widget。 只需直接将 Widget 包复制到 build.properties 文件中 widget.deploy.dir 所配置的部署目录即可。

部署和配置 W3C Widget 的规范包括了具体实现应该如何处理 Widget 存档文件的推荐规范。 当一个实现（如浏览器）下载一个包时，它会将 Widget 包作为一个可能的 Widget 包看待。 浏览器会验证包的完整性，保证它是正确创建的，而且配置文件是完整的。 如果这个 Widget 包符合标准，它就会被作为一个有效的 Widget 包进行处理。

查看示例

Apache Wookie 允许我们在所有浏览器上查看 Widget，所以我们不需要搜索实现 W3C 规范的浏览器（类似于 Opera 浏览器的 Widget 实现）。 理想地，浏览器将会实现 W3C Widget 规范，所以用户可以利用 Widget 的一次下载、重复使用的优点。

为了查看我们新创建的 Widget，我们必须确保 Apache Wookie 已经运行，并能从浏览器访问它。 单击 View Widget Gallery，我们就可以看到所部署的 Widget 已经列在库中（见 图 5）。

图 5. 查看 Widget 库

单击 Demo 查看 Widget 的运行结果。

我们也可以创建一个测试文件，它用一个 iframe 元素包含我们创建的新 Widget。 创建一个如 清单 6 所示的 HTML 文件。

清单 6. 一个简单的运行 Widget 的 HTML 文件

				
<html>
<head><title>Widget sample</title>
<body>
<iframe src=
"http://localhost:8080/wookie/wservices/wookie.apache.org/widgets/butterfly/index.html
?idkey=sM4aI8pnUUNI2Kfz15aK2h6vIek.eq.&amp;proxy=http://localhost:8080/wookie/proxy
&amp;st=wookie%3AwEQZrCsxTF502%2B6JeeEFlkq1KPgqXKQTllufS6Toez81qb40hPouhYV3apG4on23uVB
kQ5xlLjOXvIKulGqKBZvnKv2pgfEMg7OVzJpdDQt66MfODW6BBJry33ybOyMSc2hKonu7Sp1n1SY6FOFUuRx8VAjED
TuJip8BQ9i6ZXRH9193FT%2F7Ijjz0o1vdR91ofzcFA%3D%3D" width="500" height="400">
</body>
</html>

我们将看到所创建的 Widget 显示在网页中。我使用的 Widget URL 是来自于 Wookie 主菜单的 Instantiate a widget 的执行结果。

我们还可以查看其他示例包，它们包含了更复杂的 JavaScript 文件、CSS 和图片，这些示例包是和 Apache Wookie 源代码一起发布的。 在下载了 Apache Wookie 源代码后，子文件夹 widgets 中就包含了其他 Widget 的源代码。

结束语

W3C “Widget 打包和配置” 规范是一个新兴的创建 Widgets 的 W3C 规范，这些 Widgets 能够实现富用户界面并节省带宽。

W3C Widget 规范使用开放的、非私有的标准，如：HTML、CSS、JavaScript 和 压缩文件存档。因为这个规范是新出现的， 它现在还只有少数的实现，但是它是一个可以实现 Widget 标准化的很有前景的规范。

参考资料

学习

• 阅读 W3C “Widget Packaging and Configuration” 规范全文。
  
  
• 要了解更多关于数字方式标记 W3C Widget 包的方法，请阅读 Widgets 1.0: Digital Signatures。
  
  
• 阅读仍在修改的草案 Widgets 1.0: View Modes Media Feature，了解更多关于不同 Widget 查看模式的信息。
  
  
• 了解更多关于 OpenSocial 的信息。
  
  
• 了解更多关于 OpenAjax 的信息。
  
  
• 阅读 “Wave Gadgets Tutorial” 了解更多关于创建 Google Wave Gadgets 的信息。
  
  
• 阅读 “Introduction to W3C Widgets” 了解更多关于移动设备上的 W3C Widgets 和浏览器问题的信息。
  
  
• developerWorks Web development 专区：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
  
  
• developerWorks Ajax 资源中心：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
  
  
• developerWorks Web 2.0 资源中心，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门 栏目，迅速了解 Web 2.0 的相关概念。

原文：http://www.ibm.com/developerworks/cn/web/wa-w3cwidget/?ca=drs-tp4608 

 

<!-- CMA ID: 516882 --><!-- Site ID: 10 --><!-- XSLT stylesheet used to transform this file: dw-article-6.0-beta.xsl -->