这是您第一次登陆到 developerWorks，已经自动为您创建了您的概要文件。 选择您概要文件中可以公开的信息的信息（如姓名、国家/地区，以及公司），这些信息同时也会与您所发布的内容相关联。 您可以随时更新您的 IBM 账号。

所有提交的信息确保安全。

当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。

所有提交的信息确保安全。

My developerWorks:

我的通知：

退出

选择语言：

建立一个基于 IBM Rational Application Developer 的 iWidget 开发环境

Denitsa Tsolova, 软件工程师, Musala Soft

Denitsa Tsolova 是 Musala Soft 公司的一名软件工程师，她于 2008 年初加入 Musala Soft 公司的 jump start (jStart) 团队，参与了针对 IBM Mashup Center 的多个 iWidget 的开发和文档工作。她拥有 3 年多的专业开发经验和丰富的计算机科学教学经验。她拥有保加利亚索菲亚大学的信息科学学士学位。

Milen Penchev, 软件工程师, Musala Soft

Milen Penchev 是 Musala Soft 公司的一名软件工程师，2008 年 2 月加入 Musala Soft 公司的 jStart 团队，参与了针对 IBM Mashup Center 的多个 mashup 和 iWidget 的开发和文档工作。Milen 曾经向 IBM 合作伙伴和客户进行过几次会议演示，以帮助他们开始小部件开发。他拥有两年多的专业软件开发经验，获得计算机系统和技术学士学位。

Anislav Atanasov, 团队主管, Musala Soft

Anislav Atanasov 是 Musala Soft. 公司的团队主管，他从 2007 年 3 月开始协助 IBM jStart 团队开发基于 QEDWiki 的 mashup；IBM Mashup Center 介入后，他开发了几个小部件和 mashup。Anislav 的开发经验涉及 J2EE、Eclipse RCP 和 Web 2.0。他拥有保加利亚索菲亚大学的计算机科学学士学位和软件工程硕士学位。

Sam Thompson, 高级 IT 架构师, EMC

Sam Thompson 是 IBM Software Group 的 Emerging Technologies Group 的高级 IT 架构师，他于 1980 年加入 IBM，担任过 VM 产品开发中的许多技术和管理职务。1992 年，Sam 被调到位于北卡罗来纳州罗利城的系统管理开发实验室，帮助将几种 SystemView 产品推向市场。SystemView 与 Tivoli Systems 合并时，Sam 作为技术推广者周游世界，解释这次合并、Tivoli 的新战略和产品以及 IBM 和 Tivoli 工作组产品的集成战略。1997 年 3 月，他帮助组建了 IBM 的 Emerging Technologies jStart（jump start）小组，协助 IBM 客户组建利用 XML、Java、Web 服务、富客户机、自动计算、Web 2.0、Ajax 和 mashup 技术的解决方案。

简介： 在开发部署到 IBM® Mashup Center 的小部件时，可以使用两个 IBM 开发工具 —— IBM Mashup Center 小部件库和 IBM Rational® Application Developer。本文介绍如何设置 IBM Rational Application Developer，以便将其用于创建部署到 IBM Mashup Center 中的 iWidget。

发布日期： 2009 年 12 月 07 日
级别： 中级
其他语言版本： 英文
访问情况： 9867 次浏览
评论：

简介

本文的目的是介绍设置 IBM Rational Application Developer 的必要配置步骤，以便将其用于创建部署到 IBM Mashup Center 中的 iWidget。

先决条件

为了更好地利用本文，您应该安装以下软件：

IBM Mashup Center 1.1。注意，IBM Mashup Center 的安装目录在后文中称为 <imc_dir>。
IBM Rational Application Developer。由于 IBM Mashup Center 运行在 IBM WebSphere® Application Server V6.1 上，Rational Application Developer 的版本必须能够使用 WebSphere Application Server V6.1。本文使用 Rational Application Developer 7.5。

回页首

环境设置

首先，打开 Rational Application Developer。尽管可以重用一个现有工作空间，但为了实现本文的目的，我们使用一个新的、干净的工作空间。工作空间在文件系统上的位置没有限制。

创建一个服务器实例

在 Rational Application Developer 中创建 Mashup Center 的 WebSphere Application Server 的一个服务器实例，如下所示：

在 Rational Application Developer 中打开 Servers 视图。当 Java™ Platform, Enterprise Edition (Java EE) 透视图打开时，这个视图自动显示；但是，如果 Servers 视图没有显示，那么可以从 Windows 菜单选择 Show View - Other。
在显示的窗口（见图 1）中，展开 Server 文件夹并选择 Servers 选项。
右键单击这个视图并选择 New - Server。
在显示的 New Server 窗口中，将 Server’s host name 字段设置为 localhost。至于服务器类型，从 IBM 文件夹选择 WebSphere Application Server v6.1（见图 1）。

图 1. New Server 窗口
在 Server name 字段中输入您选择的服务器名称。
在 Server runtime environment 字段，选择随 IBM Mashup Center 一起安装的 WebSphere Application Server 环境。单击 Next。

注意：如果这个环境不存在，则通过单击 Add 按钮创建一个（参考下一节了解配置步骤）。
在 New Server Runtime Environment 窗口的 Name 字段中输入新服务器环境名称，例如，输入 IMC Server Runtime 6.1（见图 3）。
在 Installation directory 字段，浏览到 IMC 安装目录（<imc_dir>\AppServer）下的 AppServer 目录。

注意，只有单击前一个窗口中的 Add 按钮创建一个新的服务器环境时，这个窗口才显示。
所有字段都完成后，单击 Finish。在 Define New Server 窗口中，单击 Next。
在 WebSphere Server Settings 窗口中，定义必要的设置（见图 2）。例如，这里我们使用 mm_profile 作为 WebSphere 配置文件名。另外，确保启用以下选项：Automatically determine connection settings、Run server with resources within the workspace 和 Security is enabled on this server。
输入 IBM Mashup Center（在 IBM Mashup Center 安装过程中定义）的 WebSphere Application Server 实例的用户 ID 和密码。单击 Finish。

注意：如果您单击 Next 按钮而不是 Finish 按钮，显示的窗口（Add and Remove Projects）将允许您将工作空间中的任意现有项目部署到这个新服务器上。

图 2. WebSphere Server Settings 页面
上述步骤结束后，您可以从 Servers 视图启动新定义的 WebSphere Application Server（右键单击新定义的实例并选择 Start）。

这个 iWidget 项目的基本配置

配置这个 iWidget 项目需要两个步骤：创建项目并添加特定于 iWidget 的文件。

创建项目

要创建一个 iWidget 项目，执行以下步骤：

从 Rational Application Developer 的主菜单选择 File - New - Project。
在 New Project 窗口中，从 Web 文件夹选择 Dynamic Web Project。
在 New Dynamic Web Project 窗口中，输入项目名称，如 com.ibm.basic.hello（见图 3）。对于 Target Runtime，选择新创建的 IBM Mashup Center WebSphere Application Server 运行时，在这个例子中，使用 IMC Server Runtime v6.1。

注意，要创建 IBM Mashup Center iWidget，并不一定需要创建一个新的 Enterprise Archive (EAR) 项目。
如果需要一个新的 EAR 项目，则应启用 Add project to an EAR 选项。可以通过单击 New 按钮创建和配置这个 EAR 项目；否则，这个项目的名称（由 Rational Application Developer 预先填充）可能会在 EAR Project Name 字段中更改，这个 EAR 项目使用默认或推荐设置创建。

图 3. New Dynamic Web Project 窗口
单击 Finish，这个项目（项目和它的 EAR）将被创建并在 Rational Application Developer 中显示。

注意：项目的主文件夹称为 <project_root>，EAR 项目的主文件夹称为 <ear_project_root>。

添加特定于 iWidget 的文件

要创建以下文件，单击文件的父文件夹并选择 New - File：

mashup.properties。这个文件在 <project_root>/WebContent/WEB-INF 文件夹下创建。

这个属性文件（见清单 1）应该包含两个键值对：contextRoot 和 componentName。contextRoot 属性定义 WebSphere Archive (WAR) 项目的上下文根，componentName 属性由服务器在部署过程中使用。

清单 1. mashup.properties 文件

contextRoot=basic/hello
componentName=com.ibm.basic.helo

catalog.xml。这个文件在 <project_root>/WebContent/WEB-INF 文件夹下创建。

这个 XML 文件包含 iWidget 的描述（见清单 2）。WAR 项目中的每个 iWidget 应该在 catalog.xml 文件中有自己的条目。iWidget 声明应该遵循 IBM Mashup Center 要求，因此，它应该包含特定于小部件的标记，如标题、描述、定义和图标。

清单 2. catalog.xml 文件

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <category name="Demo">
    <entry id="HelloWidget" unique name="HelloWidget">
      <title>
        <nls-string lang="en"> Hello iWidgets</nls-string>
       </title>
      <description>
        <nls-string lang="en">iWidget, created by RAD</nls-string>
      </description>

      <definition>HelloWidget.xml</definition>
      <content>http://www.ibm.com</content>
      <preview>http://www.ibm.com</preview>
      <icon>hello_widget_icon.gif</icon>
    </entry>
  </category>
</catalog>

注意，定义条目指向 iWidget 的定义文件，图标条目指向 iWidget 的图像。两条文件路径记录都相对于 <project_root>/WebContent 目录。

定制 iWidget 的内容

iWidget 的创建涉及两个关键文件：一个是 XML 文件，它包含 iWidget 的定义，另一个是 JavaScript™ 文件，它包含 iWidget 的功能。

定义文件

要创建这个文件，右键单击 <project_root>/WebContent 文件夹并选择 New - File。在 File name 字段中输入这个定义文件的名称（例如 HelloWidget.xml）并单击 Finish。这个文件应该在 Rational Application Developer 中显示并带有一个 XML 文件扩展名。

注意以下两点：

这个 XML 文件的名称和位置必须匹配在 catalog.xml 文件中指定的值。
这个定义文件必须遵循 iWidget 规范。这里的主要条目是 <iw:iwidget> 和 <iw:content>（见清单 3）。这个定义文件包含用于这个小部件的用户界面的 HTML。

清单 3. 定义文件

<iw:iwidget id="HelloWidget"
               xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
               iScope="HelloWidget"
               allowInstanceContent="true"
               supportedModes="view edit"
               mode="view"
               lang="en">

  <iw:resource url="HelloWidget.js" />

  <iw:content mode="view">
        <![CDATA[
               <div style="color: #aa00ff;"
                 Hello!
               </div>
        ]]>
  </iw:content>

</iw:iwidget>

<iw:resource> 标记并不需要。有时，一个 iWidget 可以创建为只包含一个 XML 文件，例如，当不需要脚本或在 XML 文件的一个 <script> 标记中编写脚本时。

这种类型的 iWidget 不需要其他文件作为资源，因此可以省略 <iw:resource> 标记。这个标记中的值引用 iWidget 的主资源文件，其路径相对于声明文件自身。

<iw:iwidget> 的 iScope 属性值引用 iWidget 的主类，这个类在一个资源文件中声明，其名称必须匹配这个 iScope 属性的值。

资源文件

要创建资源文件，右键单击 <project_root>/WebContent 文件夹并选择 New - File。输入资源文件的名称并单击 Finish，该文件将在 Rational Application Developer 中显示。

资源文件的名称和地址必须匹配上述定义文件的 <iw:resource> 标记中指定的值。

现在添加这个 iWidget 的源代码，如清单 4 所示。

清单 4. HelloWidget.js 源代码

Dojo.declare("HelloWidget", null, {

    Id: null,

    onLoad: function() {
        this.id = "_" + this.iContext.widgetId = "_";
        alert(Hello from the iWidget with value " + this.id);
    }
}};

注意，您可以使用不同的实现样式编写这个 iWidget，这些样式包括语言、类结构等。惟一的 IBM Mashup Center 产品限制是主类（在定义文件的 <iScope> 中定义）必须是一个 Dojo 类。

其他文件

在这个 iWidget 项目中，还可以包含许多其他文件以自定义 iWidget。为满足本文的需要，在一个内部文件夹中创建这个 iWidget 的图标（一个 GIF 图像）。要完成这个任务，执行以下步骤：

右键单击 <project_root>/WebContent 文件夹并选择 New - Folder，在显示的窗口中插入这个新文件夹的名称，这里我们使用 images 作为名称。
这个 iWidget 图标必须是一个图像文件，在这个新创建的文件夹中粘贴或导入图像文件。

注意以下 3 点：

每个文件路径的描述必须匹配文件本身的位置，catalog.xml 文件中的文件路径相对于 <project_root>/WebContent 文件夹。
当定义文件包含一个资源文件时，资源文件的文件路径必须相对于定义文件的位置。
当一个资源文件包含在其他资源文件中时，该资源文件的路径必须遵循以下格式：

/widgets/<context_root>/<relative_path>
其中 <context_root> 是 mashup.properties 文件中的 contextRoot 的值，<relative_path> 是相对于 <project_root>/WebContent 文件夹的文件路径（这个细节将在本文后面介绍）。

回页首

部署 iWidget

现在介绍如何部署这些 iWidget。

创建 iWidget WAR 文件

要创建这个 WAR 文件，执行以下步骤：

右键单击 <project_root>（项目名称）并选择 Export（见图 14）。
在显示的窗口中展开 Web 文件夹，选择 WAR 文件项目，单击 Next。
在下面显示的窗口中，输入目标信息并单击 Finish，这个 WAR 文件将被创建在目标文件夹中。

将 iWidget 上传到 MashupHub

要将 iWidget 上传到 MashupHub，执行以下步骤：

确保 IBM Mashup Center 已启动。您可以通过使用服务器实例的上下文菜单启动或停止 Rational Application Developer 中的服务器。
打开 MashupHub 并登录。
从 MashupHub 主页面的 Create 区域选择 Upload Widget（见图 4）。

图 4. MashupHub 的 Create 区域
选择 iWidget Package（.war）选项作为类型源，如图 5 所示；单击 Next。

图 5. 选择小部件类型源
在下一个窗口中，浏览到前面导入的 iWidget 的 WAR 文件，单击 Next。
在下一个窗口中，指定特定于小部件的信息（见图 6）。在本例中，Title 字段使用 “HelloWidget”，Description 字段使用 “Hello iWidget demonstration”，Version 字段使用 1.0。
单击 Finish，这个 iWidget 将被添加到 catalog。

图 6. 指定特定于小部件的信息
在 What’s Next 区域，选择 View widget details。
在 iWidget’s details 页面，选择 Add to Lotus Mashups。
在 Add to Lotus Mashups 窗口中，指定针对 IBM Mashup Center ID 的凭证并单击 Next；为 iWidget 选择类别（本例选择 Demo）并单击 Finish（见图 7）。

图 7. Add to Lotus Mashups，第二个窗口

这个 iWidget 现在被添加到 Lotus Mashups 中的选定类别中，可以被拖到一个 mashup 页面上。注意，如果 Lotus Mashups 已经在浏览器中打开，该页面必须重新加载以显示类别分类中的 iWidget（见图 8）。

图 8. 在一个 mashup 中使用这个新的 HelloWidget

注意在以下情况下所发生的事情：

如果您选择 Adding the widget to Lotus Mashups 选项，这个 iWidget 将被部署到 IBM Mashup Center 的 WebSphere Application Server 上。
如果您上传一个 iWidget 到 MashupHub，每个 iWidget 项目的文件将接收一个惟一的 URL，并且可以通过一个 Web 浏览器访问。这个 URL 的构成方式如下：

http://<host>:<port>/widgets/<context_root>/<relative_path>
其中，<host> 和 <port> 是 IBM Mashup Center 的 WebSphere Application Server 的主机和端口值。其他参数解释如下：
- /widgets/ 由 MashupHub 自动添加。
- <context_root> 是 mashup.properties 文件中的 contextRoot 的值。
- <relative_path> 是相对于 <project_root>/WebContent 文件夹的文件路径。
HTTPS 也可以用于适当的端口。
如果您添加一个 iWidget 到 Lotus Mashups 中，一个条目将被添加到 <imc_dir>\mm\public\cat\catalog_<username>.xml 文件中。这个条目使用这个 iWidget 项目的 catalog.xml 文件的内容创建。注意，<definition> 和 <icon> 的值被重新写入 /widgets/<context_root>/<relative_path> 中。

回页首

在 Rational Application Developer 中调试或动态更改小部件

如果一个 IBM Mashup Center 服务器和 Rational Application Developer 安装在同一台计算机上，则无须手动创建 WAR 文件并将它们安装在使用 MashupHub 的 IBM Mashup Center 服务器上就可以动态修改并调试 iWidget。

卸载已部署的 iWidget

本小节介绍如何使用 WebSphere Application Server 控制台卸载一个 iWidget，以便您可以编辑这个小部件的源代码（如下所述）。要完全卸载一个 iWidget，请参阅本文后面的 “卸载一个 iWidget” 小节。

打开 IBM Mashup Center WebSphere Application Server 管理控制台（Integrated Solutions Console）并选择 Applications - Enterprise Applications。
一个已部署应用程序的列表将显示（见图 9），选择要卸载的应用程序（即 widget）并单击 Uninstall 按钮。

图 9. 已部署应用程序列表
保存新的服务器配置。

设置 catalog 文件

当 iWidget 添加到 Lotus Mashups 中后，它们被放置到不同的类别中，这些类别在 <imc_dir>/mm/public/cat/catalog_<username>.xml 文件中定义。

每个类别都使用一个 XML <category> 标记描述，为了在一个 Lotus Mashups 类别中显示一个 iWidget，一个对应的 <entry> 标记必须出现在 catalog 文件中。

注意，如果 iWidget 已被添加到使用 MashupHub 的 Lotus Mashups 中，则该条目将自动插入且不需要被修改。

如果 catalog 文件中没有针对 iWidget 的条目，则必须手动插入，操作步骤如下：

将 <category> 或 <entry> 标记的内容从项目的 catalog.xml 文件复制到 <imc_dir>/mm/public/cat/catalog_<username>.xml 文件，保留标记层次结构的布局。
通过将 /widgets/<context_root>/ 附加到 <relative_path> 的前面来编辑 <definition> 和 <icon> 标记值，前面的小节 “将 iWidget 上传到 MashupHub” 中的最后一个要点对此进行了介绍。
<imc_dir>/mm/public/cat/catalog_<username>.xml 文件更改后，必须重新启动 IBM Mashup Center WebSphere Application Server，以便更改生效。

注意，IBM Mashup Center 中有一个 “5 个类别” 的限制，因此，当您修改 <imc_dir>/mm/public/cat/catalog_<username>.xml 文件时，确保该文件中的 <category> 标记不要超过 5 个。

修改 EAR 项目

如果为 iWidget 创建了一个 EAR 项目（如 “创建项目” 小节所述），那么它将显示在 Rational Application Developer 中。要修改这个文件，执行以下步骤：

打开 <ear_project_root>/META_INF/application.xml 文件。
切换到源视图，设置 <context-root> 值。这个 iWidget 模块的上下文根的值应该遵循以下格式：

widgets/<context_root>
这里的 <context_root> 是 mashup.properties 文件中的 contextRoot 的值。
保存文件更改。

将 EAR 文件部署到本地 IBM Mashup Center 的 WebSphere Application Server 上

要部署 EAR 文件，执行以下步骤：

确保服务器正在运行。Rational Application Developer 服务器实例通过将其状态显示为 Started 或 Debugging 来表明这个细节。
右键单击服务器实例，选择 Add and Remove Projects。
在 Add and Remove Projects 窗口（见图 10）中，选择 iWidget 的 EAR 项目（这里是 com.ibm.basic.helloEAR），通过单击 Add 按钮将它移动到 Configured projects 区域中。
单击 Finish，项目的 EAR 文件将被部署到 IBM Mashup Center 的 WebSphere Application Server 之上。

图 10. Add and Remove Projects 窗口

这个 iWidget 可以从 Lotus Mashups 类别拖放到 Mashup 页面上，因为这个 iWidget 的条目已经被添加到该用户的 catalog 文件中。

iWidget 定义和源文件都是可编辑的，因为它们通过 EAR 项目、使用适当的上下文根值上传到 IBM Mashup Center 的 WebSphere Application Server。

运行时源修改

这个 iWidget 的部署定义和资源文件现在可以在 Rational Application Developer 中动态编辑了。每当保存一个修改并构建 iWidget 项目，EAR 文件将在 IBM Mashup Center 的 WebSphere Application Server 上重新发布。

进行修改时，没有必要重新启动服务器，更改将自动生效。

要查看对 Lotus Mashups 中的 iWidget 所做的更改，必须刷新 Web 页面（最好清除浏览器缓存）。更新后的小部件如图 11 所示。

图 11. HelloWidget 中显示新文本 “Bye” 的 Mashup 页面

注意，您可以卸载使用 IBM Mashup Center 中的 WebSphere Application Server 上的 Rational Application Developer 进行部署的 EAR 应用程序，有以下两种卸载方法：

按照 “卸载已部署的 iWidget” 小节介绍的方法。应用程序的名称是 <display-name> 标记的值，该值在 <ear_project_root>/META_INF/application.xml 中指定。
使用 Rational Application Developer 中的 IBM Mashup Center WebSphere Application Server 实例。在 Add and Remove Projects 窗口中，从 Configured projects 区域删除 EAR 项目并单击 Finish。

回页首

卸载 iWidget

下面介绍如何卸载一个 iWidget。

从 IBM Mashup Center WebSphere Application Server 服务器删除小部件的应用程序

要删除小部件的应用程序，执行以下步骤：

如果小部件的应用程序是通过使用 MashupHub 上传小部件而部署在 IBM Mashup Center 的 WebSphere Application Server 上，那么请参阅 “卸载已部署的 iWidget” 小节。
如果小部件的应用程序部署在 Rational Application Developer 服务器的实例中，则右键单击服务器实例并选择 Add and Remove Projects。在 Add and Remove Projects 窗口中，选择 iWidget 的 EAR 项目并将其从 Configured projects 区域中删除。

从类别中删除小部件条目

要从一个类别删除一个小部件条目，执行以下步骤：

打开 Lotus Mashups，选择 Go to Edit 模式以显示类别。
在适当类别中找到该小部件。
将鼠标悬停在小部件条目上方，单击 Configuration 按钮。从上下文菜单中选择 Remove，该小部件将从这个类别中删除。

从 MashupHub 中删除小部件

要从 MashupHub 中删除小部件，执行以下步骤：

打开 MashupHub 并登录，使用 MashupHub 管理员的 ID 或将该小部件添加到 Mashups Lotus 时使用的 ID。
从 Catalog 部分选择 List Widgets 并选择该 iWidget 的名称。
在 iWidget’s details 页面中的 Actions 部分选择 Delete（见图 12），该小部件将从 MashupHub 中删除。

图 12. Widget’s details 页面

回页首

结束语

我们希望您现在已经了解如何为您的 IBM Mashup Center mashup 快速创建自定义小部件。您现在应该能够完成以下任务：

创建一个只显示文本（如 “Hello” 或 “Bye”）的简单 HelloWidget。
使用 MashupHub 在一个远程 IBM Mashup Center 实例中部署小部件。
当 Rational Application Developer 和 IBM Mashup Center 安装在同一台计算机上时，从 Rational Application Developer 直接部署新的小部件。

回页首

下载