【IT168 技术文档】
前言 ： IBM WebSphere Dashboard Framework 是 IBM Lotus 产品线中的一款快速创建企业仪表板的工具，利用该工具开发人员可以不用编写代码或者仅编写简单代码即可完成各种类型的仪表盘应用的开发，包括高精度的图表（如柱图、饼图、曲线图等）和地图应用，此外还可开发统一警示提醒应用、团队日历应用等，帮助提高应用对协作能力的支持。本文介绍了利用 IBM WebSphere Dashboard Framework创建一个简单实用的地图仪表板的例子，几乎不用编写一行代码即可实现有一定下钻功能的地图仪表板，直观地展示企业业务绩效数据。阅读此文最好具有一定的 WebSphere Portlet Factory 的知识。

    在给某些企业特别是与生产销售相关的全国性或者世界性大企业做项目时，我们常常遇到这样的需求：高层领导希望一目了然非常直观地看到分布在各个地区的生产销售的大致情况，并且能够在需要的时候下钻看到详细数据。此时可以建议客户利用 IBM WebSphere Dashboard Framework 工具按领导需求快速创建地图仪表盘应用。下面就以一个简单的地图仪表板应用为例介绍。创建地图仪表板应用要用到Dashboard 里面的两个工具： 
   
1． Dashboard Framework ： 

    Dashboard Framework 是一款基于 Eclipse 的插件工具，可以安装在 Eclipse 或者 RAD 之上，用于快速开发仪表板应用。 
   
2． WebChart 3D ： 

    利用 WebChart 3D 中的 Map Editor，可以从.jpg或者.gif 地图图片文件制作地图定义文件 .xml.。 购买 WebSphere Dashboard Framework 后，您会收到 GreenPoint WebCharts3D Designer 许可证，这允许您创建自己的图表样式或修改随产品一起提供的图表样式。您可以从以下网址获得该工具：
    http://www.webcharts3d.com/website/WebCharts50/download/index.jsp ，然后输入包含在<you_project_dir>\solutions\dashboard\Readme_dashboards.txt 文件中的GREENPOINT WEBCHARTS3D DESIGNER 许可证密钥对工具进行注册。
一、前期地图数据准备
1．从互联网上查找您所需要的地图原样，如下图是从互联网上下载回来的湖北省的行政图。

2． 利用 Photoshop 或者其他制图软件，将第一步下载回来的图片去掉区域颜色、名称标注等信息仅留下边缘信息。

3． 利用 Map Editor 制作出 XML 格式的地图定义文件，文件后缀为 .map
（1）．启动 Map Editor，点击“Load Image”图标（如下图红色标记圈内的图标），从相应位置中选择第二步中获得的边缘图（格式可以是 GIF，JPEG，PNG），点击“Accept”按钮，然后右侧空白面板中单击鼠标载入 Map Editor 中

（2）．对载入到 Map Editor 中的地图进行边缘提取，右键单机图片区域，选择菜单 “Build Image Outline”，得出描述图形的各个XML 元素，然后按照需要对各个XML元素进行分组，如对下面的湖北地图，地域边缘分界线勾勒出的最小单位是县级。 如果需要的仅是在地市级别进行的划分，可以利用 group 功能将多个区域（县）组成一组（市）。Group 功能在面板的左边，选中多个区域然后右键单击选中“group”菜单就可以了。

    此时，在 Map Editor在中左下部打开 Xml tab 可以看到如下所示的xml 地图数据 （由于数据较大, 用……替代了大部分数据）。由于地图仪表板展示时仅需要勾勒的边缘数据，原图像数据不被用到，所以可以将蓝色部分从<imageMap> 到</imageMap>的内容删掉。
<?xml version="1.0" encoding="UTF-8"?>
<map name="Map">
<imageMap>
<imageDef width="984" height="624" image="A3gB7J0HnGRZVf9v5V3dV…. "/>
</imageMap>
<item name="Cities">
<item name="Xianning">
<area points="820@556,822@556,822@557,......"/>
</item>
<item name="Huangshi">
<area points="928@544,930@544,930@545,931@545,......"/>
</item>
<item name="Jingzhou">
<area points="585@512,590@512,590@513,591@513,...... "/>
</item>
<item name="Xiantao">
<area points="698@524,701@524,701@525,702@525,......"/>
</item>
<item name="Tianmen">
<area points="744@465,746@465,746@467,......"/>
</item>
……
</item>
</map>

二、用 Dashboard Framework 构建地图仪表板应用

    为了试验方便起见，我们将数据存于一个 Excel 表中，其中有两个 Sheet，一个sheet存放某公司在全国各个省分的销售数据，另外一个sheet 存放该公司在各个地市的销售数据。设计的场景如下：公司领导通过全国地图仪表板的应用首先看到的是全国的销售业绩大致情况，用不同的颜色标注各省的销售情况（如销售业绩较好用红色，业绩不好用黄色，业绩一般用紫色），领导可以移动鼠标到某省，地图仪表板会浮动显示该省的具体数据，点击鼠标则可以转至该省的业务数据仪表板，看到各个该省所属各个地市的销售情况。 

    有了上面的可以绘制地图的 xml 文件和相应的销售示例数据后，我们可以开始创建仪表板应用了，具体步骤如下： 

    1. 新建一个 WebSphere Portlet Factory 项目，可按Java 命名规则取名，如取名为MapSample。由于我们采用的数据是 Excel 格式的，在创建项目的“添加功能部件集(Add Features Set)”向导中为项目添加集成 Excel 的特征库 (选中“集成扩展”－>“Excel 扩展”) 和 Dashboard 特征库(选中“WebSphere Dashboard Framework” －> “Dashboard Framework”)，以便导入集成Excel 和创建仪表板需要用到的各个 .jar包。 

    2. 在MapSample 项目下，新建一个ServiceProvider Model, 用于从 Excel 中获取数据。按照设计的场景，共需要两次从 Excel 中提取数据，第一次是提取全国的销售数据，第二次提取选中的省分下属各市、地区的销售数据。因此，在这个 Model 中，我们定义两个”服务操作”(Service Operation), 每个服务操作对应到一种情况的数据提取。 

    如下图所示，在这个 Model 中总共加入5个构建器：2个服务操作构建器，2个增强的 Excel 导入构建器，1个服务定义构建器。需要注意的是，对于提取地市数据的服务操作getDetailData和增强的 Excel 导入构建器detailDetail，由于要按选中的省分查询销售数据，所以应该设定有输入参数和启用“生成 GetRowByValue 方法”： 

    a. getDetailData的“构建器调用编辑”页面中展开“服务操作属性”，要调用的操作选为 “DataServices/detaildata/getRowByColValue” 而非常用的调出所有数据的“…./execute”；“操作输入”， “输入结构处理”项选择“使用所调用操作的结构”，“输入字段映射”选择“自动”； 

    b. detailDetail 的“构建器调用编辑”页面中，展开“详细信息支持”，勾上“生成 GetRowByValue 方法”，列名称选择表明地市所属省分的列如”C”

3. 在 MapSample 项目中，新建一个 Model （map.model）调用第2步中的 Model 中提供的方法，获取数据并以地图仪表板的形式直观展现各个省分和地区销售分布情况。在此 Model 中仅需要添加一个“服务消费者“（Service Consumer）构建器 和两个 “地图构建器”。 “服务消费者”构建器用来调用服务提供者中的服务来获得从 excel 中抽取出的数据，“地图构建器”一个用来显示全国地图，一个用来显示省分地图。为了使得显示省分的地图构建器能够自动根据中国地图上所选的省分调入对应的地图文件，另加了一个 String类型的“变量”（Varible）构建器用于存储地图文件的位置，一个“操作列表”（Action List）构建器用于根据所选则的省分设置地图文件的位置以及调用省分地图，一个 “方法”（Method）构建器用于编写地图文件存储位置的逻辑，方法内的逻辑代码体如下。   
{
String mapfile;
if(provinceName!=null)
mapfile ="/chartstyle/Dashboards/"+provinceName+".map";
else
mapfile="/chartstyle/Dashboards/Hubei.map";
webAppAccess.getVariables().setString("mapfile",mapfile);
}

三、运行该 model 应用，可以将应用部署到 WAS 上 （参见 WebSphere Portlet Factory 相关帮助），然后点击运行，我们可以看到以下页面，以彩色地图的形式展现了公司各地区的销售情况。

    将鼠标指到湖北省，可以看到浮动显示湖北省的销售数据，单击进入可以看到以下湖北省的各个地市

四、几点补充：

1．如果需要把该仪表板变成运行在门户上的 Portlet，可以通过简单的在map.model 中添加一个“Portlet 适配器”（Portlet Adapter）构建器即可.
2. 可以利用 WebSphere Dashboard Framework 里的其他构建器为仪表盘应用增加更多强大的功能，如 Portlet 之间的点击即动功能（常说的C2A）、多语言支持功能、数据过滤等等。


参考资料：
1． IBM developerWork 技术站点中Portlet Factory 相关内容shttp://www.ibm.com/developerworks/cn/views/websphere/articles.jsp?view_by=search&search_by=Portlet
2． Dashboard Framework 帮助文档
3． 红皮书《Building Composite, Role-Based Dashboards using WebSphere Dashboard Framework》http://www.redbooks.ibm.com/abstracts/redp4313.html?Open

作者简介：李晓辉，IBM 技术工程师，感兴趣领域为 J2EE 和门户技术。