如何建立高级JSF（Java Server Faces）图形组件

作者简介：Marc Durocher是ILOG的一名软件架构师，ILOG是一家企业级软件组件和服务提供商。Marc Durocher在ILOG负责开发ILOG JViews生产线上的JSF组件。他已在图形软件组件行业工作十多年，自2000年起一直在ILOG工作。可以通过mailto:mdurocher@ilog.fr联系Marc。

在前面的文章中，我们讨论了JFS（Java Server Faces）的基础知识。本月我们继续讲述设计一个高级JSF图形组件的基本步骤。

我们将使用图表（charting）组件的一个实例，如为一组类别提供数据值分配视觉表现的ILOG JSF图表组件。此图表可显示一个带各种表示法，如条形图、饼图、气泡图等图形的数据组。

JSF图表组件有两个基本的设计限制：

• 我们已经拥有一个Java图表bean组件，它具有我们所需要的所有图形表现功能。该组件可显示一系列的图表，并具有很强的定制性。理想上，我们希望利用此bean组件，并应用它的功能构成JSF组件的基础。
• 常用的JSF应用程序需要重新加载整个页面来更新视野。这种行为可能适用于以表单为基础的应用程序，但并不适于许多高度图形化的用户界面。因此，为提供更好的用户体验，要求JSF图表组件不用更新整个页面就能处理一些简单的导航。

为满足这些要求，我们建立了下面的解决方案：

• JSF图表组件将管理图表bean组件。这包括建立图表bean、定制bean以及使bean处理服务器端行为。
• 呈现JSF组件分为两个阶段：

。JSF呈现程序生成一个<IMG>标签与一组JavaScript对象（图1）。

。客户端向服务器请求一幅图像。这一过程通过恢复图表bean并应用由图表提供的方法生成一幅图像的servlet来完成。

• 任何只改变图表图像的进一步的用户交互（缩放、平移、改变样式表）只会引起图表图像的进一步的更新。如果客户端行为要求对图表图像进行多次更新，那么页面将会被提交（图3）。

下面的图示描述了这一解决方案的结构。

• 建立并初始化属性。
• 建立并定制图表，使其可处理服务器端行为。
• 呈现图表。

图1：JSF框架请求

图2：servlet获得图像请求

图3：页面请求或图像请求 

JSF图表组件还伴随一组其它的JSF组件：

• Overview：总览组件显示图表的总体视野，一个长方形代表实际的图表视野。此组件还允许用户平移视觉区域。
• Legend:说明组件展示被显示的数据组的相关信息。根据所显示的数据的类型，此说明也可显示在图表中。
• Interactors:客户端交互也提供诸如图表图像的平移与缩放功能。这些交互行为可看作是客户端的交互行为，意思是说，由于与图表的交互是常规JSF交互，不用加载整个页面。

为呈现图表组件，你只需应用chartView标签：

表A

<jvcf:chartView id="c" style="width:500px;height:300px" … />

此数据在HTML页面显示为一幅图像。该图像由一个响应HTTP请求的servlet建立，此HTTP请求包括各种参数，这些参数指定输出的图像，图像映射的生成，插入式说明的生成等等。之后生成的图像被插入客户端DOM中，页面被更新的唯一部分就是图像本身。

下面我们来看一看一个简单的定制JSF组件与高级图表组件之间的差异：

组件

JSF图表组件类非常像一个标准的组件，只是增加了一个图表属性，此属性可访问负责生成显示在HTML页面上的图像的图表bean。JSF组件可通过一个绑定在当前任务或处于当前任务的值来本地恢复这个图表bean。当JSF图表组件是一个应用程序的中心组件时，可选的JSF组件，如overview或legend组件，就可连接到中心图表来显示额外信息。

表B

<jvcf:chartZoomInteractor id="chartZoomInteractor"

XZoomAllowed="true"

YZoomAllowed="true" />

<jvcf:chartView id="chartView"

chart=”#”

servlet="demo.ImageMapServlet"

interactorId="chartZoomInteractor"

width="500"

height="300"

styleSheets="/data/line.css"

waitingImage="data/images/wait.gif"

imageFormat="PNG" />

<jvcf:chartOverview id="chartOverview"

style="height:100;width:150px"

viewId="chartView"

lineWidth="3"

lineColor="red" />

<jvcf:chartLegend id="legendView"

viewId="chartView"

width="400"

height="180"

layout="vertical"

waitingImage="data/images/wait.gif" />