内容


使用 Lotus Widget Factory 和 Google 小部件定制 IBM Lotus Connections 2.5

为 Lotus Connections 2.5 创建定制企业级小部件 —— 不需编写任何代码

编辑注:您很精通这个主题吗?希望分享您的经验吗?请马上加入到 IBM Lotus 软件 wiki 项目。

Lotus Connections wikiWebSphere Portlet Factory wiki

简介

IBM Lotus Connections 2.0 引入了小部件的概念,这是一种扩展和定制该产品的 Home page 特性的方法。小部件是一小段能够在 Web 应用程序中运行并显示任意定制内容的代码。Lotus Connections 支持根据 IBM 定义的 iWidget 规范编写的小部件。在 2009 年发行的 Lotus Connections 2.5 提供更多的放置区域,管理员可以通过它部署来自其他开发人员的小部件,从而改进了在 Home page、Communities 和 Profiles 特性中对小部件的支持。

可以使用传统的 Web 开发实践和语言实现小部件。因此,开发小部件不仅需要时间和资源,还需要了解 Web 开发技术,比如 HTML、CSS 和 JavaScript™。本文详细描述两种可以简化和加快 Lotus Connections 小部件开发的方法。

在第一小节中,本文向您展示如何使用 Lotus Widget Factory 集成开发环境(IDE)为 Lotus Connections 创建定制小部件。Lotus Widget Factory 是一个允许您以可视方式开发企业级定制小部件的工具,并且不需要编写任何代码。尽管 Lotus Widget Factory 在官方声明中仅支持 IBM Lotus Mashups,但是本文还使用它来为 Lotus Connections 开发小部件。本文向您介绍开发一个小部件的步骤,它从 IBM developerWorks® 显示一个音频文件(podcast)列表,用户可以直接从 Lotus Connections 收听它们。

本文的第二小节详细阐述如何通过包装器将 Google 小部件添加到 Lotus Connections 中。该包装器是一个标准的 iWidget,它充当 Lotus Connections 和 Google 小部件之间的接口。注意,在上一篇 developerWorks 文章 “为 Lotus Connections Home page 实现和部署 Google 小部件” 中已经介绍了针对 Lotus Connections 2.0 的 Google 小部件方法。上一篇文章主要关注包装器的开发,而本文直接介绍部署 Google 小部件的步骤,并且不需要编写任何代码。

本文的前两个小节专门为没有编程经验的读者准备,比如系统管理员。

本文的最后小节介绍 iWidget 规范的编程细节。这个部分要求开发人员了解 Web 技术。它的目标是为探索定制提供入门点,并介绍 Lotus Connections 2.5 支持的新 iWidget 特性。

使用 Lotus Widget Factory 为 Lotus Connections 开发小部件

这个小节描述创建一个小部件的步骤,该小部件能够将公共提要的内容显示为表,并让 Lotus Connections Home page 中的用户能够查看它。这个小节讨论 Lotus Widget Factory 版本 1.0.1。

这个小节创建的小部件获取一个由 IBM developerWorks 录制的 podcast 列表,可以从标准的 RSS 提要获取该列表。您可以从 http://www.ibm.com/developerworks/podcast/ 详细了解 podcast。

RSS 提要的条目是 developerWorks 录制的 MP3 podcast 列表。您可以借助 Lotus Widget Factory 在数分钟之内创建出该小部件,并且不需要编写任何代码。在本小节的末尾,您将学习如何使用嵌入式媒体播放器改进小部件,该层允许用户直接从小部件的界面播放和收听 podcast。图 1 显示了小部件的概图。

图 1. 在本小节中创建并部署到 Lotus Connections Home page 的 developerWorks podcast 小部件
在本小节中创建并部署到 Lotus Connections Home page 的 developerWorks podcast 小部件
在本小节中创建并部署到 Lotus Connections Home page 的 developerWorks podcast 小部件

Lotus Widget Factory

Lotus Widget Factory 是一个用于创建动态定制小部件的集成开发环境(IDE)。该工具允许您利用现有的支持(比如 REST 式服务)来快速创建动态小部件,而不需编写任何代码。

IBM Mashup Center 提供试用版的 Lotus Widget Factory。请在本文后面的参考资料部分了解详细信息。

Lotus Widget Factory 基于模型概念,模型由称为构建器的基础板块组装而成。构建器是封装了特定功能的通用组件。Lotus Widget Factory 附带了大量预定义的构建器,从用户界面组件(比如按钮)到负责从远程 Web 服务获取数据的组件等等。某个构建器都与一个用户友好的界面相关联,并允许您指定构建器的特征,比如输入。

Lotus Widget Factory 基于您放到工具中的模型自动地为小部件生成源代码。源代码包含服务器端后台服务的 Java™ 代码和客户端代码,比如 HTML 视图、JavaScript 代码和小部件的 XML 描述器。组装小部件的代码和资源被打包成一个可以部署到 J2EE 平台(比如 IBM WebSphere® Application Server)的标准 Web 服务归档(WAR)文件。

可以在本文后面的参考资料部分找到更多关于 Lotus Widget Factory 的信息。

如前所述,Lotus Widget Factory 与为 Lotus Mashups 产品创建小部件密切相关。因为 Lotus Connections 和 Lotus Mashups 共享相同的小部件底层格式(IBM 开发的 iWidget 规范),所以在 Lotus Connections 中重用和部署使用该工具创建的小部件相对容易。

使用 Lotus Widget Factory 创建 developerWorks podcast 小部件

第一个步骤是创建一个能够生成小部件的模型,生成的小部件能够从 http://www.ibm.com/developerworks/podcast/channel-dwall.rss 获取 RSS 提要。公共的 RSS 提要包含 IBM 团队最近录制的 podcast 的列表(http://www.ibm.com/developerworks/podcast/)。

这个小部件在提要中将关于最近的 developerWorks podcast 的信息显示为一个分页的表。表的每行显示与特定 podcast 相关的数据:它的标题、长度、描述和 MP3 文件的下载链接。

在下面的部分中,将通过公共的 Yahoo MediaPlayer JavaScript 库 (http://mediaplayer.yahoo.com/) 改进该小部件,以允许用户能够直接从 Lotus Connections 收听 podcast,而不需要手动地下载 MP3 文件。

首先,我们创建一个新的 Lotus Widget Factory 项目:

  1. 启动 Lotus Widget Factory 并选择 File - New - Lotus Widget Factory Project。
  2. 选择一个项目名,比如 developerWorksWidget。其他字段留空并单击 Next。
  3. 在 Feature Set 页面,保留默认选项并单击 Next。
  4. 在 Deployment Configuration 选项中,选择随 Lotus Widget Factory 附带的 WebSphere Application Server Community Edition 服务器实例。接下来您将看到,在将这个小部件部署到 Lotus Connections 之前,该服务器实例允许您在独立的浏览器 Web 页面上处理它。

Lotus Widget Factory 现在创建了一个新的项目。Lotus Widget Factory 还提示您启动 WebSphere Application Server Community Edition 服务器(如果还没有启动的话),并将该项目部署到 WebSphere Application Server Community Edition 实例。对于出现的两个提示,都单击 Yes 并执行相同的操作。

现在,您已经准备好为小部件创建模型。在这里,您可以创建一个空白的小部件模型并向其添加不同的构建器,以获取和格式化提要并显示在数据表中。Lotus Widget Factory 提供一些模型向导来帮助您创建常用的预配置模型。您将使用以下内置的模型向导之一:

  1. 选择 File - New - Lotus Widget Factory Model。
  2. 在 Choose Project 表单中,选择在先前步骤中创建的项目(它的名称应该为 developerWorksWidget)。
  3. 在 Select Model 表单中,选择 REST-based View & Form 选项(在 “Quick Start” 下)以指示 Lotus Widget Factory 创建一个小部件模型,该小部件模型预配置了获取提要并将其显示为表所需的构建器。
  4. 不要选择 Deploy this model as widget 选项。该选项允许您将小部件部署到正在运行的 Lotus Mashups 实例中。如前所述,Lotus Widget Factory 的主要目的是为 Lotus Mashups 创建小部件。您不应该选择该选项,因为在后面要把小部件部署到 Lotus Connections。
  5. 在 REST Call Information 表单中,输入执行 developerWorks RSS 提要的 URL:http://www.ibm.com/developerworks/podcast/channel-dwall.rss。确保在 HTTP Request Type 选项中选择 GET,该表单的其他选项留空,然后单击 Next。
  6. 让 Schema Information 表单留空,然后单击 Next。
  7. 在 Final REST Service Information 表单中,选择 channel/items。RSS 提要中的每个项都包含关于特定 podcast 的信息。因此,在这个步骤中,您将通知 REST 构建器从该提要显示不同的项(podcast)。
  8. 在接下来的表单中选择 Paged Data Display 选项,它将 模型配置为显示一个分页程序,允许用户导航到小部件底部的 podcast 项。每页包含 3 行是小部件的最佳值。
  9. 在 Column Settings 表单中选择 Manage Columns 选项。该表单允许您管理从表中的提要显示的列。记住,小部件的页面空间非常宝贵,因此不宜显示过多的列。图 2 显示您可以使用的示例设置。

    图 2. Column Settings 表单
    Column Settings 表单
    Column Settings 表单

    这个表单中没有什么重要的东西:确保 guid 列的 status 字段设置为 Counter Column,如图 2 所示。RSS 提要中的 guid 条目包含指向 podcast 的 MP3 文件的路径。通过设置 Counter Column,您可以指定构建器将 guid 列的内容显示为计数器(从 1 开始)而不是字段的内容。在下面部分的步骤中,您将把 MP3 文件的链接添加到计数器中。单击 Next。

  10. 不要选择 Create Link to Details 选项。
  11. 为该模型输入名称,例如 developerWorksModel。

图 3 显示了完成这些步骤之后 Lotus Widget Factory 的工作空间。左边的 Project Explorer 面板显示 developerWorksWidget 模型的资源。您为该模型创建的细节显示在主面板中。尤其需要注意的是,该面板显示了由 REST-Based View and Forms 向导预配置并组成模型的各种构建器。

图 3. 显示小部件模型的细节的 Lotus Widget Factory
显示小部件模型的细节的 Lotus Widget Factory
显示小部件模型的细节的 Lotus Widget Factory

至此,您已经创建了一个配置好的模型,并且可以使用它为显示 developerWorks podcast 列表的全功能小部件生成代码了。

要在独立的浏览器页面中查看该小部件,在 Project Explorer 窗口选择模型(图 3 中的 developerWorksModel.model),然后选择 Run - Run As - Run As Active Model。这个操作将启动一个嵌入式的 WebSphere Application Server Community Edition 实例,并以全屏浏览器页面显示运行小部件,如图 4 所示。

图 4. 在独立页面中运行的小部件
在独立页面中运行的小部件
在独立页面中运行的小部件

最后,您要添加一个允许用户从小部件下载 MP3 文件的功能。在这个例子中,您将要把每行的首列的计数器标签(图 4 中首列的数字)转换成指向对应的 podcast 的 MP3 文件的可点击链接。记住,表的首列与原始 RSS 提要的 guid 字段相关联,这已在前面创建模型说明的步骤 9 中配置(见图 2)。原始 RSS 提要的 guid 字段的值是 MP3 文件的路径。在这个步骤中,您将使用 Link 构建器通过 guid 值创建链接:

  1. 在 Lotus Widget Factory 中,选择在先前步骤中创建的项目和模型。
  2. 单击 Add a builder call the current model,如图 5 所示。

    图 5. Add 构建器按钮在 Lotus Widget Factory 中的位置
    Add 构建器按钮在 Lotus Widget Factory 中的位置
    Add 构建器按钮在 Lotus Widget Factory 中的位置
  3. 在 Page Elements 下选择 Link 构建器。
  4. 在这个步骤中,将 Link 构建器配置为为表中的每个 guid 元素创建一个链接。记住,提要的 guid 字段包含 MP3 文件的路径。使用以下信息填充构建器表单,如图 6 所示:
    • 在 Name 字段,输入 LinksGUID。
    • 在 Page 字段,选择 REST_ViewPage。
    • 在 Tag 字段,选择 guid。
    • 在 Action Type 字段,选择 Link to a URL。
    • 在 Name 字段,单击字段旁边的 “…” 按钮,然后选择 Variables - itemLoopVar - item - guid。为该字段生成的值应该为 “${Variables/itemLoopVar/item/guid}”。
    图 6. Link 构建器的设置
    Link 构建器的设置
    Link 构建器的设置

就这么简单!现在,用户可以通过单击每行的首列的数字下载 podcast 的 MP3 文件。在本小节的最后部分,您将了解如何使用嵌入式媒体播放器改进小部件,使用户能够直接从小部件收听 podcast,而不需要手动下载 MP3 文件。

这样,小部件就实现了其用户价值。最妙的是,您不需要编写任何代码。

在下一个小节中,您(管理员)将了解如何让 Lotus Connections Home page 用户使用您的小部件。

将在 Lotus Widget Factory 中创建的小部件部署到 Lotus Connections Home page

如前所述,Lotus Widget Factory 1.0.1 在官方声明中仅支持 Lotus Mashups。因此,不能直接从 IDE 将小部件部署到 Lotus Connections。鉴于这个原因,您必须通过几个简单的手动步骤使小部件可以在 Lotus Connections 中使用。

对于这个例子,您将在 Lotus Connections 2.5 的 Home page 特性中注册小部件。您可以通过在本文末尾列出的 IBM Lotus Connections 2.5 Information Center 文档详细了解注册 Communities and Profiles 特性所需的步骤。

这个小节介绍以下步骤:

  • 从 Lotus Widget Factory 将小部件代码和资源作为标准 Web 归档(WAR)提取出来,并将该 WAR 文件作为 Web 应用程序部署到 WebSphere Application Server 实例中。
  • 在 Lotus Connections Home page 中部署注册后的小部件。注意,只有具有管理员权限的人员能够对用户公开新的组件。

首先,您将来自 Lotus Widget Factory 的小部件的代码和资源导出为标准的 WAR 文件,并将其部署到 WebSphere 实例:

  1. 在 Lotus Widget Factory 中,在 Project Explorer 面板右键单击小部件项目 (developerWorksWidget)。
  2. 选择 Export - WAR file。
  3. 在磁盘上选择一个储存 WAR 文件的位置。
  4. 将 WAR 文件部署到 WebSphere Application Server 实例。我们建议使用运行 Lotus Connections 的 WebSphere Application Server 实例部署 WAR 文件。部署 WAR 文件是一个标准的步骤;参看 IBM WebSphere Application Server 6.1 Information Center 文档了解更多细节。

    将您在部署期间选择的上下文根记录下来(例如,devWorksApp)。

  5. 在部署之后从 WebSphere 管理控制台启动 Web 应用程序。

其次,在 Lotus Connections Home page 注册小部件。任何 iWidget 都由 XML 描述器描述。Lotus Widget Factory 为小部件创建的 WAR 文件包含一个自动生成和返回 XML 描述器的服务。对于这个已部署的 WAR 文件,服务位于:

http://<hostname>:<port>/<contextRoot>/webengine/factory/
widget/Dispatcher?_widgetID=<pathToWidgetModel>

其中 <pathToWidgetModel> 是与 Lotus Widget Factory 中的 model 目录(没有 .model 扩展名)相对的模式的路径(见图 7)。对于 developerWorks 模型,pathToWidgetModel 为 developerWorksModel。

图 7. developerWorkModel.model 在 Lotus Widget Factory 中的路径
developerWorkModel.model 在 Lotus Widget Factory 中的路径

下面是指向 XML 描述器的 URL 例子:

http://homedev2.dyn.webahead.ibm.com:9080/devWorksApp/webengine/factory/widget/
Dispatcher?_widgetID=developerWorksModel

其中:

  • homedev2.dyn.webahead.ibm.com 是服务器的主机名
  • 9080 是端口
  • devWorksApp 是上下文根,WAR 就从它部署到 WebSphere Application Server

要检查 URL 是否正确,您可以通过 Web 浏览器访问它。您应该看到 Lotus Widget Factory 为小部件生成的 XML 描述器,如图 8 所示。

图 8. Lotus Widget Factory 为小部件生成的 XML 描述器
Lotus Widget Factory 为小部件生成的 XML 描述器
Lotus Widget Factory 为小部件生成的 XML 描述器

注意:Lotus Widget Factory 生成的应用程序使用动态加载的类,当在 WebSphere Application Server 中开启了 Java Security 设置时,这个进程有一些限制。当访问以上的 XML 描述器时,您可能得到消息 “SRVE0207E: Uncaught initialization exception thrown by servlet”。您可以在 WebSphere Administration Console 的 Security - Secure Administration, Application and infrastructure - Java 2 Security 关闭 Java Security 选项。

不过,如果您不想关闭 Java 2 Security,那么可以在 WebConfig/META-INF 下创建一个文件 was.policy,用于定义将要访问的特定资源。参考 IBM WebSphere Application Server 6.1 Information Center 更多地了解关于 was.policy 的信息。

现在,通过以下步骤在 Home page 管理界面中注册到 XML 小部件描述器的链接:

  1. 使用管理员帐户登录 Home page。
  2. 在 Home page 中选择 Administration 选项卡,如图 9 所示。

    图 9. Lotus Connections Home page 中的 Administration 选项卡
    Lotus Connections Home page 中的 Administration 选项卡
  3. 在页面的右下角选择 Add another widget 选项。
  4. 这时会显示一个表单,您可以通过它注册小部件。输入小部件的标题和 iWidget 的 XML 描述器的 URL(见图 10)。

    图 10. 在 Lotus Connections Home page 中注册新的小部件的 Administration 表单
    在 Lotus Connections Home page 中注册新的小部件的 Administration 表单
    在 Lotus Connections Home page 中注册新的小部件的 Administration 表单
  5. 在 My Page 选项卡上选择 Display。
  6. 对于表单中的其他选项,可以保留默认值。可以在 Lotus Connections 2.5 Information Center 文档中找到关于这些选项的更多信息。
  7. 单击 Save。您将回到 Administrator Home page;在该页面上,启用 developerWorks 小部件。

在您启用小部件之后,用户可以通过小部件选项板为 Home page 的 My Page 选项卡添加 developerWorks 小部件(见图 11)。可以单击界面顶部的 Customize 按钮打开小部件选项板。

图 11. 通过 Home page 的小部件选项板向用户提供的 developerWorks podcast 小部件
通过 Home page 的小部件选项板向用户提供的 developerWorks podcast 小部件
通过 Home page 的小部件选项板向用户提供的 developerWorks podcast 小部件

图 12 在 Home page 中显示了从选项板(MyPage 选项卡)添加的小部件。

图 12. 从选项板添加的小部件显示在 Home page 中
从选项板添加的小部件显示在 Home page 中
从选项板添加的小部件显示在 Home page 中

注意:Lotus Widget Factory 生成高度固定的小部件,它在部署之后可能导致出现垂直滚动条。您可以通过编辑 widget_definition.xml 文件消除滚动条,该文件位于 IDE 中的 WebContent/WEB-INF/factory/xml_templates/widget/。在 iframe 元素上修改值 min-height,以通过增加小部件的高度来消除垂直滚动条。在图 12 中,min-height 属性从 200 px 增加到 300 px。

使用 Yahoo! 媒体播放器库改进 podcast 小部件

在前面小节中,您创建了一个能够从 RSS 提要显示 podcast 列表的小部件。现在,列表仅包含 MP3 文件的链接,如果用户要听 podcast,必须下载 MP3 文件并用桌面媒体播放器打开它,比如 Microsoft® Windows® Media Player。

一个有趣的改进可能是允许用户直接从小部件界面收听 MP3 podcast,而不需要手动下载和打开 MP3 文件。

要实现该功能,您将结合使用 Yahoo! Media Player 库 (http://mediaplayer.yahoo.com/) 和 Lotus Widget Factory,以生成一个带有嵌入式媒体播放器的小部件。在完成这些步骤之后,表中的每行都包含一个 Play 按钮,它允许用户直接从小部件收听 podcast,如图 13 所示。

图 13. podcast 小部件中的 Play 按钮
podcast 小部件中的 Play 按钮

Yahoo! Media Player 作为一个 JavaScript 库,该库加载一个负责播放音频文件的轻量级 Flash 模块。JavaScript 库通过解析页面的 HTML(更准确地说,是小部件的 HTML)来查找指向音频文件的链接,比如 MP3 文件。

您可以访问 http://mediaplayer.yahoo.com/ 获得更多关于该库的信息。

要实现该特性,您要使用 Lotus Widget Factory 构建器将 Yahoo! Media Player JavaScript 库包含到小部件中。Yahoo! 库自动地查找页面上的 HTML 链接元素(指向媒体文件,比如 MP3 文件),例如 First link,并在链接的旁边放置一个 Play 按钮。

让我们将 Yahoo! Media Player JavaScript 库包含到小部件模型中:

  1. 选择项目和模型,然后单击按钮 Add a builder call to the current model(与图 5 显示的按钮一样)。
  2. 在类别 Actions And Events 中选择 Client JavaScript 选项。
  3. 使用如图 14 所示的值完成表单:

    • 在 Name 字段,输入 YahooMediaPlayer。
    • 在 Location Type 字段,选择 In HEAD tag 选项。
    • 在 Page 字段,选择 REST_ViewPage。
    • 在 Script Source Type 字段,选择 Link to file/URL 选项。
    • 在 Script URL or File Location 字段,输入 http://mediaplayer.yahoo.com/js。
    图 14. Client JavaScript 表单
    Client JavaScript 表单
    Client JavaScript 表单

简而言之,您这样做是告诉构建器在小部件的顶部放置一个指向 Yahoo! Media Player 的标准 JavaScript 标记。当页面每次加载小部件时,都会从 Yahoo! 服务器加载该库。

就这么简单!现在,配置好的模型和构建器可以生成一个带有嵌入式媒体播放器的小部件,允许用户直接收听 developerWorks podcast。如果您已经在前面小节中部署和注册了小部件,那么在这里仅需更新 WebSphere Application Server 中的 WAR 文件就可以向用户呈现改进后的小部件。

向 Lotus Connections 2.5 添加 Google 小部件

您可以使用 Google 小部件轻松地向 Lotus Connections 添加新的、引人注目的内容。Google 小部件的 目录 中包含约 200,000 个小部件,因此扩展它们的机会是无穷的。下面仅给出一些例子:

  • 显示来自其他流行的社交网络平台(比如 Facebook 和 MySpace)的信息
  • 显示来自 YouTube 的视频
  • 通过 Google Docs 小部件集成工具
  • 集成映射功能,这得益于各种重用 Google Map API 的小部件

Lotus Connections 仅支持遵循 IBM 开发的 iWidget 规范的小部件。它不为其他小部件模型提供即用支持,比如 Google 小部件模型。不过,iWidget 格式是十分灵活的,它允许您显示任何在标准 Web 页面上找到的内容。另一方面,Google 为在使用 HTML 脚本标记的 Web 页面上使用小部件提供支持。您可以遵循的技术之一是使用一个充当脚本标记包装器的 iWidget 来显示 Google 小部件。

在上一篇 developerWorks 文章 “为 Lotus Connections Home page 实现和部署 Google 小部件” 中,介绍了开发人员如何在 Lotus Connections 2.0 中显示 Google 小部件的技巧。这个小节的目标是提供一个管理员能够用来在 Lotus Connections 中显示新的 Google 小部件的快速步骤和框架,并且管理员不需要具备任何编程知识。编程细节是可选的;感兴趣的读者可以在本文的最后小节看到它们。

在 Lotus Connections 中添加 Google 小部件的快速步骤

本文的下载部分提供一个包装 Google 小部件的 iWidget 框架的实现。在这个小节中,您将了解如何编辑 iWidget 框架以显示任意 Google 小部件。

该框架是一个标准的 Java Platform, Enterprise Edition (Java EE) WAR 文件,可以部署到任何 Java EE 容器中,比如运行 Lotus Connections 的 WebSphere Application Server。在这里,该框架被预配置为包装一个 Facebook Google 小部件,如图 15 所示。

图 15. 包装 Facebook Google 并运行在 Lotus Connections Home page 中的 iWidget
包装 Facebook Google 并运行在 Lotus Connections Home page 中的 iWidget
包装 Facebook Google 并运行在 Lotus Connections Home page 中的 iWidget

以下步骤显示如何配置该框架,以显示从 Google Gadget Catalog 选择的 Google 小部件。注意,您使用 IDE Eclipse 3.4 编辑包含在框架 WAR 文件中的文件。WAR 文件是遵循一些约定的压缩文件。因此,您还可以使用其他标准的压缩应用程序来访问和编辑该归档中的文件。

可以在 Eclipse 官方网站 www.eclipse.org 上了解更多关于获取和安装 Eclipse IDE 的信息。确保您选择的是 Java EE developer edition。

首先,我们使用 WAR 文件的内容创建一个 Eclipse 项目:

  1. 下载名为 googleWrapperSkeleton.war 的 WAR 文件。
  2. 在 Eclipse 中,进入 File – Import – Web – WAR file。选择 Next,然后浏览磁盘找到下载的 WAR 文件。为该项目输入任意名称。
  3. 保留表单 Web Import: Web Libraries 的默认值,然后单击 Finish。这就创建了一个新的 Eclipse 项目,它包含 WAR 文件中包含的文件。

现在,您可以编辑小部件中的文件了。不过,您首先要从 Google Gadget Catalog 获取指向小部件描述器的 URL:

  1. 转到 Google Gadget Catalog。选择一个小部件,并单击按钮 Add to your webpage,它将指向小部件描述页面。在接下来的步骤中,您将以 BBC News 小部件 为例。
  2. 在小部件描述页面,单击按钮 Add to your webpage 为图 16 所示的小部件获取定制页面。您可以从该页面定制该小部件的一些属性,比如大小和标题。为了更好地搭配 Lotus Connections 的外观,我们建议您在定制表单中为小部件选择无边框和无标题(空字符串),如图 16 所示。Lotus Connections 运行时会自动为每个小部件构建边框和标题栏。

    完成定制之后,单击 Get the Code 按钮。

    图 16. Google 小部件的定制表单
    Google 小部件的定制表单
    Google 小部件的定制表单
  3. 从页面底部的文本框中,复制并粘贴脚本标记的 src 属性中的 URL 的 ?url= 后面部分。复制粘贴的字符串应该以 output=js 结尾。

    例如,对于 BBC 小部件,其 URL 为:

    http://shazingo.com/lig/lg/178002.xml&up_extrafeed=http%3A%2F%2Fnewsrss.bbc.co.uk
    %2Frss%2Fnewsonline_uk_edition%2Fhealth%2Frss.xml&up_extratitle=Health&up_subject=
    &up_entries=6&up_summaries=300&up_selectedTab=&synd=open&w=320
    &h=360&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js

现在,我们回到 Eclipse,并将框架文件定制为显示选择的 Google 小部件。请遵循以下步骤:

  1. 在 Eclipse Project Explorer 中找到并展开先前从 WAR 文件创建的项目(您可能需要切换到 Java EE 视图)。
  2. 在 WebContent 目录中打开文件 gadgetWrapper.xml。找到 ID 为 gadgetUrl 的 iw:item 节点(见图 17)。编辑 value 属性,以放置从 Google Gadget Catalog 挑选的小部件的 URL。

    图 17. 在 gadgetWrapper.xml 中编辑带有 Google 小部件链接的节点
    在 gadgetWrapper.xml 中编辑带有 Google 小部件链接的节点
    在 gadgetWrapper.xml 中编辑带有 Google 小部件链接的节点

    技巧:您还可以编辑 height 设置的值,通过调整小部件在 Lotus Connections 的高度避免出现垂直滚动条。

  3. 在 Eclipse 中右键单击项目(Project Explorer 面板),并选择 Export - WAR file。在磁盘上选择一个用于保存文件的位置并单击 Finish。

至于在本文的第一小节中用 Lotus Widget Factory 创建的小部件,您仅需遵循以下步骤:

  1. 在 WebSphere Application Server 中部署 WAR 文件,并启动相应的 Web 应用程序。在部署时指定 Web 应用程序的上下文根并记得要在 Lotus Connections 的注册步骤中使用它。这个步骤是标准的,和其他 Java EE 中的步骤没有区别。如果您想了解更多细节,请参考 IBM WebSphere Application Server 6.1 Information Center
  2. 在 Lotus Connections Home page 中注册新的小部件。指向小部件的 XML 描述器的 URL 位于:

    http://<server>:<port>/<contextRoot>/gadgetWrapper.xml

    其中 server、port 和 contextRoot 取决于您部署 WAR 文件的位置。

    对于先前使用 Lotus Widget Factory 为 Home page 创建的小部件,步骤是一样的。如果您想了解更多信息,请参考 Lotus Connections 2.5 Information Center 文档。

就这么简单!图 18 通过 BCC News Widget、两个其他 Google 小部件(Facebook 和 Currency Convertor)、您先前使用 Lotus Widget Factory 创建的 developerWorks 小部件和一个 Lotus Connections 提供的小部件展示完整用户体验。

图 18. 包含来自不同位置的小部件(Google 小部件、使用 Lotus Widget Factory 创建的小部件和标准的 Lotus Connections 小部件)的 Lotus Connections Home page 2.5
包含来自不同位置的小部件(Google 小部件、使用 Lotus Widget Factory 创建的 小部件和标准的 Lotus Connections 小部件)的 Lotus Connections Home page 2.5
包含来自不同位置的小部件(Google 小部件、使用 Lotus Widget Factory 创建的 小部件和标准的 Lotus Connections 小部件)的 Lotus Connections Home page 2.5

进一步了解 iWidgets

本文的前两个小节介绍了两个为 Lotus Connections 创建小部件的简单方法,并且不需要编写代码。这个小节专门为希望进一步探索小部件的读者准备。这个小节的目标是为希望实现可定制程度更高的小部件的开发人员提供入门点(定制能力比由 Lotus Widget Factory 等工具实现的小部件更强)。与本文的其他小节不同,这个小节要求您具有 Web 应用程序开发的知识。

注意,这个小节与上一篇针对 Lotus Connections 2.0 发表的 developerWorks 文章 “为 Lotus Connections Home page 实现和部署 Google 小部件” 有一个相似之处。本文没有重新介绍完整的规范,而是强调 iWidget 的主要特性,并利用上一篇文章中的例子。这个小节还介绍了在 Lotus Connections 2.5 中与 iWidget 相关的新特性。

iWidget 规范概述

术语 iWidget 是指 IBM 为定义小部件开发的规范。有几款 IBM 产品,比如 Lotus Connections 和 Lotus Mashups 都嵌入了一个称为 iWidget 框架的通用组件,能够显示遵循 iWidget 规范的小部件。

注意,iWidget 规范仅定义小部件的客户端方面,即运行在浏览器上的部分。它对小部件服务器端代码使用的技术没有任何限制。在客户端和服务器端组件之间的通信通常通过标准的技术来完成,比如异步请求(Ajax)。

在最基础的级别上,iWidget 由小部件开发人员编写的 XML 描述器来定义。描述器包含:

  • 为小部件支持的一个或多个视图定义标记(HTML 代码)的方法。
  • 指向小部件所使用的外部资源(比如 JavaScript 和 CSS 文件)的能力。JavaScript 文件通常包含小部件开发人员编写的代码,并定义小部件的行为和逻辑。
  • 与封装相关的几个属性。要让同一个小部件的几个实例在相同的页面上打开并且不出现资源冲突,那么必须使用封装。这个机制的主要方面是在 XML 描述器中定义的 iScope 属性。iScope 属性指向定义小部件的行为的 JavaScript 类的名称,并且在上面提到的外部 JavaScript 文件之一中实现。

您可以参考上一篇文章 “为 Lotus Connections Home page 实现和部署 Google 小部件” 第一小节中的 Hello World iWidge,获得一个关于基础的 iWidget 概念的具体例子。

另外,iWidget 规范定义了一些可供小部件开发人员使用的服务。要使用 iWidget 框架提供的服务,可以调用名为 iContext 的对象上的方法。这些服务在小部件实例的 iScope 类中自动设置。下面是 iWidget 规范提供的服务的概览:

  • 属性储存。iWidget 框架提供管理和持久化称为 ItemSet 的名-值对的能力。ItemSet 可以在小部件的 XML 描述器中声明,并且可以在 iScope JavaScript 代码中操作它。
  • IO 模块允许小部件从任意域获取资源,方法是通过 Ajax 代理重定向请求。
  • 事件系统通过发布和捕获事件允许页面上的小部件相互通信。注意,该特性特定于 Lotus Mashups 环境,并且在 Lotus Connections 中受到限制。

上一篇文章 “为 Lotus Connections Home page 实现和部署 Google 小部件” 通过 Google 小部件包装器的具体例子展示了 iWidget 框架提供的不同功能。此外,上一篇文章中介绍的包装器还有了改进,允许用户从小部件的编辑视图定制小部件,这是通用骨架方法不能实现的。

您可以在 Lotus Connections iWidget 开发指南 中找到关于 iWidget 实现的更多细节。

您可以下载完整的 iWidget 规范 v1.0 文档

Lotus Connections 2.5 中的 iWidget 规范 v1.0

Lotus Connections 2.0 基于 iWidget 规范的 1.0 版本之前的版本。

Lotus Connections 2.5 现在支持 iWidget 规范 v1.0。具体而言,为开发人员提供了:

  • 改进的持久化机制。Lotus Connections 2.5 支持预定义的通过 ItemSet 命名的属性,开发人员可以使用这些属性跨用户会话持久化名-值对。属性 ItemSet 和普通的 ItemSet 之间的主要区别是 save() 方法。当从小部件代码调用该方法时,就跨用户会话持久化项(名-值对)。通过调用 iContext.getiWidgetAttributes() 返回对属性 ItemSet 的引用。

    在上一篇文章 “为 Lotus Connections Home page 实现和部署 Google 小部件” 中,您看到了 Lotus Connections Home page 2.0 提供一个基于名为 _save and _load 的方法的定制持久化机制。这些方法在 Lotus Connections 2.5 中仍然受到向后兼容性支持,但不应该在新的小部件中使用它们。在前一篇 developerWorks 文章和 Google Date Time 例子中使用了定制持久化机制。您可以从本文的下载部分找到更新的 Date Time 例子,它使用了新的属性 ItemSet(gadgetWrapperDateTime2_5.war)。

  • 以一致的方式获取通过身份验证的用户的细节。现在,您可以使用 iContext 对象上的方法 getUserProfile() 获取包含已通过身份验证的用户的信息的 ItemSet。例如,this.iContext.getUserProfile().getItemValue(‘displayName’) 返回已通过身份验证的用户的名称。您可以从 wiki 页面了解详细信息:http://www-10.lotus.com/ldd/lcwiki.nsf/dx/common-iwidget-support-in-the-lotus-connections-features,标题为 “Obtaining information about the logged in user with UserProfile”。

在 Lotus Connections 2.5 的 Home page、Communities 和 Profiles 特性中的 iWidget

尽管本文主要讨论 Lotus Connections 的 Home page 特性,但还需要注意,您也可以使用 iWidget 扩展 Lotus Connections 2.5 中的 Communities 和 Profiles 特性。Home page、Communities 和 Profiles 支持相同版本的 iWidget 规范 (v1.0),因此可以在这 3 个组件中显示严格遵循 iWidget 规范的小部件,并且不需要对小部件进行任何修改。例如,在本文的前两个小节中用 Lotus Widget Factory 和 Google 小部件创建的小部件。

在 Communities 和 Profiles 组件中使用 iWidget 要注意以下几点:

  • 在 Communities 中,社区所有者可以通过小部件选项板将小部件放置到预定义的放置区域中。您可以通过 Lotus Connections iWidget Development Guide 详细了解预定义区域。

    另外,管理员可以定义强制的小部件,即在任意 Community 页面上显示并且 Community 所有者不能删除的小部件。

  • Profiles 仅支持强制小部件;即 Profiles 所有者不能像 Home page 和 Communities 所有者那样从选项板添加或删除小部件。
  • 可以通过编辑服务器(而不是从用户界面,与 Home page 不同)上的 XML 配置文件来在 Communities 和 Profiles 中部署新的小部件。参考 IBM Lotus Connections 2.5 Information Center 了解更多细节。

结束语

本文介绍了两种为 Lotus Connections 创建小部件的方法,并且不要求您具备丰富的 Web 开发知识。第一小节介绍了使用 Lotus Widget Factory 作为开发工具为 Lotus Connections 创建复杂的小部件,并详细描述了一个具体的小部件例子,它显示来自 developerWorks 的 podcast。

本文的第二小节概述了如何利用 Google Gadget Catalog 为 Lotus Connections 用户添加新功能。

最后,本文的第三小节为希望更多地了解 iWidget 规范并使用传统的开发工具实现 iWidget 的开发人员提供一个入门点。

致谢

本文作者还要感谢 Luis Benitez 和 Adrian Spender 审阅了本文并提供非常有帮助的改进建议。


下载资源


相关主题

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Lotus, WebSphere
ArticleID=445439
ArticleTitle=使用 Lotus Widget Factory 和 Google 小部件定制 IBM Lotus Connections 2.5
publish-date=11092009