实战 iWidget 开发

第 8 页，共 13 页 文档选项 讨论 样例代码 对本教程的评价 帮助我们改进这些内容

打包、嵌入模式与调试

打包

当一个 iWidget 开发完成之后，可以对其打包以方便部署。打包与部署的格式与 iWidget 的运行环境有关。由于本文中使用的运行环境是 IBM Mashup Center，所以下面提到的打包和部署格式是针对 IBM Mashup Center 的。在前面章节中提到了在 IBM Mashup Center 中有两种方式可以部署 iWidget，一种是使用 iWidget 定义文件的 URL，另外一种是使用 Web 应用程序归档文件（WAR）格式。

iWidget 定义文件 URL

前面也提到过，使用 iWidget 定义文件 URL 是一种比较灵活的方式，你可以选用自己所熟悉的 Web 开发技术来创建服务器端的实现。比如，如果你的 iWidget 的服务器端实现是用的 Ruby on Rails，那么只需要确保 iWidget 定义文件是可以通过 URL 访问的就足够了。如果你的 iWidget 只包含浏览器端的实现，默认配置的 Apache HTTP 服务器就足以满足你的需求。

iWidget Web 应用程序归档文件

iWidget WAR 文件格式详细说明 在一个打包的 WAR 文件中，可以包含多个 iWidget 。需要在 catalog.xml 中声明这些 iWidget 。这些 iWidget 共用同一个上下文路径和组件名称。在 catalog.xml 文件虽然可以指定 iWidget 添加到 Lotus Mashups 工具箱中的分类，但是在从 InfoSphere MashupHub 添加的时候，会被从 MashupHub 界面所指定的分类所覆盖。

当使用 Web 应用程序归档文件（WAR）作为 iWidget 的打包格式时，除了 iWidget 自身的文件之外，还需要两个额外的文件才能让该 WAR 文件正确部署。这两个文件需要放在 WEB-INF 目录下面，其中一个是 mashup.properties，该文件用来设置 WAR 文件部署时的两个重要属性；另外一个是 catalog.xml，该文件用来给出 WAR 文件中包含的 iWidget 在添加到 Lotus Mashups 的工具箱（toolbox）时所需的元数据。清单 18 中给出了 HelloWorld iWidget 使用的 mashup.properties 。

 contextRoot=iwidget_samples 
 componentName=iWidgetSamples

在 清单 18 中给出的 mashup.properties 文件中，contextRoot 表示的是 iWidget 打包之后的 Web 应用在部署时使用的上下文路径。这里使用的 iwidget_samples，也就是在部署完成之后，可以通过 /iwidget_samples 来访问其中的文件。componentName 表示的是该 iWidget 打包之后的 Web 应用的组件名称。该组件名称在 Web 应用替换和升级的时候需要。比如在部署了 HelloWorld 的 1.0 版本之后，如果希望升级到最新的 2.0 版本，只需要使用相同的 componentName，原有的 1.0 版本就可以被替换。

清单 19 中给出了 HelloWorld iWidget 使用的 catalog.xml 文件。

<?xml version="1.0" encoding="UTF-8"?> 
<catalog> 
    <category name="Demo"> 
        <title> 
            <nls-string lang="en">Demo</nls-string> 
            <nls-string lang="zh"> 演示 </nls-string> 
        </title> 
        <description> 
            <nls-string lang="en">Demo</nls-string> 
            <nls-string lang="zh"> 演示 </nls-string> 
        </description> 
        <entry id="HelloWorld" unique-name="HelloWorld"> 
            <title> 
                <nls-string lang="en">Hello World</nls-string> 
                <nls-string lang="zh"> 世界你好 </nls-string> 
            </title> 
            <description> 
                <nls-string lang="en">An iWidget to say hello</nls-string> 
                <nls-string lang="zh"> 表达问候的 iWidget</nls-string> 
            </description> 
            <definition>helloworld.xml</definition> 
            <content>http://www.cheng-fu.com</content> 
            <preview>http://www.cheng-fu.com</preview> 
            <icon>images/widget.gif</icon> 
        </entry> 
    </category> 
</catalog>

在 清单 19 中，<category> 元素表示的是 Lotus Mashups 中工具箱（toolbox）中的分类，此处将 HelloWorld iWidget 添加到“演示（demo）”这个分类中。 <category> 的子元素 <entry> 用来表示一个 iWidget 。

在添加了 mashup.properties 和 catalog.xml 两个文件之后，就可以使用 Eclipse WTP 提供的导出功能，将 HelloWorld 这个项目导出成一个 Web 应用程序归档文件。该归档文件可以进行分发，并通过 IBM Mashup Center 中的 InfoSphere MashupHub 来部署到 Lotus Mashups 中。关于 iWidget 打包之后的 WAR 文件的一些细节，见 侧边栏。

回页首

iWidget 的嵌入模式

IBM Mashup Center 支持 iWidget 的嵌入模式，也就是说只需要把一段 JavaScript 脚本粘贴到网页中，就可以在页面上显示 iWidget 。这个功能对于希望在自己的个人网站或博客上使用 iWidget 的人来说，是非常实用的。这个功能的另外一个实用之处是可以方便对 iWidget 进行 调试。

一般来说，iWidget 运行在 Lotus Mashups 之中，每次进行了修改，都有可能需要重新刷新整个页面，这会导致比较长的刷新时间，从而降低调试的效率。这个时候可以将需要调试的 iWidget 嵌入到一个单独的网页中，这样调试起来效率更高，受到的外部影响更小。不过在嵌入模式下，只能对 iWidget 的查看模式进行调试。

具体的做法是从 Lotus Mashups 的工具箱中找到 iWidget，点击右侧的图标，在弹出的菜单中选择“添加到 Web 页面”。在弹出的对话框中复制 JavaScript 代码，将代码拷贝到一个新建的 HTML 页面中。调试的时候使用此 HTML 页面即可。图 9 给出了将 HelloWorld iWidget 添加到 Web 页面时的对话框，使用的时候只需要拷贝编辑框中的 JavaScript 代码即可。

回页首

调试

与前面提过的 国际化 类似，对 iWidget 的调试根据浏览器端代码和服务器端代码而有不同的做法。

对于服务器端代码的调试，应该根据所选用的服务器端技术来做选择。 Eclipse WTP 对于 JEE 应用的调试有很好的支持。

对于浏览器端代码的调试，目前有很多的工具都能比较好的支持。这些工具中比较实用的有 Firefox 的扩展 Firebug、Safari 的开发者工具条、Google Chrome 的 JavaScript 控制台、微软的 IE 开发者工具条、Opera 的开发者工具（Dragonfly）、Fiddler、微软的 Visual Web Developer 2008 Express Edition 和微软的 Script Debugger 等。对于不同的浏览器，应该选用该浏览器相应的开发者工具来进行调试。下面主要介绍 Firebug、微软 Visual Web Developer 2008 Express Edition 和微软 Script Debugger 。可以在 参考资料 中找到这些工具的详细信息。

Firebug

Firebug 是 Firefox 上一个功能非常强大的附加组件（add-on），是很多 Web 开发人员常用的调试利器。它可以查看页面的 HTML DOM 结构、查看 CSS 样式、监测 HTTP 请求和调试 JavaScript 代码。对 JavaScript 的调试方面，Firebug 支持对 eval 代码的调试，有条件的断点等。不过使用 Firebug 调试 iWidget 的 JavaScript 代码并非一件非常简单的事情，这是由于 iWidget 的 JavaScript 代码是在 iWidget 创建的时候动态加载并执行的，在 Firebug 的脚本（Script）标签页中脚本选择器中看不到这样的 JavaScript 代码，因此无法设置断点。下面介绍如何使用 Firefox 的另外一个附加组件 Greasemonkey 与 Firebug 结合来调试 iWidget 的 JavaScript 代码。

Greasemonkey 可以在浏览网页的时候，将用户自己编写的 JavaScript 脚本注入到当前页面中，从而修改原始页面的行为。这种调试方式的基本思路是取消运行环境对 iWidget 的 JavaScript 代码的自动加载，而是由 Greasemonkey 通过 <script> 标签来加载 JavaScript 文件。通过 <script> 标签加载的 JavaScript 文件是可以被 Firebug 识别的，从而可以设置断点，进行调试。

首先需要获得 iWidget 的 JavaScript 文件的 URL，这个通过 Firebug 的控制台标签页可以很容易的找到。如 图 10 所示。

下一步是使用 Greasemonkey 创建一个用户脚本，该脚本仅对当前的页面起作用。该脚本的作用是把上一步发现的 iWidget 的 JavaScript 文件以 <script> 标签的方式添加到当前页面中。该脚本的内容如 清单 20 所示。

// ==UserScript== 
// @name debug-helloworld 
// @namespace alex 
// @include http://9.123.154.142:9082/mum/enabler#pid=
097B9A8E5BCC6D7D0C7557432E24AC000000 
// ==/UserScript== 

(function() {
var libs = [ 
"http://9.123.154.142:9082/mum/proxy/http/9.123.154.142%3A8080/helloworld/helloworld.js" 
]; 

function addScript(head, src) { 
    var s = document.createElement("script"); 
    s.type = "text/javascript"; 
    s.src = src; 
    head.appendChild(s); 
} 
  
function addScripts(head) { 
    for (var i = 0, n = libs.length; i < n; i++) { 
	  addScript(head, libs[i]); 
    } 
} 

var head = document.getElementsByTagName("head")[0]; 
head && addScripts(head); 

 })();

在 清单 20 中，如果需要添加 iWidget 的其它 JavaScript 文件，只需要修改 libs 变量即可。接着需要取消运行环境对 iWidget 的 JavaScript 文件的自动加载，这只需要注释掉 iWidget 定义文件中引入 JavaScript 文件的 <iw:resource> 元素即可。这一步是必不可少的，否则即便找到了通过 <script> 标签添加的 JavaScript 文件，在上面设置的断点也不起作用。

最后只需要刷新页面，就可以从 Firebug 的脚本标签页的脚本选择器中找到该 JavaScript 文件，如 图 11 所示。选择该 JavaScript 文件就可以设置断点，进行调试。调试的界面如 图 12 所示。

微软 Visual Web Developer 2008 Express Edition

Visual Web Developer 2008 是微软推出的一个 Web 开发工具，其 Express Edition 可以供开发人员免费使用。该工具可以用来比较方便的调试 Web 应用。当利用它来调试 iWidget 的时候，需要首先新建一个 ASP.NET Web 应用（ASP.NET Web Application）的项目，接着修改该项目的属性，在其属性的“ Web ”标签页中，将起始页面（Start URL）改成 IBM Mashup Center 的首页地址，如 http://localhost:9080/mum/enabler 。属性保存完毕之后就可以启动调试。在界面的“解决方案浏览器（Solution Explorer）”中可以看到页面上的 JavaScript 代码；在“调用堆栈（Call Stack）”窗口可以看到代码的调用层次。界面如 图 13 所示。

微软 Script Debugger

与前面提到的两个工具不同，Script Debugger 只能被动的用来对网页上的 JavaScript 错误进行调试。要启用 Script Debugger，需要在 IE 的“工具”菜单中的“ Internet 选项”的“高级”标签页中，去掉对“禁用脚本调试（Internet Explorer）”的勾选。当脚本调试被启用之后，如果用 IE 访问网页的时候遇到 JavaScript 错误，IE 会提示是否需要调试，如 图 14 所示。

在 图 14 中所示的对话框中点击“ Yes ”之后，Script Debugger 会自动启动，其界面如 图 15 所示。

如 图 15 所示，Script Debugger 会自动定位在脚本出错的代码行，可以进行逐行的调试。 Script Debugger 提供了两个有用的窗口，一个是“调用堆栈（Call Stack）”，可以看到代码的调用层次；另外一个是“命令窗口（Command Window）”，可以直接输入 JavaScript 代码运行。

回页首

小结

本章讨论了 iWidget 的打包和调试的话题。至此，与 iWidget 开发相关的重要话题都已经覆盖了。

回页首

	第 8 页，共 13 页