内容


使用 Rational Application Developer 中的 Web 2.0 工具快速创建 iWidget

Comments
下载 IBM® Rational® Application Developer 试用版  |  在线试用 IBM® Rational® Application Developer
下载更多的 IBM 软件试用版,并加入 IBM 软件下载与技术交流群组,参与在线交流。

iWidget 简介

通常来说,一个 widget(小部件)就是一种可移植,可重用的应用程序组件或者动态内容片段,可以部署到网页之中,接受输入,并与应用程序或者其他的小部件进行通信。

一个 iWidget 就是 IBM® iWidget 规范所定义框架之内工作的 Web 应用程序。它是一种可重用的构件,该构件可以部署到 Web 应用程序之中。作为一种封装有 Web 内容的基于浏览器的构件模型,它可以在内容演示框架之中得到重复使用。它可以作为任意 Web 内容的容器,用于封装 servlet、JavaServer Pages(JSP)文件、HTML、PHP 或者 CGI 等等。

Widget 通常扩展了一种服务器端的构件,或者是与服务器端的数据源相联系。例如,您可以将一个小部件与末端数据源联系起来,这样用户可以在数据源内查看数据了。iWidget 构件提供了一个描述器,该描述器包含了 Web 内容,并且允许将其放置到另一个应用程序之中,该应用程序可以渲染 Web 内容。

一个 iWidget 就是一个 XML 文件。它包含了可以由 JavaScript 动态客户端脚本以及应用风格样式的 CSS 文件所支持的标记标签(markup tag)。JSP、HTML 或者 HTML 片段也可以包含类似的标记,并且还可以以 Ajax 写成。当 iWidget 在框架中时,它可以生成并接收小部件容器中所指定的客户端事件。有两种类型的事件:

  • 一个 已发布的 事件,这意味着 iWidget 发布了改事件的数据
  • 一个 已处理的 事件,这意味着 iWidget 从其他的 iWidget 处接受了一些数据

iWidget 规范

IBM iWidget 规范定义了一种标准的方式,以在混搭环境之中包含 Web 内容。面向浏览器类型的构件为面向用户的网页或可视化界面提供了一种逻辑性的服务。

iWidget 规范定义了 HTML 标记、元数据格式,以及 JavaScript 服务的特征,以将 iWidget 构件的集合集成为一个独立完整的 Web 应用程序。

这一小部件规范提供了一个标准的事件机制,iEvent,它允许来自不同源的 iWidget 在相互之间进行通信。规范还提供了一个上下文机制,iContext,由它来管理 iWidget。该上下文环境包含了所有的用户界面(UI)控件,iWidget 之间的协调,以及与后端服务的交互。

Rational Application Developer 中的 Web 2.0 工具

IBM® Rational® Application Developer V8 包含了一组 Ajax、Dojo 工具集以及 HTML 开发工具,以用于使用 JavaScript、XML、HTML 与 CSS 构建 Web 2.0 应用程序。核心 HTML、CSS 与 JavaScript 工具是开源 Eclipse Web Tools 项目的一部分。

IBM iWidget 的开发与部署涉及到使用以下的应用程序开发工具:

  • iWidget 创建向导
  • 包含了调试支持的集成测试客户端
  • 可以将 iWidget 部署到 IBM Lotus Mashup Center 的部署工具
  • 可以在常规网页之上使用的 iWidget

静态或者动态 Web 项目都可以使用 iWidget facet。它为不同类型的小部件提供了模板,并且可以供新手或者有经验的开发人员使用。

手动创建一个 iWidget

我们的示例从创建一个简单的 Hello World iWidget 开始,过程中不使用任何的 Rational Application Developer Web 2.0 工具。

创建项目

按照下面的步骤来创建一个 iWidget 项目:

  1. 用 Rational Application Developer 打开一个有新的空白工作区。
  2. 从主菜单之中,选择 File > New > Project
  3. 在 New Project 窗口之中,从 Web 文件夹选择 Dynamic Web Project
  4. 在 New Dynamic Web Project 窗口(图 1),输入项目名,例如,com.ibm.demo.helloWorld(参见图 1)。注意: 您不需要选择同时创建一个新的 Enterprise Archive(EAR)项目,以一同创建 IBM Mashup Center iWidget。
  5. 然后点击 Finish

项目现在就会在 Rational Application Developer 中创建并显示出来了。

图 1. New Dynamic Web Project 窗口
对话框窗口
对话框窗口

创建 iWidget 定义文件

一个 widget 只需要一个 widget 定义文件,它是一个基于 iWidget 规范的 XML 文件。该 XML 文件指定了小部件的资源、数据、事件与 HTML 标记模式。您可能还有一个可选的 JavaScript 文件,它定义了一个类,以为 iWidget 提供相应的功能。

如果您想要通过 MashupHub 部署您的 iWidget,那么您需要在 WEB-INF 目录之中加入其他两个文件:

  • mashup.properties
  • catalog.xml(参见图 2)
图 2. com.ibm.demo.helloWorld Project 文件
Mashup Properties 与 Enterprise Explorer 视图
Mashup Properties 与 Enterprise Explorer 视图

为了创建以下的每一个文件,右击上级文件夹并选择 New > File

mashup.properties

在 <project_root>/WebContent/WEB-INF 文件夹之下创建该文件。

该属性文件(参见代码清单 1 的代码)应该包含两个关键的值对:

  • contextRoot 属性,它定义了 WAR 项目的上下文根(context root)
  • componentName 属性,服务器在部署过程中将会使用到它。
清单 1. mashup.properties 文件
contextRoot=demo/hello componentName=com.ibm.demo.helloWorld

catalog.xml

在 <project_root>/WebContent/WEB-INF 文件夹的下面创建该文件。

该 catalog.xml 文件包含了 iWidget 的描述,并指定了怎样访问小部件定义 XML 文件(参见代码清单 2)。WAR 项目之中的每个 iWidget 在 catalog.xml 文件中应该拥有自己的条目。iWidget 声明应该满足 IBM Mashup Center 的要求,因此,它包含了小部件特定的标签,例如 titledescriptiondefinition 以及 icon。它为关于 WAR 文件中每一个小部件的全局标题及描述信息提供了一个存放信息的地方。

清单 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 的定义文件,而图标(icon)条目指向了 iWidget 的图像。这两个记录的文件路径都是基于 <project_root>/WebContent 目录的相对路径。

定义文件

按照下面的方式来创建该文件:

  1. 右击 <project_root>/WebContent 文件夹并选择 New > File
  2. 在 File Name 区域之中输入定义文件的名字(例如,HelloWorld.xml),并点击 Finish

注意:

  • XML 文件的名字及其位置必须匹配 catalog.xml 文件中所指定的值。
  • 定义文件必须满足 iWidget 规范。这里的主条目是 <iw:iwidget><iw:content>(参见代码清单 3)。定义文件包含了小部件用户界面的 HTML 标记。
清单 3. 定义文件
<iw:iwidget id="HelloWorld" 
xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
iScope="HelloWorld" allowInstanceContent="true" 
supportedModes="view edit"
mode="view" lang="en"
> <iw:resource id="jsId" src="HelloWorld.js"
/> <iw:content mode="view"> <![CDATA[ <div
style="color: #aa00ff;" Hello! </div> ]]>
</iw:content> </iw:iwidget>

<iw:resource> 标签并不需要。您可以创建一个 iWidget,它只包含了一个 XML 文件(例如,当不需要有脚本,或者脚本是在 XML 文件的 <script> 标签中写成的)。您最好将 JavaScript 代码与小部件的定义 XML 文件分隔开来。

标签内部的值会引用 iWidget 的主资源文件,而路径与声明文件本身是相对路径。<iw:resource> 所引用的文件会在小部件生命周期开始之前由小部件运行时载入。您还可以使用 <iw:resource> 标签来载入 CSS 文件。

<iw:iwidget>iScope 属性值会引用 iWidget 的主类。该类会在一个资源文件之中进行声明,而其名必须匹配 iScope 属性的值。

模式 是 iContext 管理状态的一个 iWidget 片段,指明了为用户生成什么类型的标记。View 模式使用普通标记,而 Edit 模式会使用可以编辑 iWidget 属性的标记。如果小部件并不支持 Edit 模式,则背景菜单之中的 Edit Settings 选项会被禁用。而 View 模式是默认必须的。

现在在 IBM Mashup Center 中只会支持 View 与 Edit 模式。但是根据 iWidget 规范,小部件还可以拥有更多不同的模式。

资源文件

您可以按照下面的方式来创建资源文件:

  1. 右击 <project_root>/WebContent 文件夹并选择 New > File
  2. 输入资源文件的名字,并点击 Finish;文件会显示在 Rational Application Developer 之中。

资源文件的名字及其位置应该匹配以前所涉及定义文件中 <iw:resource> 标签所指定的值。IBM Mashup Center 唯一的产品限制是主类(在定义文件的 <iScope> 属性值中定义)必须是一个 Dojo 类。

  1. 现在添加 iWidget 的 JavaScript 源模式,如代码清单 4 所示。
清单 4. HelloWorld.js 源
Dojo.declare("HelloWorld", null, { Id: null, onLoad: function() { 
alert("Hello World!"); } });

部署描述文件

正如代码清单 5 所示,编辑 <project_root>/WebContent 文件夹中所包含的 web.xml 文件,以使用欢迎列表,从而曝露小部件定义文件,而不是 WAR 包内的 index.html。

清单 5. web.xml 源
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID"
version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name> Hello World Widget</display-name>
<welcome-file-list>
<welcome-file>HelloWorld.xml</welcome-file>
</welcome-file-list> </web-app>

其他的文件

在 iWidget 项目之中,许多其他的文件可以存在,并用于定制 iWidget。在下面的范例之中,将会对其做进一步的详细解释,您可以将 Rational Application Developer Web 2.0 工具投入到实际的运用之中。

创建 iWidget WAR 文件

您可以按照下面的方式,来创建 WAR 文件,使该文件可以部署到任何拥有 iWidget Container 的 IBM 产品:

  1. 右击 <project_root>(项目名)并从下拉菜单之中选择 Export > WAR file(参见图 3)。
图 3. 选择 WAR 文件以导出
两个下拉菜单
两个下拉菜单
  1. 从接下来的窗口之中,展开 Web 文件夹,并选择 WAR file 项目,然后点击 Next
  2. 在接下来显示的窗口之中,输入目的地信息并点击 Finish

在目的地文件夹之中创建 WAR 文件。

创建一个 iWidget 的更快捷的方式

Rational Application Developer Web 2.0 工具提供了从头创建 iWidget 的一种快捷方式。下面就是具体的操作方式:

  1. 打开 Rational Application Developer 集成式开发环境(IDE)(参见图 4)。
图 4. Rational Application Developer IDE
工作区的屏幕截图
工作区的屏幕截图
  1. 右击 Enterprise Explorer 视图并选择 New > Project(图 5)。
图 5. 创建一个项目
Explorer 视图与两个下拉菜单
Explorer 视图与两个下拉菜单
  1. 在 New iWidget Project 窗口之中,展开 Web 文件夹,选择 iWidget Project 然后点击 Next(参见图 6)。
图 6. New Project 窗口
选择一个 Wizard 视图
选择一个 Wizard 视图

在接下来的窗口之中,New iWidget Project,有两种类型的技术可以进行选择,以使用 iWidget(图 7)。“Web technologies”选项只涉及到了 Ajax、HTML、CSS 与其他技术。如果您从中选择了一个,那么在您创建项目时,项目层级结构应该如图 8 所示。

图 7. New iWidget Project 对话框
使用 iWidget 的两个技术选项
使用 iWidget 的两个技术选项
图 8. 网络技术类型项目结构
Web 技术类型项目结构
  1. 这种类型的 iWidget 不是一种动态的 Web 项目,所以不能作为一个 WAR 文件导出。因此,您可以选择第二种类型 Web 与 JavaEE 技术
  2. 在接下来创建 iWidget 项目的对话框的窗口之中,(图 9),输入 iWidget 名字。您可以选择它的运行时目标,并决定是否向 EAR 文件添加该项目。
图 9. New iWidget 属性对话框窗口
显示描述的选项
显示描述的选项
  1. 如果您想要管理该 iWidget 所使用技术的版本,您可以点击 Manage Features 按钮。
  2. 点击 Finish
  3. 在 Project Facets 窗口之中,您可以调整该 iWidget 所使用技术的版本。
  4. 当您完成操作时,您可以点击 OK(参见图 10)。
图 10. Project Facets 视图
带有复选框的 Facet 与 Version 列
带有复选框的 Facet 与 Version 列

项目层级结构现在应该如图 11 所示。

图 11. 最终的项目结构
Enterprise Explorer 视图

iWidget 项目将会像我们手工操作的那样,得到快速和自动的创建,但是更加轻松和快速。

iWidget 编辑器

Rational Application Developer 8.0 提供了一个 iWidget 编辑器,您可以使用它来填充 iWidget 属性(参见图 12)。

图 12. iWidget 编辑器
编辑器的屏幕截图
编辑器的屏幕截图
  1. 为了添加资源文件,您可以点击 Add(参见图 13),然后点击 OK
  2. 然后输入资源属性以添加到该 iWidget。
图 13. 在 iWidget 编辑器中添加资源
Explorer 视图下的编辑器
Explorer 视图下的编辑器
  1. 添加其他的资源文件,例如 CSS 文件。

部署并测试 iWidget

  1. 为了在 Lotus Mashup Center 服务器上部署 iWidget:您可以首先创建一个 Mashup Center 服务器并启动它。
  2. 然后在 Rational Application Developer 上创建一个服务器:在 Server 视图上右击任意空白的位置并点击 New > Server(参见图 14)。
图 14. 创建一个新的服务器
创建一个新的服务器
创建一个新的服务器
  1. 在 Server 列表对话框窗口,您可以选择 Lotus Mashup Center 服务器并填入正确的主机名。
  2. 记住点击 Test connection 以验证您的输入(图 15)。
图 15. 测试服务器连接
测试服务器连接
测试服务器连接

您差不多已经完成了。现在就到了测试环节了。

  1. 右击 iWidget 项目并选择 Run as > Run on server
  2. 选择以前所定义的 Mashup Center 服务器,然后切换到 Mashup 页面来测试您的 iWidget(参见图 16)。
图 16. 在 Lotus Mashup Center 上测试 iWidget。
Lotus Mashup Center 上面的 Test iWidget
Lotus Mashup Center 上面的 Test iWidget

相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Rational
ArticleID=741646
ArticleTitle=使用 Rational Application Developer 中的 Web 2.0 工具快速创建 iWidget
publish-date=07192011