平均分 (7个评分)企业 Mashup 应用是通过组装来自多个现有数据源的信息或功能而创建的 Web 应用，从而提供全新的功能和体验。Mashup 应用通常任意混合搭配数据以便创建新的数据源或新的应用程序，然后在单一图形界面中显示数据。Lotus Mashups 提供了一种最简单且最快速的方法把来自窗口小部件 Widgets 和企业基于 Web 的数据 Feeds 组合到单一的动态应用程序中，以便处理特定的状况或问题。
图 1 示意了 Lotus Mashups 的架构，它和 InfoSphere MashupHub 一样是 J2EE 的架构，应用部署在 WebSphere Application Server 上。Lotus Mashups 给用户的是基于浏览器的简单易用的 Mashup 环境，用户可以自由混搭 Mashup Catalog 中的 Feeds 和 Widgets。Mashup Catalog 中的 Feeds 就是通过 InfoSphere MashupHub 创建和注册的企业、部门或互连网的信息源；而 Widgets 则可以是 Lotus Mashups 产品自带的，更多的则是有行业特点由用户自行开发并注册的窗口小部件。
图 1. Lotus Mashups 架构
启动 Lotus Mashups 的方法和在 "IBM Mashup Center 初探 : 第二部分" 中介绍中启动 InfoSphere MashupHub 方法相同。通过 Start > Programs > IBM Mashup Center > Lotus Mashups 进入登录界面如图 2，然后输入用户名和密码进入到初始页面。
图 2. 登录 Lotus Mashups
页面是用户查看、创建和编辑 Mashup 应用的画布区域。在编辑模式下，可以定制页面布局，以便形成独特的 Mashup 外观。初始页面是只读的浏览模式 View Mode，用户可以查看和使用 Mashup 页面，但是不能对页面做任何编辑。当用户是访问控制中的编辑角色成员时，只需要点击上方的操作菜单选择“转至编辑”就会进入到编辑模式 Edit Mode，如图 3 所示。编辑方式是可以组装、配置以及将 Widget 联合在一起，用户可以在页面中添加和删除窗口小部件，还可以编辑内容和风格的设置。
页面菜单是在 Lotus Mashups 窗口顶部当前页面的名称旁的页面选项列表。用户可以使用页面菜单与其他人共享页面、向目录发布页面、编辑页面属性和删除页面。
操作菜单是位于 Lotus Mashups 窗口顶部并以编辑方式呈现的选项列表。用户可以在编辑和查看方式之间切换，查看页面源代码、打开目录以及查看别人与您共享的页面列表。
搜索框是 Lotus Mashups 提供在 Mashup Catalog 中搜索需要的页面、Widgets 和 Feeds，搜索到以后可以将其添加至 Lotus Mashups，然后进行编辑或与其他数据重新混合，最后将其重新发布到 Mashup Catalog 中。
在 Lotus Mashups 的编辑方式下，隐藏的 Widgets 是页面上的一块区域，用于用户需要该页面上的其他 Widgets 可以使用但又不想在 Mashup 应用中显示的窗口小部件，它们通常是用于提供数据或内容但不需要显示的。
在编辑模式下，很重要的就是上面的工具栏，缺省情况下工具栏上会有几个下拉菜单项包含了 Widgets 可供用户拖拽到自己的 Mashup 页面上。下拉菜单是 Widgets 的目录，用户可以更改下拉菜单名称或者把 Widgets 移动到另外一个菜单项下面。Lotus Mashups 本身的页面风格就是 Mashup 应用，它通过很多独立的 Widgets 关联在一起构成了整个界面。
图 3. Lotus Mashups 的界面
窗口小部件 Widgets 是在企业 Mashup 应用中非常关键的，大量有行业特色和企业特点的 Widgets 会使得业务人员轻松和丰富地使用信息。在 IBM Mashup Center 安装完成后，Lotus Mashups 缺省提供了一些窗口小部件 Widgets，在以后的版本中数量会更多。IBM Mashup Center 1.0 自带的 Widgets 包括：
- JavaScript Adapter：运用 Javascript 将事件数据从一个窗口小部件转换为另一个不同的值或类型，然后将数据重新发布至该页面上的另一个窗口小部件。当一个窗口小部件的事件数据与另一个窗口小部件的事件数据不匹配时，可以使用这个功能。
- Regular Expression：按照规定的表达式查找并替换字符串中的内容。
- Web Site Displayer：根据指定的 URL 显示 Web 站点。
- Feed Reader：显示 Feed 的内容。
- Customer List：数据样本查看功能的窗口小部件，是用来做 Demo 演示用途。该 Widget 定义了数据来源于 Mashup Catalog 中的 Feed，数据内容包含客户姓名、地址、邮政编码、联系信息、订单符号、公司 Web 站点等。
- Data Editor：通过常见操作例如排序、过滤和截断，将从一个窗口小部件接收的内容转换为要发送至第二个窗口小部件的输出内容。
- Data Viewer：用表格形式组织和显示数据内容。可以显示来自 Feed 或者逗号分隔的文件中的数据。
- Portal：显示来自 IBM Websphere Portal 门户网站 URL 对应的页面。用户首次访问该 Widget 的时候，需要登录门户。
- Sametime：允许用户登录 IBM Lotus Sametime Connect 并与联系人聊天，而无需在 Mashup 页面之外打开 Sametime 应用程序。
- Bar Chart：条形图，即以图表显示来自指定数据源的两个或多个值，并用矩形条表示值。
- Image：显示指定 URL 上传的图像。
- Line Chart：折线图，即以点显示值，并连接这些点以在图上形成线。
- Pie Chart：饼状图，即以被分成几部分的圆形图显示数据。圆的每部分以占总量的百分比表示值。
- Event Explorer：显示页面上不同窗口小部件发布的事件数据。必须与其他窗口小部件连接以便显示事件数据。
- HTML Markup：根据输入到编辑器中的 HTML 代码显示 Web 页面。
IBM Mashup Center 产品自带的 Lotus Widget Factory 提供给用户来针对行业和企业而开发的 Widgets。Lotus Widget Factory 提供了不需编程的快速开发 Widgets 的开发环境。它具有以下特点：
- 快速开发；
- 强大集成能力；
- 面向服务的开发；
- 可以作为 IBM Rational tools 或者 WebSphere Integration Developer 的 Eclipse 插件；
- 与 Lotus Mashups 无缝集成。
另外，IBM 也有一个独立的产品 WebSphere sMash 也可以和 IBM Mashup Center 互为补充。它提供了灵活的脚本方式开发环境，可以非常方便地创建 IBM Mashup Center 的 Widgets。在 WebSphere sMash 中创建的组件可以通过 InfoSphere Mashup Hub 进行管理，然后在 Lotus Mashups 中组装。它具有以下特点：
- 支持 Groovy 和 PHP，提高开发效率；
- 可以通过脚本或者图形界面来创建供 Lotus Mashups 组装使用的 Widgets；
- 使用脚本来创建 REST 协议的 Widgets。
用户通过开发工具 Lotus Widget Factory、WebSphere sMash 或自行编写的 Widgets 是需要上传或注册到 Mashup Catalog 才能被 Lotus Mashups 使用。这个步骤通过 InfoSphere MashupHub 的“上载窗口小部件”来完成，如图 4 所示。
图 4. 上传 Widget
用户开发好的 Widgets 必须在包文件中，并且这个包文件必须在可访问的文件路径或 URL 中。包文件是为了分发和部署窗口小部件而创建的归档格式，例如 .zip 文件。对于 iWidget 而言，包文件是 .war 文件。如图 5 所示，把免费地图信息 OpenStreetMap 的 Widget 上传到 Mashup Catalog。
图 5. 上传 Widget
上传成功以后有如下两种方式添加到 Lotus Mashups。添加 Widget 的同时可以指定所属下拉菜单，相应的标题和描述，同时选择最能代表 Widget 的图标。
方式一是在 InfoSphere MashupHub 中查看该 Widget，选择操作“添加到 Lotus Mashups”，如图 6 所示。
图 6. 把 Widget 添加到 Lotus Mashups 的方式一
方式二是在 Lotus Mashups 利用搜索功能查找 Widgets。在 Lotus Mashups 右上角窗口中输人搜索条件，然后单击搜索图标。当显示搜索结果后，选中需要添加至 Lotus Mashups 的窗口小部件，如图 7 所示。
图 7. 把 Widget 添加到 Lotus Mashups 的方式二
在本文在创建 Mashup 页面中用到的 Widgets 都需要按照该过程添加到 Lotus Mashups，并且都添加到“演示”下拉菜单，参见下载部分。
把 Feeds 添加到 Lotus Mashups 的方式和把 Widget 添加到 Lotus Mashups 完全相同。由于 Feeds 实际上是信息内容，因此在添加到 Lotus Mashups 时候还需要选择 Feed Viewer 即查看 Widget。查看 Widget 是用于在 Mashup 页面中显示 Feeds 的信息内容，同时也可以和其他 Widgets 在 Mashup 页面中实现连接和交互。IBM Mashup Center 中提供了两个查看 Widget，分别是读者订阅源 Feed Reader 和数据查看器 Data Viewer。读者订阅源 Feed Reader 会顺序逐条显示 RSS 格式的 Feed，而数据查看器 Data Viewer 则会按照表格方式显示数据。图 8 举例把来源于 Excel 的客户数据 Feed 分别通过读者订阅源 Feed Reader 和数据查看器 Data Viewer 的方式添加到 Lotus Mashups 中，在 Mashup 页面中得到不同的输出方式。
图 8. 用读者订阅源 Feed Reader 和数据查看器 Data Viewer 显示同样的 Feed
下面通过一个实际的例子来看创建 Mashup 应用的过程。首先点击图 3 所示界面上方当前页面的位置并选择“创建新页面”，如图 9 所示，并命名为“我的页面”。回车以后就会进入编辑模式，可以自由组装“我的页面”。
图 9. 创建新页面
业务人员可以根据业务需求任意组装需要的 Widgets，在本例中可以通过以下窗口小部件构建一个客户 360 度视图，如图 10 所示：
“客户列表”是通过数据查看器 Data Viewer 来显示客户信息；
“AccuWeather”是天气信息的 Widget；
“Google Gadget”是利用 Google 小工具的 Widget；
“OpenStreetMap”是地图信息的 Widget；
“Web 站点显示程序”是显示 Web 网站内容的 Widget。
图 10. 根据业务场景选择 Widgets
业务人员只需要把这些窗口小部件添加到页面上即可，如图 11 所示。
图 11. 把 Widgets 添加到 Mashup 页面
业务人员可以根据需要来配置这些窗口小部件，主要设置定义窗口小部件特性的公共属性。例如，可以配置窗口小部件以指向特定文件或订阅源 URL，这样它就知道从哪里获得数据。可以配置风格属性，用于定义窗口小部件应该如何在 Mashup 页面中显示。风格属性包括过滤表中的信息并进行分类、突出显示数据行以及添加标题、颜色和图像等等。因为每个窗口小部件都是满足不同业务需求而创建的，所以窗口小部件的配置设置也各不相同，从窗口小部件开发商处可以获得具体的配置说明，Lotus Mashups 缺省提供的窗口小部件配置可以参照产品文档。如图 12 所示，现在以 Google Gadget 窗口小部件为例来看配置过程。
图 12. 配置窗口小部件
Google Gadget 窗口小部件可以选择互联网可用的 Google 小工具，这是一些简单的 HTML 和 JavaScript 小型应用程序，可嵌入网页和其他应用程序中。如图 13 所示，业务人员可以直接用关键字来进行搜索，在本例中搜索 stock，然后选择一个合适的股票查看小工具。
图 13. 配置 Google Gadget 步骤一
在图 14 中，客户可以指定查看的股票代码，在 Mashup 应用中可以不填，然后选择保存。不填的原因是在 Mashup 应用中可以通过连接 Widgets 的功能，让用户动态看到所需要的股票曲线。
图 14. 配置 Google Gadget 步骤二
连接 Widgets 是非常关键的任务，就是要根据业务含义，动态把页面上这些的 Widgets 连接起来，称为 Wire Widgets。当连接两个窗口小部件时，实际上通过传递事件数据（通常称作有效内容）来进行通信。其中一个窗口小部件发送数据，而另一个则接收该数据。发送方窗口小部件发送数据作为某个事件的结果，例如单击表中的某个单元格。当接收方窗口小部件接收该内容后，就会进行指定的操作，例如刷新页面并显示更新后的信息。正是这个强大的功能使得业务人员可以很自如地根据业务需求组织和装配信息从而实现 Mashup 应用的业务价值。
比如现在连接两个窗口小部件时，可以从发送窗口小部件或接收窗口小部件开始。例如首先把客户列表窗口小部件和前面配置的 Google Gadget 窗口小部件连接起来，这样用户就可以在客户列表窗口小部件中单击某个客户姓名，然后在 Google Gadget 窗口小部件中显示该客户的股票波动曲线。客户列表窗口小部件是发送窗口小部件，而 Google Gadget 窗口小部件则是接收窗口小部件，传递的数据内容是客户列表的 Ticker 字段内容。如果从客户列表窗口小部件开始连接过程，如图 11 所示单击客户列表窗口小部件上方图标，则连接过程分为三个步骤，如图 15 所示：
- 您想要客户列表窗口小部件将哪些内容发送到页面上的另一窗口小部件？本例中选择字段 Ticker。
- 您想要使用页面上的哪个窗口小部件来接收内容 Ticker ？本例中选择 Google Gadget 窗口小部件。
- 当 Google Gadget 接收内容 Ticker 时，您想要采取哪种操作？本例中选择字段 syms，这也就是图 14 中客户可以指定查看的股票代码字段。
和上面的步骤完全一样，可以把客户列表窗口小部件和 Web 站点显示程序窗口小部件连接起来。客户列表窗口小部件是发送窗口小部件，而 Web 站点显示程序窗口小部件则是接收窗口小部件，传递的数据内容是客户列表的 URL 字段内容。这样用户就可以在客户列表窗口小部件中单击某个客户姓名，然后在 Web 站点显示程序窗口小部件中显示该客户的 Web 站点。
图 15. 连接客户列表和 Google Gadget 窗口小部件
以上的例子都是从发送窗口小部件开始连接 Widgets，下面来看从接收窗口小部件开始连接 Widgets。例如把天气信息的 AccuWeather 窗口小部件和客户列表窗口小部件连接起来，这样用户就可以在客户列表窗口小部件中单击某个客户姓名，然后在 AccuWeather 窗口小部件中显示该客户地址的天气情况，以方便安排拜访客户的行程。客户列表窗口小部件是发送窗口小部件，AccuWeather 窗口小部件则是接收窗口小部件，传递的数据内容是客户列表的 Zip 字段内容。如果从 AccuWeather 窗口小部件开始连接过程，单击 AccuWeather 窗口小部件上方图标，则连接过程分为三个步骤，如图 16 所示：
- 您想要 AccuWeather 窗口小部件从另一窗口小部件接收哪些内容？本例中只能选择 Zipcode，这是由 AccuWeather 窗口小部件的输入参数决定的。
- 页面上的哪个窗口小部件应该发送内容到操作 Zipcode？本例中选择客户列表窗口小部件
- 您想要客户列表窗口小部件将哪种操作的内容发送到 AccuWeather 窗口小部件？本例中选择字段 Zip。
和上面的步骤完全一样，可以把地图信息的 OpenStreetMap 窗口小部件和客户列表窗口小部件连接起来。客户列表窗口小部件是发送窗口小部件，OpenStreetMap 窗口小部件则是接收窗口小部件，传递的数据内容是客户列表的 Zip 字段内容。这样用户就可以在客户列表窗口小部件中单击某个客户姓名，然后在 OpenStreetMap 窗口小部件中显示该客户的地图信息。
图 16. 连接 AccuWeather 和客户列表窗口小部件
连接图 Wiring Graph 是通过图形方式显示选中的窗口小部件如何与页面上其他窗口小部件进行连接的图形。本例中客户列表窗口小部件连接图如图 17 所示，客户列表窗口小部件是显示客户信息 Feed，通过连接把客户的相关字段信息发送给相应窗口小部件，以完成 Mashup 应用。
图 17. Widgets 连线图
最后点击页面上方的保存按钮，然后在操作菜单中选择“转至查看”进入到只读的浏览模式。整个 Mashup 页面的效果如图 18，用户在客户列表窗口小部件中单击某个客户姓名，则会分别得到该客户的股票曲线、网页内容、地图信息和当地天气情况。整个页面组装过程全部由业务人员根据需求来完成，只需要简单的鼠标操作就能构建出 Mashup 应用。
图 18. 第一个 Mashup 页面
Lotus Mashups 和 InfoSphere MashupHub 共享编目元数据 Mashup Catalog，下面来看如何通过发布和共享 Mashup 页面实现 Mashup 资产共享。
发布 Mashup 页面可以把页面存入 Mashup Catalog 中，然后让其他用户来发现并重用它。发布有两种方式：可以选择发布页面的 URL；或者上载整个页面定义及其所有组件，如图 19 所示。选择后者，则会上载包括该页面设置的所有属性和该页上的所有窗口小部件，还有窗口小部件的配置和连接属性。
发布页面的步骤如下：
- 在 Lotus Mashups 界面上方点击页面菜单。
- 选择“发布该页面”。
-
在窗口中填写标题、描述和版本号。同时还指定标记和许可权。最后，从以下选项中选择一项。
将页面作为 URL 发布：选择该选项以便将 Mashup 页面作为标准的 URL 进行引用。其他用户只能只读方式访问该 Mashup 页面，将无法进行修改。
发布页面定义和工件：选择该选项以便将 Mashup 页面进行上载，方便其他用户可以重用并扩展该 Mashup 页面。其他用户访问目录中的页面并将其添加至 Lotus Mashups 时，页定义和所有与该页面关联的窗口小部件都会部署。新的页面节点创建成功，当前用户就可以对该 Mashup 页面进行编辑。 - 单击保存。
图 19. 发布 Mashup 页面
这时候转到 InfoSphere MashupHub 的窗口，在目录 Catalog 区域选择“列示页面”，就会看到刚才发布的 Mashup 页面，如图 20 所示。
图 20. 查看发布的 Mashup 页面
其他用户可以登录到 InfoSphere MashupHub，点击查看“我的页面”的具体信息，然后选择操作“添加到 Lotus Mashups”。首先需要输入 Lotus Mashups 服务器、用户名和密码的信息，如图 21 所示。
图 21. Mashup 页面添加到 Lotus Mashups 步骤一
接下来就需要指定新页面的名称、描述和位置。如图 22 所示，则“我的页面”就添加至 Lotus Mashups，位置为 > 我的页面。
图 22. Mashup 页面添加到 Lotus Mashups 步骤二
公司内的个人用户以及用户组可以共享 Mashup 页面。在共享页面时，可以指定特定用户具有查看或编辑权限，如图 23 所示。如果具有查看权限，就只能查看 Mashup 页面。如果具有编辑权限，就可以添加、删除、配置和连接窗口小部件。
共享页面的步骤如下：
- 在 Lotus Mashups 界面上方点击页面菜单。
- 选择“共享该页面”。
- 在访问级别窗口中，使用搜索字段将个人用户和组添加到搜索结果列表中（该列表在单击搜索按钮后显示）。
- 在搜索结果列表中，选中您要与之共享页面的个人和组旁边的复选框。
- 单击添加至查看，为选中用户提供查看权限，单击添加至编辑，为选中用户提供编辑权限。
图 23. 共享 Mashup 页面
当页面所有者给其他用户共享页面后，其他用户就可以 Lotus Mashups 界面顶部的操作菜单进行检索，开始预览，然后任意将其添加至页面导航，如图 24 所示。如果提供了查看权限，那么只能查看该页面。如果提供了编辑权限，那么可以使用编辑方式打开页面并修改窗口小部件。
其他用户要访问页面所有者共享的页面步骤如下：
- 在 Lotus Mashups 界面上方点击操作菜单。
- 在列表中选择“查看更多页面”。
- 在更多页面对话框中，会看到页面作者已共享这些页面。单击“添加”按钮就可以把该页面添加到导航栏。
图 24. 查看共享的 Mashup 页面
IBM Mashup Center 填补了 IBM WebSphere Portal 和 IBM Information Server 构建的企业和部门应用的空白。Portal 侧重于高级和复杂的应用，一般有 IT 管理和控制，具有细粒度的权限控制、制度管理、联邦、搜索、内容管理和个性化服务模板功能。IBM Mashup Center 则侧重于创建即席应用，自我服务和共享。通常两者可以一起使用，IBM WebSphere Portal 拥有更多的用户，而 IBM Mashup Center 拥有更多的应用。
图 25. IBM WebSphere Portal 和 IBM Mashup Center 覆盖不同的需求
IBM Mashup Center 应用如果想发挥更广泛的应用，可以加上安全和管理功能以后发布到 WebSphere Portal。同时，WebSphere Portal 也能够使用 Mashup 应用中的 Feeds 和 Widgets。
在 WebSphere Portal 中有 Portlet 的概念，它是一种 Web 组件，是专为将合成页面里的内容聚集在一起而设计的。在很多方面，Portlet 和 Widget 是类似的，比如都是用来做聚合混搭的模块，都提供配置的属性。但是它们也有明显的不同点，如表 1。也正是两者具有相关和互补性，WebSphere Portal 将会提供 Widget Portlet 以支持在 Portal 中使用 Widgets。
表 1. Widget 和 Portlet 的不同点
| 比较内容 | Widget | Portlet |
| 混搭方式 | 在客户端进行 | 在服务器端进行 |
| 开发语言 | Java, PHP, .NET, Ruby on Rails, HTML, Javascript 等 | Java |
| 标准 | 没有，IBM 使用 iWidget 规范 | JSR-168, JSR-286, WSRP 1.0, WSRP 2.0 |
IBM Mashup Center 提供的开发工具 Lotus Widget Factory 是进行快速开发 Widgets 并基于 Eclipse 的开发平台。通过 Lotus Widget Factory 开发出符合行业和企业需求的 Widgets 是 Mashup 应用的关键。
学习
- “IBM Mashup Center 初探 : 第一部分：概念和安装”（developerWorks 中国，2008 年 8 月）介绍产品功能、组件和架构，以及安装 IBM Mashup Center 的整个过程。
- “IBM Mashup Center 初探 : 第二部分：InfoSphere MashupHub”（developerWorks 中国，2008 年 9 月）介绍信息加工组件 InfoSphere MashupHub 的使用。
- “为 WebSphere sMash 做好准备”（developerWorks 中国，2008 年 6 月）介绍交付基于 Web 2.0 的动态环境应用程序的平台 WebSphere sMash。
- “Portlet 开发工作手册”（developerWorks 中国，2007 年 3 月）介绍 Portlet 开发的概念。
- “Widget programming documentation”介绍 iWidget 的规范。
- 了解更多 IBM WebSphere Portal 的内容。
- 了解更多 IBM Mashup Center 的内容。
获得产品和技术
- 下载 IBM Mashup Starter Kit，体验 IBM Info 2.0 的强大功能。
- 下载 DB2 9.5 和 IBM Data Studio 试用版，体验 DB2 9.5 和 IBM Data Studio 的强大功能。
- 下载 IBM 软件试用版，体验强大的 DB2?，Lotus?，Rational?，Tivoli?和 WebSphere?软件。
讨论
- 查看 IBM Mashup Center wiki 的最新信息。
- 查看 Mashups 社区的最新内容。
| 名字 | 大小 | 下载方法 |
|---|---|---|
| accuWeather.war | 10k | HTTP |
| openStreetMap.war | 229k | HTTP |
| googleGadgetWidget.war | 25k | HTTP |
注意：
- 天气信息的 Widget
- 地图信息的 Widget
- 利用 Google 小工具的 Widget
