用IBM WebShpere Dashboard Framework 创建图表

打印本页   将此页作为电子邮件发送

级别： 初级

聂 朝晖 (niezh@cn.ibm.com), 软件工程师, IBM
邬 东飞 (wudongf@cn.ibm.com), 软件工程师, IBM
戴 丽 (daili@cn.ibm.com), 软件工程师, IBM

2008 年 9 月 25 日

本文将详细地介绍如何使用 IBM WebSphere Dashboard Framework 创建基于图表的 Dashboard 应用。

关于本文

Dashboard 作为一种信息展现的方式，已经引起人们越来越广泛的关注。与传统的通过表格展示数据相比，Dashboard 的一个很重要的特点就是它通过丰富的图表形象地展示信息。图 1 是 IBM workplace Executive Dashboard 的一个例子：

图 1. Dashboard 示例

在这篇文章里，我将详细地介绍如何使用 WebSphere Dashboard Framework 创建基于图表的 Dashboard 应用：

1. 关于 GreenPoint WebChart3D。Websphere Dashboard Framework 的图表功能是建立在 WebChart3D 的基础之上的，它可以创建有各种不同风格的图表，包括 Map、Radar、Dial、Pie 等等。这里我们将详细介绍 WebChart3D 中图表的样式定义，数据模型的定义，等等。
   
2. 关于 Web - Charts Enhanced Builder。 Web - Charts Enhanced Builder 是 Websphere Dashboard Framework 用于创建基于图表的 Portlet 应用的控件，在这一章里，我们将详细介绍它的使用，以及如何通过它定制不同样式的图表。
   
3. 关于 Chart 的定制。很多时候我们需要定制图表的一些属性，比如宽度和高度，图形类型的切换（条状图，饼，柱状图）等等。在这里我们将延伸开去，介绍如何在 Builder UI 上提供这些定制功能。
   
4. 关于 WebSphere Dashboard Framework 中的其他一些能够创建图表的构建器的介绍。
   

术语

构建器（Builder）：构建器为 WebSphere Dashboard Framework 中的可复用组件，可以根据调用它的上下文生成 Java 和 JSP 代码。构建器能将按钮添加至 JSP 页面，将表单中的所有字段链接到 XML 变量，或者帮助您创建和使用 Web service 等等。构建器可以认为是动态编写代码的“虚拟程序”。它可以在不同的情况下或基于不同的概要文件生成不同的运行时代码。

模型（Model）：在 WebSphere Dashboard Framework 中的模型可视为构建器的容器，用来存储构建器调用的有序列表。

预备知识

本文需要读者对 IBM WebSphere Dashboard Framework 以及 IBM WebSphere Portlet Factory 有一定的了解 , 对其中的一些概念比如构建器和模型有基本的认识，并且可以利用它创建一些简单的应用。

WebCharts3D 简介

WebCharts3D 是一个非常强大的图表设计工具，利用它用户可以根据自己的需要创建各种形式丰富的图表，诸如 Bar( 饼图 )，Pie( 柱状图 )，Gantt( 甘特图 ) 以及 Map( 地图 ) 等等。并且这些图形可以被导出为 XML 格式的文件，以方便在其他工具中使用。比如 WebSphere Dashboard Framework 中的 WebCharts 构建器便是使用这些图表的模型文件作为其创建图形的模版。

本文我们将以一个简单的饼图为例来介绍如何在 WebChart3D Designer 中创建一个 WebCharts 图表（如图 2 所示）。然后以此图表模型为基础，介绍如何使用 WebSphere Dashboard Framework 中的 WebCharts 构建器来创建具有图表功能的 Portlet 应用。

图 2. WebCharts 图表

在 WebCharts 3D Designer 中 , 选择 File -> New，打开 WebCharts 3D 的模板页面。在这个页面中可以为将要创建的图表选择相应的模板，WebCharts 3D 为用户提供了非常丰富的图形模板，选择正确的模板可以减少你在后面图表的定制过程中的工作量，这里我们选择 Pie Chart 作为我们要创建图表的模板，如图 3 所示。

图 3. WebCharts 模板

接下来就可以在设计页面中定制你所需要的图表属性了，下面是图表的设计界面。“Xml Style”和“Xml Model”分别提供了图表的样式模型和数据模型的视图，而“Code View”可以让用户把当前的图表生成可以用于不同平台的脚本，比如 JSP, Applet, Swing, AWT 等等。

图 4. WebChats3D 图形定制界面

下面我们就在 图 4 的定制界面中修改图形的显示样式。

1. 修改图表的风格为“Solid”，选择Style. > Solid。
2. 为图表添加一组数据。缺省的图表中提供了 5 组数据，如图中的 5 种颜色所示。这里，我们添加一组新的数据并用不同的颜色来显示。

   选择 Elements > Series 将弹出对话框供用户来添加新的数据块，在这个界面中用户可以设置每一个数据块的显示属性，设置完以后并将其添加到当前的数据列表中。

   
   
   图 5. 添加数据模块
   
   
   

   添加了如上图所示的扩展后，该图表便具有了显示 6 组数据的功能了。为验证其效果，切换到 Xml Model 页面。缺省情况下，WebCharts 3D 提供了 5 条示例数据。用户可以添加一条新的数据，点击“Insert Column”将新增一条数据。

   
   
   图 6. 添加一列数据
   
   
   

   设置好数据的标识和数值后返回到设计页面可以看到新加的数据已经显示在图中了，如 图 7 中的蓝色数据块所示。

   
   
   图 7. 扩展后的饼图
   
   
   
3. 设置图形的显示风格：选择 Paint > Palette > Pastel。

   这里我们只是作为一个简单的示例，设计界面中还有很多的属性可以让用户来定制。在定制完图表的显示样式后，在 Xml Style. 页面中用户可以看到该模型的 Xml 内容。我们可以将它导出到 Xml 文件中以便在 WebSphere Dashboard Framework 中使用。

4. 设置图形的标注。

   选择 Legend > Decoration > Style. > Shadow。另外在 Legend 中选中“useMarkers”。其他的属性比如字体的大小，标注的位置等等，用户可以根据自己的需要进行设置。

WebCharts 构建器介绍

这一节我们将介绍如何利用 WebSphere Dashboard Framework 中的 WebCharts 构建器来创建具有图表功能的 Dashboard 应用。 IBM WebSphere Dashboard Framework 是在 IBM WebSphere Portlet Factory 基础上所做的扩展，主要提供一些有助于创建 Dashboard 应用的构建器，比如 Alert module, Annotation 以及对原有 WebCharts 构建器的增强。这一章我们将通过一个实际的例子来介绍 WebSphere Dashboard Framework 中的 WebCharts Enhanced 构建器的使用。

1. 创建 WebSphere Portlet Factory 项目

图 8. 创建 WebSphere Portlet Factory 项目

点击下一步，选择需要添加到项目中的 Feature。选择“Charting”->“GreenPoint Web Chart Builder”，如 图 9 所示。这样 WebCharts 构建器以及与该构建器有关的所有文件诸如依赖的 Java 包、模板文件以及一些图表的样式文件等都将被导入到项目中。如果用户需要其他的一些 Feature，可以选择这些 Feature 导入到项目中。对于本例子来说选择“GreenPoint Web Chart Builder”和“WebSphere Dashboard Framework”就可以了。

图 9. 添加 Feature Set

其余的步骤与创建一般的 Portlet Factory 项目过程一样，所以这里略过，用户可以参考 WebSphere Portlet Factory 的帮助文档。

2. 创建应用模型

创建模型，选择New > WebSphere Portlet Factory Model。这里我们省略了具体的创建步骤，方法可以参见 WebSphere Portlet Factory 帮助文档。

3. 添加 WebCharts Enhanced 构建器

模型创建完以后，在 Outline 视图 中点击 添加构建器 按钮打开 Builder Palette 窗口

图 10. Outline 视图

在 Builder Palette 中选择 Web Charts – Enhanced 构建器，将在模型中创建它的一个实例，如 图 11 所示。

图 11. 向模型中添加构建器

下面是 Web Charts – Enhanced 构建器的配置界面，它提供了一组供用户对该构建器进行定制的输入框，比如图表生成的位置，图表的样式，图表的数据来源等等。

首先，输入构建器的名称，作为该构建器在模型中的标识。然后在“Page Location”中选定图表生成的位置，这里我们选择在 page1 中的“namedTag”，如 图 12。（注：“page1”是模型中的一个 Import Page 构建器实例，用于向模型中添加 HTML 或 JSP 页面。在本例子中，我们以 page1 中的“namedTag“作为图表生成的位置）。关于 Page Location 的更多介绍请参见 WebSphere Portlet Factory 帮助文档。

图 12. 设定图表在 Web 页面中位置

接下来，我们将开始定制图表的两个主要属性：图表的显示样式和数据模型。

1. 显示样式

显示样式用于定制图形的形状，比如饼图，柱状图还是雷达图等。在缺省情况下，Web Charts - Enhanced 构建器为用户提供了一些标准的图表类型（点击“Chart Type”下拉列表框）。用户可以选择这些简单的图表使用，另外如果用户希望使用自己在 WebCharts 3D Designer 中创建的图表模型，Web Charts - Enhanced 构建器也提供了这一扩展功能。选择“Provide Custom Style”将会显示用户自定义样式的输入框（“Style. Data”），这里用户可以输入自己定制的一些图形样式，如图 11。

图 13. 设置图形的样式

在本文中，我们选择前一章中创建的图表样式 WebChartsDemo.xml 作为该构建器的图表模板。首先将 WebChartsDemo.xml 导入到项目的目录 WebContent/solutions/Dashboard/ 下。然后在 Style. Data 中选择该文件，如 图 14。

图 14. 选择图表的样式模型

2. 数据模型

数据模型用于定制该图表所要显示的数据内容。在“Chart Data”中输入图表的数据内容，点击右边的按钮选择数据的来源，数据可以通过模型中的一个变量或方法来得到。在本例子中，为方便演示，我们在模型中创建一个变量作为图表数据的来源，当然数据也可以来自其他地方，比如文件、数据库、Web Service 等等。首先在模型中添加一个“Variable”构建器的实例，在构建器的配置界面中选择该变量的类型为 XML，并在初始值中输入代表数据的 XML 内容，如 图 15 所示。

图 15. 创建数据变量

在 WebCharts Enhanced 构建器的“Chart data”输入框输入该变量作为图表的数据来源。

3. 图表的内容

完成了图表的样式和数据模型的设置以后，接下来就可以设置数据如何在图表中显示，比如 X 轴、Y 轴的数据等等。在“Data Source Format”中选择前面创建的变量的数据格式。一般情况下推荐使用第一种数据格式，因为在 WebSphere Dashboard Framework 中大部分和数据有关的构建器所生成的结果都以第一种方式来存储。

4. 图表的外部属性

在图表属性这一部分中，用户可以设置图表的标题，图形的类型，比如 PNG、JPD、SWF、SVG、WBMP 等等。另外还可以设置图形的大小、图形的标注以及是否显示为 3D 等等。如图 16 所示。

图 16. 设置图形的显示属性

5. 图表的事件响应

除了显示图形以外，Web Chart 构建器还提供了响应用户事件的功能，如图 17 所示。

图 15. 设置图形的事件响应

图 17. 设置图形的显示属性

这一部分用来设置如何响应在图形上的单击事件。如果用户希望在点击图形的时候做一些特殊的动作，比如跳转到一个表格以查看相应数据块的详细内容，可以在这里设置该事件。为此，用户需要先在模型中创建一个方法（使用 Method 构建器），然后在“Method to Call”属性中输入该 Method 并设置相应的参数。方法的创建可以参见帮助文档。

6. 设置数据的标注

通过设置数据的标注可以指定图形在显示数据的时候如何显示它的标注。比如位置，样式，是否允许多行显示以及对其添加什么样的装饰 ( 边框，形状等 )。在此例子中我们都选择这些属性的默认值。

部署应用

在“Outline”视图中可以看到该模型的所有构建器实例，如图 18 所示。

图 18. WebChartsDemo 模型

表 1 是对这些构建器的一个简单说明：

表 1 模型中各构建器的说明

名称	类型	功能
Main	Action List	模型运行的入口方法
Page1	Imported Page	模型运行的 HTML 页面
SampleData	Variable	数据变量，存储将要在图表中显示的数据
WebChartDemo	Web Charts – Enhanced	创建 WebChart 图表，并显示在 page1 的对应位置

运行该模型，将在 Web 页面中显示如下的图形

图 19. 测试页面

注：关于如何搭建测试和运行环境，请参见 WebSphere Portlet Facotry 相关文档。

其他构建器介绍

在 WebSphere Dashboard Framework 6.1 中还有一些构建器也能创建带有图表功能的 Portlet 应用，这些构建器都是建立在 WebCharts 构建器的基础上，但是更好地集成了企业的数据信息，方便用户创建一些比较高级的图表应用。比如 Summary Drill Down 构建器、Status Page 构建器和 Map 构建器。这些构建器都是通过调用 Web Chars 构建器来实现绘制图表的功能。

下面是一些用这些高级的构建器生成的图表样例，关于这些构建器的更详细的介绍请参考帮助文档。

Map 构建器

图 20. Map 构建器

Status Page 构建器

图 21. Status Page 构建器

结束语

我们希望通过这些介绍 , 以及对以往我们工作经验的共享 , 能够对其他 portlet 开发人员有所帮助。

参考资料

• WebSphere Portlet Factory 产品文档：获得 WebSphere Portlet Factory 的最新文档。
  
  
• Developing portlets using Eclipse and the WebSphere Portlet Factory：此教程说明了如何开发和部署符合 JSR 168 的 Portlet，以从数据库检索和显示数据。
  
  
• WebSphere Portlet Factory：概略了解 WebSphere Portlet Factory 产品的情况。
  
  
• WebSphere Dashboards Framework documentation：获得 WebSphere Dashboard framework 的最新文档。
  
  
• IBM WebSphere Dashboard Framework and WebSphere dashboards Library：获得 WebSphere Dashboard framework 的最新教程。
  
  
• WebSphere PortletFactory应用：获得 WebSphere Portlet Factory 的简介
  
  
• WebSphere Portal 专区：提供大量关于 WebSphere Portal 的技术资源

作者简介

		聂朝晖（niezh@cn.ibm.com），IBM 中国开发中心，现任职于 Lotus 部门。主要负责 WebSphere Dashboard Framework 的设计和开发。

		邬东飞（wudongf@cn.ibm.com），IBM 中国开发中心，现任职于 Lotus 部门。主要负责 WebSphere Dashboard Framework 的设计和开发。

		戴丽（daili@cn.ibm.com): IBM 全球服务部（GBS）,从事项目开发。曾经在 CDL 参加 Lotus Connections, WebSphere Dashboard Framework 等产品的开发。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14751907/viewspace-531828/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14751907/viewspace-531828/