级别： 初级 杨天娥 (yangte@cn.ibm.com), 软件工程师, IBM
沈锐 (shenrui@cn.ibm.com), 软件工程师, IBM
2009 年 1 月 05 日 近年来，Web 2.0 逐渐成为互联网领域的一种趋势，但在企业软件方面的应用仍然微乎其微。 IBM Mashup Center 作为 IBM 推出的新产品，将 Web 2.0 的技术应用到企业商务软件中，开创了企业 2.0 的新时代。 IBM Mashup Center 主要包含 Lotus Mashups 和 InfoSphere MashupHub 两部分。本文将详细介绍 IBM Mashup Center 1.0 的功能特点，并重点介绍 Lotus Mashups 部分。
本文主要涉及如下内容：
- 背景介绍
- IBM Mashup Center 概述
- Lotus Mashups 功能介绍
- 小部件 (widget)
- 导航栏
- 工具箱
- 模式选择器
- 搜索栏
- 快捷菜单栏
- 隐藏区域
- 主题和皮肤
- 资源库 MashupHub
- IBM Mashup Center 应用
- 结束语
背景介绍
二十一世纪的时代是信息的时代，信息的瞬息万变促使生活、经济、社会建设也随之迅速变化。在这个与时间赛跑的时代，如何能对信息的变化做出迅速、敏捷、准确的响应成为很多企业得以生存和发展的关键所在。
传统的企业运作，一般由业务人员通过对客户的了解和沟通获得最新资料，再根据已有的资料将业务需求整理为企业 IT 人员所需的项目需求。企业 IT 人员根据对项目需求的理解和分析，将其转化为程序可辨识的代码。最后，企业 IT 人员再将解决方案交给业务人员。业务人员经过审核，确实符合业务需求才把成果推出给最终对客户。
在这样的企业运作流程中，除去 IT 人员软件开发的一个过程，客户和业务人员的沟通，业务人员和 IT 人员的沟通成为关键因素。然而，往往业务人员和 IT 人员的沟通和设计也会存在时间要求和功能要求的偏差。这种偏差和耗时的应用需求逐渐成为这个信息时代的焦点问题。谁能在同样的市场需求下在最短的时间内作出最快速正确的反应，谁就是赢家。
面对快速的业务变化，客户希望能够得到准确的信息，并提供迅速且正确的解决方案。 IT 资源的稀缺和他本身的运作模式很难帮助个人用户获得迅速的响应。如果有一种平台能为业务人员所应用，并提供快速简单的方法创建场景应用，问题便能得到很好的解决。因此，IBM Mashup Center 应运而生。 IBM Mashup Center 提供了简单的方式来帮助小团队和个人业务人员们获得他们所需要的资料，并整合为他们需要的情景模式。他能提供简单的的方式，利用现有的组件和服务信息实现业务场景，为客户提供更多的商业价值，创造更多的商业机会。
IBM Mashup Center 概述
谈到 IBM Mashup Center， 就不得不谈到近年互联网上流行的几个概念：Web 2.0，企业 2.0 和 Mashup.
什么是 Web 2.0?
Web 2.0 作为互联网新的发展模式，其概念开始于 O'Reilly 公司与 MediaLive International 公司的一个内部头脑风暴会议。相对于 Web 1.0，Web 2.0 追求更好的用户体验度和参与度。 Web 2.0 的理念是“人”，强调的是人和人之间的协作。
什么是企业 2.0?
企业 2.0 又名企业级的 Web 2.0，是指企业采用 Web 2.0 的理念提高员工之间的协同工作能力。虽然具有 Web 2.0 的特征的公司层出不穷，但是绝大多数 Web 2.0 的产品仅是面对普通用户的应用，将其应用到企业级商务应用的却微乎其微。 IBM 作为企业应用的领头羊，推出了 IBM Mashup Center，将 Web 2..0 的技术应用到企业商务软件中，从而使得企业人员的工作变得更加轻松和高效，开创了企业 2.0 的新时代。
什么是 Mashup?
Mashup 是一种新型的基于 Web 的数据集成的交互式应用程序， 它利用了从外部数据源检索到的内容来创建全新的创新服务。 Mashup 的流行萌芽于对交互式用户参与和集成第三方数据的类似于科学怪人方式的重视。 Mashup Web 站点的特点就表现为它正在 Web 上扎根发芽，它们利用了从组织边界之外的数据源获取的内容和功能。
什么是 IBM Mashup Center?
IBM Mashup Center 是一种企业级的 Mashup 应用，它将强大的应用程序构造能力交给最终用户，从而使构建应用程序不再是程序员的专利；它采用了大量的 Web 2.0 技术及组件，例如 Ajax 和 Dojo，从而带给用户更好的体验。通过 IBM Mashup Center 这个平台，用户能够将不同来源的功能及内容与自己的数据相结合，自己创建新的场景应用。 IBM Mashup Center 主要包含 Lotus Mashups 和 InfoSphere MashupHub 两部分。 Lotus Mashups 为企业用户提供各类信息重新组合的平台；而 MashupHub 则提供了一个轻量级的信息管理环境，通过它企业用户能够共享个人的、部门的以及整个企业的信息从而作为构建 Mashup 应用的基础。本文将侧重于介绍 Lotus Mashups 部分。
图 1. Lotus Mashups
图 2. InfoSphere MashupHub
Lotus Mashups 功能介绍
在 Lotus Mashups 中创建一个或多个 Mashup 页面，然后在每个 Mashup 页面中加入小部件（Widget）并进行配置，最后将各个小部件“交织” ( Wiring ) 在一起使它们协同工作，就构成了一个 Mashup 应用。
小部件 ( Widget )
小部件（Widget）是构建 Lotus Mashups 应用的基础。 Lotus Mashups 提供了 10 余种常用的 Widget ，例如 Data Viewer， Web Site Displayer， Data Editor，以及各类不同的 Chart Widget 。
- Data Viewer： 用于将数据用表格的形式展现，并且你可以对表格的外观以及数据过滤进行定制。
- Web Site Displayer： 能够在 Lotus Mashups 中显示某个 Web 站点。
- Data Editor： 有时外部数据源提供的数据未必是小部件可以直接识别的格式，这时 Data Editor 可以将数据转换成指定的格式。
- Chart 小部件： Lotus Mashups 提供了三种 Chart 小部件，它们可以绘制饼图，线图和柱状图。
对于其他的小部件，这里就不再一一赘述。
Wiring 是不同小部件进行交互的纽带，这种交互及表现为事件触发也表现为数据传递。每个小部件都为不通的数据类型定义了很多发送数据和接受数据的方法，当你把一个小部件的发送数据方法和另一个小部件的接受数据方法进行“交织”，就构建了这两个小部件之间的数据通道。因此，当用户将众多的小部件进行 “交织” 最终可以构建极为复杂的应用。 下面让我们看一个 Wiring 的示例。下图中，我们将 Customer List（一个显示客户列表的示例小部件）的“ string from URL ”数据和 Web Site Displayer 小部件的“ displayHTML ”方法进行“交织”。
图 3. 将 Customer List 和 Web Site Displayer 进行 “交织”
此时，当点击我们在 Customer List 小部件中点击 “ Cisco ”时，Cisco 的公司网站 URL 就会被发送给 Web Site Displayer 小部件，于是 Web Site Displayer 小部件显示出 Cisco 的公司网站。
图 4. Customer List 和 Web Site Displayer 的 Wiring 结果
Lotus Mashups 的界面主要由几个部分组成：导航栏，模式选择器，工具栏，搜索栏，快捷菜单栏，隐藏区域。下面我们对各个部分做详细介绍。
图 5. Lotus Mashups 界面元素
导航栏
登录 Lotus Mashups 后，呈现在主页面顶端的是导航栏。通过导航栏用户可以组织和管理自己的页面，并且可以对页面进行配置。
把鼠标移到导航栏上的页面名称上，同一层次的页面名称会以下拉的方式展现。此时点击某一个页面名称，将切换到该页面。当用户将鼠标停留于某一页面名称上时，从属于该页的子页面将从右边展开。在每一层页名列表的最下方，都有一块等待用户输入的区域，用户根据提示输入新的页名，新的页面就将被创建。 Lotus Mashups 的导航栏没有限制页面的创建的数量和级别，因此用户可以在任意层次创建页面，也可以创建任意层次的页面。
图 6. 创建页面
用户可以通过拖拽的方式改变页面的位置（包括父页面层，子页面层以及兄弟页面层），例如您可以将一个在层次 1 上的页面拖拽到层次 2 上。这种页面层次之间的关系以及表现形式，使用户能够方便的管理页面关系，对所有页面都一目了然，并能轻松快捷的找到自己需要的页面并使用。
图 7. 页面位置重组
在导航栏页名称的右边有一个小三角的标志，点击这个标志，用户可以看到对页面可以进行的各种操作：发布页面，共享页面，编辑页面属性和删除页面。
- 发布页面：通过“发布页面”的功能，用户可以将当前页面发送到 IBM Mashup Center 的另一个部分 InfoSphere MashupHub 中去，从而其他用户可以从 MashupHub 中浏览该页面，或者将该页面增加到自己的 Lotus Mashups 中使用。
- 共享页面：默认情况下，自己创建的页面只有自己可以浏览和编辑。通过“共享页面”功能，用户可以将页面的浏览和编辑权限赋予其他用户。
- 编辑页面：该功能用来编辑页面的属性和布局方式，比如修改页面标题等。
- 删除页面：顾名思义，该功能将删除页面。
图 8. 导航栏页面菜单
工具箱
工具箱只有在“编辑模式”下可见。工具箱提供了四个目录：Collaboration，Demo，Favorites 和 Tools，每个目录下有不同的小部件。用户可以拖拽这些小部件到页面上，也可以通过小部件的菜单项中的“ Add to Page ”。通过“搜索栏”和 Hub 中的“添加小部件”功能，可以“丰富”工具箱中的小部件。
图 9. 工具箱及其小部件 widget
模式选择器
模式选择器使用户能够在不同的模式之间直接切换。用户有五种模式可以选择：查看模式，编辑模式，源代码模式，打开“目录”和查看共享页面。
- 查看模式：在“查看模式”下，用户只能观看当前页面，无法修改具体的内容。
- 编辑模式：在“编辑模式”下，用户能够对页面进行编辑，比如从工具箱拖拽小部件到页面中，配置小部件并将小部件进行“交织”。
- 源代码模式：“源代码模式”允许用户查看当前页面的源代码。
- 打开“目录”：这里所说的“目录”就是 MashupHub 。选择该模式将打开 MashupHub 界面。
- 查看共享页面：选择该模式，将弹出一个对话框，该对话框显示所有其他人共享给您的页面。您可以“接受”这些页面，它们就会出现在您的导航栏中。
图 10. 模式选择器
搜索栏
前面提到了“发布页面”功能，搜索栏是另一个 Lotus Mashups 和 InfoSphere MashupHub 的结合点。用户可以在搜索栏中输入关键词查询 MashupHub 里面的 Feed 和 Widget，并将它们添加到 Lotus Mashups 的用户“工具箱”中。
图 11. 搜索栏查询结果
“工具箱”中有很多目录，在添加 Widget 的过程中，用户可以选择要把 Widget 添加到哪一个目录下。
图 12. 通过搜索栏添加 Widget 到 Lotus Mashups 的工具箱
快捷菜单栏
工具箱的右侧是快捷菜单栏。从左到右，依次是打开（关闭）隐藏区域的按钮、切换到 Hub 的按钮以及保存页面的按钮。下面还将详细介绍神秘的隐藏区域。
图 13. 快捷菜单栏和隐藏区域
隐藏区域
隐藏区域是 Lotus Mashups 中一个有趣的功能。对于那些提供数据转换功能的小部件（比如 Data Editor）或者一些您暂时不想显示在页面中的小部件，您可以将它们放在“隐藏区域”中。值得一提的是，虽然这些小部件被隐藏了，但它们仍然在“工作”，仍然可以跟其他的小部件交互。“隐藏区域”中的小部件保持有被放置到“隐藏区域”之前的所有设置，并且您仍然可以像之前一样对它进行各种配置操作。
图 14. 隐藏区域
主题和皮肤
像绝大多数的 Web 应用一样， Lotus Mashups 也有“主题”和“皮肤”的概念，并且是可配置的。 Lotus Mashups 包含有一个默认主题，它决定了整个 Lotus Mashups 的外观。该默认主题提供了四种“皮肤”：Glass、Title、No Skin、Thin Skin 。您可以在小部件的弹出菜单中指定使用的“皮肤”。下图显示了四种不同“皮肤”的效果。
图 15. 主题和皮肤
资源库 MashupHub
Lotus Mashups 仅仅提供了构建 Mashup 应用的平台，在 MashupHub 中，人们可以分享各自构建的 Mashup 应用。例如，当您开发了某个 Mashup 页面后，您可以将它发布到 MashupHub 中，从而其他人可以将该页面加入到自己的 Mashup 应用中。不仅如此，MashupHub 还可以管理 Feed、Widget 等各种信息。如果您开发了一个 Widget，您可以将它上传到 MashupHub 中，其他人就可以将它加入到自己的 Mashup 应用中。
图 16. 资源库 MashupHub
IBM Mashup Center 的应用
IBM Mashup Center 让业务变得更具有竞争性，在创新的社会提供更敏捷更多的机会。 IBM Mashup Center 为业务人员提供一种新的方式来整合企业和网络数据来解决具体的问题。他能降低业务成本，整合各类有效的组件，以更创新更有效的方式为客户解决具体问题。
IBM Mashup Center 作为 Web 2.0 的企业软件，针对广泛且多变的业务问题，使业务人员能快速创建个性化场景，提供有效的解决方案。 IBM Mashup Center 特别适用于以下需求：
- 快速响应突发改变 : 当企业遇到突发事件时候，很难对这种没有计划的事件做出响应。 IBM Mashup Center 可以灵活地运用企业内外数据和信息的价值，并迅速组装企业的 Mashup 应用。 Mashup 应用提供了业务人员迅速找到问题和处理突发情况的办法，节省了 时间和迅速进行决策。
- 业务人员即席的应用需求 : 业务人员经常需要及时地获取企业数据来做业务分析和研究，这种需求很难固定，经常随着业务的变化而变化。 IBM Mashup Center 可以容易地把复杂的数据模型发布成业务人员可以使用的 Feeds，业务人员非常方便地拼装和使用这些包含了实时企业数据的 Feeds，极大地提高了企业核心竞争力和决策支持能力。
- 快速开发足够好的应用 : 业务人员在工作中往往需要从海量信息中发现信息的关联，找到解决问题的办法。业务人员可以通过 IBM Mashup Center 构建一个自己的应用，把多个包含相关数据的 Feeds 混搭在统一界面里面，任意选择需要的信息，自由定义信息和信息之间的关联。最终通过完成的 Mashup 应用在浏览信息将相关的信息显示出来，并找到相应的解决方案。
以某手机生产运营企业为例，马健作为该企业生产部主管，需要保证各类手机配件一定的库存量。通过 IBM Mashup Center, 马健根据自己的业务需求，创建适合自己需求的场景应用。
首先，马健登陆了 Lotus Mashups，并创建了属于自己的页面——产品信息。
图 17. 新建页面——产品信息
通过模式选择器选择 Open Catalog 进入 InfoSphere MashupHub，并通过创建新的 Feed 来上传各类手机的产品信息。
图 18. 新建 Feed ——产品信息
在 Lotus Mashups 中，马健通过搜索栏搜索到刚才新建的 Feed，即产品信息，并将其加入到 Lotus Mashups 的工具栏中。
图 19. 添加 Feed 产品信息到工具栏
从工具栏中选择产品概要信息，并将其拖放到自己的页面上。另外，再从工具栏中选择 Data Viewer 拖放到相同的页面。通过 wiring，将手机配件信息从产品概要信息中将数据传递到 Data Viewer 。此时，当马健点击产品概要信息中的任意一款手机，其相对应的手机配件信息就会显示在 Data Viewer 中。
图 20. 将产品信息中的配件信息 wiring 给 Data Viewer
将 Bar Chart 从工具栏中拖放到当前页面中，通过 wiring，从 Data Viewer 中获得库存信息。从 Bar Chart 中，用户可以清楚的看到该款手机各种配件的具体需求量和库存量。通过查看，马健发现当前的配件资源中，库存量不足的是 SD-1024.
图 21. 利用条状图查看配件库存信息
为了解决当前的问题，马健利用 sametime 组件，找到采购部门的主管卢效鹏，与其进行沟通，告知配件短缺情况，并将刚才建立的应用页面共享给卢效鹏，以方便采购部门的核实。
图 22. 共享建立了业务场景的页面
卢晓鹏登陆 IBM Mashup Center 后 , 通过模式选择器中选择查看更多页面，添加了马健共享过来的页面。
图 23. 添加共享的页面
通过马健在该页面上建立的场景应用，核实了该配件库存确实短缺的情况，便通过 sametime 即时告知了马健，请他提交采购申请的方式来解决当前问题。
图 23. 审核业务并回复信息
通过这个简单的例子，用户可以在完全不需要 IT 人员的协助和干预的情况下，根据自己的数据信息创建适合自己需要的业务场景，为具体问题提供了快捷有效的解决方式，充分提现了 IBM Mashup Center 的产品特点。
结束语
IBM Mashup Center 使企业用户自己整合展现不同的数据信息构建 Web 应用成为可能。 IBM Mashup Center 将企业用户从传统的 IT 模式中解放出来，使他们能够根据自己的需求简单快速地通过混合不同的信息构建 Web 应用，并且能够通过 MashupHub 分享各自的应用和信息。因此，不得不说 IBM Mashup Center 带来了一种新的“生产”模式，它给企业注入了新的 Web 2.0 的元素 － IBM Mashup Center，迎来了企业 2.0 的新时代。
参考资料 学习
获得产品和技术
讨论
作者简介  | 
| | 杨天娥目前工作于 IBM Mashup Center 部门，主要从事 Lotus Mashups 产品的功能性测试。 |
| 
| | 沈锐目前工作于 IBM Mashup Center 部门，主要从事 Lotus Mashups 产品的功能性测试。 |
对本文的评价
| 
