W3C Widget配置与打包-51CTO.COM

W3C Widget配置与打包是本文要介绍的内容，主要是来了解并学习W3C Widget的应用，看本文详解W3C Widget的配置与打包操作，来看内容详解。

了解W3C Widgets候选规范

NathanA.Good居住在明尼苏达州的双子城。他的专长是软件开发、软件架构和系统管理。平时不编写软件时，他喜欢组装PC和服务器、阅读和撰写技术文章，并鼓励他的所有朋友转用开源软件。他是许多书籍和文章的作者或合著者，包括

ProfessionalRedHatEnterpriseLinux3,RegularExpressionRecipes:AProblem-SolutionApproach和FoundationsofPEAR:RapidPHPDevelopment。

(AnIBMdeveloperWorksContributingAuthor)

World Wide Web Consortium(W3C)的“Widget打包和配置”规范目前仍处于候选推荐状态。Widget是一种在Hyper text Markup Language(HTML)中使用的新兴技术，它可用于实现移动设备和网站的富Web应用元素。它们打包成压缩文件（.zip），可以将一种MultipurposeInternetMailExtensions(MIME)类型的应用或Widget部署在HTML文件中。本文将深入探讨这个规范，阐述Web应用开发人员可以怎样使用它，它的好处有哪些。

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文件打包成一个可以部署到实现W3CWidget规范的设备的Widget。因为这是一个新兴的规范，支持Widget渲染的设备实现还是很有限的。如果希望看到Widget的实际运行，同时还没有安装这些应用，我们就需要先下载这些具体的应用。

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

实现W3C Widget规范的软件。本文使用的是ApacheWookie，它是一个ApacheIncubator项目，它的作用是作为了W3C Widget内容服务器，用户可以用它来部署W3C Widget。

一个创建Widget压缩文件包的工具。

用于下载和安装ApacheWookie的Subversion(SVN)客户端。

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

Widget与Gadget

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

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

GoogleWaveGadgets

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

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

OpenSocial

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

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

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

OpenAjax

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

OpenAjaxHub提供的发布和订阅（pub/sub）技术可以在OpenSocialGadgets中使用。

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

ApacheWookie

ApacheWookie是一个ApacheSoftwareFoundation的孵化项目，它能够同时作为GoogleWaveGadgets和W3C Widget包的服务器。ApacheWookie是一个服务器应用，可以作为一个Web应用下载安装，或者作为单独的服务器运行。

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

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

清单1.下载ApacheWookie

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

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

清单2.以独立模式运行ApacheWookie

$antrun

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

#p#

Widget配置

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

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

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

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

id="http://www.example.com/widgets/HelloWidget" 
version="0.1"width="300"height="200"> 
HelloWidget  
Averybasicwidgetthatsays,"Hello"  
NathanA.Good  
Thisismylicense

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

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

表1.Widget父元素的属性

属性名描述

id惟一URI，它是Widget的标识

versionWidget的版本号

width,height分别以像素值表示Widget的宽和高

viewmodesWidget的查看模式（见参考资料）

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

表2.Widget配置元素

元素名描述

nameWidget的缩写名是在属性short指定的，而全名在XML元素的文本中指定。

descriptionWidget的描述信息

authorWidget的作者信息

licenseWidget的许可证

icon图标文件的相对路径

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

开始文件

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

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

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
"text/html;charset=us-ascii"/> 
HelloWorld...

清单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），它们包含了适合于各个本地化的不同资源。

#p#

打包Widget

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

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

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

$cdmyWidget  
$zipmyWidget.wgt*

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

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

图1.W3CWidget包文件夹结构

一个 Widget 包文件夹结构截图。其中包含了images、legal、lib、scripts 和 style 文件夹。

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

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

部署Widget有限的实现

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

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

图2.Administrative菜单链接

这是 Wookie 菜单的一个截图，它显示了 Main 菜单、Options、View Widget Gallery 和 Administration 等选项。

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

单击图3所示的Addnewwidget。

图3.添加一个新的Widget

这是 Widget 菜单的一个截图，它显示了 View existing widgets、Add new widget、Add new Google Gadget/OpenSocial app 和 Remove widget from system 等选项。

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

图4.选择Widget存档文件

这是一个标题为 ‘Select a widget archive (zip) to uplaod’ 的窗口截图。然后窗口上还有3个按钮 'Choose file'、'Publish' 和 'Clear'。

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

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

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

#p#

查看示例

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

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

图5.查看Widget库

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

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

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

"http://localhost:8080/wookie/wservices/wookie.apache.org/widgets/butterfly/index.html  
?idkey=sM4aI8pnUUNI2Kfz15aK2h6vIek.eq.&proxy=http://localhost:8080/wookie/proxy  
&st=wookie%3AwEQZrCsxTF502%2B6JeeEFlkq1KPgqXKQTllufS6Toez81qb40hPouhYV3apG4on23uVB  
kQ5xlLjOXvIKulGqKBZvnKv2pgfEMg7OVzJpdDQt66MfODW6BBJry33ybOyMSc2hKonu7Sp1n1SY6FOFUuRx8VAjED  
TuJip8BQ9i6ZXRH9193FT%2F7Ijjz0o1vdR91ofzcFA%3D%3D"width="500"height="400">

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

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

小结：W3C Widget配置与打包的内容介绍完了，希望通过W3C Widget应用中的配置与打包内容的学习能对你有所帮助！