构建桌面和 Web 图形显示

ILOG, Inc.

2.20/5 (8投票s)

2008 年 7 月 28 日

CPOL

14分钟阅读

45896

软件开发人员知道，用户界面的开发时间往往比最初计划的要长。这篇白皮书介绍了快速创建和交付可在桌面和 Ajax 增强的浏览器上运行的图形丰富用户界面的方法。

引言

我们经常听到来自 CIO 的矛盾意见。有人说一切都与中间件有关，意味着集成、业务逻辑和 Web 服务。另一些人则坚持认为功能性已经过时，这意味着最终用户不太关心程序如何工作，而更关心其易用性、生产力和可靠性。丰富的图形用户界面 (GUI) 技术完全属于第二类。它们使开发人员能够创建用户友好的界面，并以高度可视化和交互的方式实现复杂的操作。对软件工程师的潜在信息是，他们应该专注于功能如何呈现给最终用户，而不是创建没人想用的复杂且笨拙的程序。

然而，工程界普遍知道，界面的开发时间总是比最初计划的长。此外，当应用程序必须在不同平台上交付时，问题就更加普遍了。一个常见的例子是必须同时在桌面计算机和 Web 上运行的应用程序。如何解决这个问题？开发人员是否应该编写两个不同的应用程序，使用完全不同的工具和技术？应用程序的两个版本之间是否有可以共享的内容来节省开发和维护时间？本文介绍了快速创建和交付适用于任何给定平台的正确丰富界面的方法。

当我们查看用户界面时，通常会在交互式表单和图形显示之间做出明确区分。表单被所有开发环境很好地覆盖，主要是因为菜单、按钮、文本字段和其他 GUI 小部件在平台上得到原生支持。对于丰富的图形显示，情况并非如此，因为平台仅提供低级应用程序编程接口 (API)，其中包含绘图例程和基本事件处理。这就是为什么会创建开源和商业软件包，为开发人员提供具体服务和适当的抽象级别，以便向用户提供可视化服务。

正确的显示类型

用户界面用于显示信息或输入数据。在人类因素专家或对市场上类似应用程序的研究的帮助下，开发团队可以确定哪种类型的视觉表示最适合他们的应用程序。他们还可以决定通过创建不同的创新界面来创建与数据交互的新方式。无论如何，应用程序都需要包含明确定义的显示。以下各节描述了一些常用的图形表示。

特定视觉标准 – 专用的外观和感觉对于帮助用户舒适地操作数据很重要。例如，图表需要符合统一建模语言 (UML) 或业务流程建模符号 (BPMN) 标准，并包含非常精确的实体、图标、链接和注释。这对于网络显示尤其重要，因为网络显示需要标准的图标、装饰和颜色方案来帮助管理人员理解和操作其基础设施。
编辑功能 – 图表用于可视化和建模目的。两者都需要不同的服务，并且编辑器和建模器应提供调色板、创建工具、连接服务以及将视觉信息与应用程序底层业务对象同步的方法。
自动创建图表的能力 – 在大多数情况下，图表的结构是从提供纯符号信息的存储库中提取的。界面需要创建图形实体并执行自动放置，以使信息可读、可理解且与最终用户相关。这部分需要复杂的布局算法来显示实体和连接。
动态行为 – 图表不是静态的。它们用于浏览系统，并且需要与它们所代表的底层对象动态同步。当它们用于显示系统状态时，业务对象中的更改应由图形界面反映出来。

图 1：带有专业元素和自动分层布局的网络拓扑

Charts

图表在监控操作和分析各种业务数据方面非常受欢迎。每当我们有一系列静态或实时数据时，图表就是可视化信息的明显方式。图表需要以下服务

以最少的数据转换显示相关信息 – 图表范围从非常简单的 X/Y 版本到复杂的树状图、时间表、甘特图、极坐标和雷达图以及 2D 和 3D 图表。需要这种广泛的范围来以最少的数据转换准确地表示数据。
性能 – 在显示大型系列、长期历史值或快速事件时，性能变得很重要。
可定制性 – 最终用户通常希望在运行时调整图表参数。这些参数可以包括轴、图表类型、颜色方案和图例。此外，他们的偏好应该保存以供将来使用。

图 2：典型的图表示例：股票图表、2D/3D 条形图和饼图以及树状图

仪表板和监控面板

在需要现实或符号显示来检测和解决问题的业务场景中，仪表板和监控面板很重要。在商业智能领域，这些显示通常被称为业务仪表板。它们有助于运营人员概览业务流程的关键绩效指标 (KPI)。KPI 通常以简单的图形对象（如仪表和图表）显示，以便最终用户更容易理解它们。在后端，业务仪表板可以连接到提供吞吐量、质量和性能指标的各种系统。理想情况下，管理人员会与仪表板进行交互以获取更多信息或即时调整资源。

图 3：现实仪表板

工业领域的用户将这些显示称为工业示意图和过程控制或监控控制和数据采集 (SCADA) 应用程序。这些应用程序用于显示物理设备（如机器、储罐、生产流程和输送管道）的当前状态。例如，背景图可以由楼层平面图或从 CAD 工具导入的图纸创建。图形对象——仪表、刻度盘、测量仪、状态对象等——覆盖在背景之上，以显示来自物理设备的信息。这种类型的显示需要连接实时数据存储库和仪表板上的图形对象。

这些显示需要包括以下服务

模仿现实的能力 – 面板和仪表板应能够以适当且美观的方式显示信息。对于业务用户来说，图形质量是必须的，而工业用户需要能够正确模仿工厂、车间或流程的能力。
可扩展性 – 系统应该是可扩展且通用的，足以适应在不修改应用程序的情况下设计、存储和部署的新面板或仪表板。
灵活的数据绑定 – 在这种情况下，被监控的系统与向用户显示信息的方式之间存在清晰的分离。两部分之间的链接必须依赖于灵活的数据连接，该连接足够通用，可以使系统可扩展。

地图显示

由于 GPS 系统以及 Google Maps、Google Earth 和 Microsoft VirtualEarth 的流行，地图显示变得越来越普遍。在商业中，地图对于显示和管理物流、公路和航空交通系统、国防应用和网络管理中的各种地理参考资产非常有用。所有这些的共同点是将符号放置在自定义地图之上，并将其与特定领域的数据或系统计算出的信息同步。地图显示必须

显示地图 – 免费在线工具给人的印象是地图广泛可用、便宜且易于集成。这是完全错误的。好的地图价格昂贵，且重新分发的权利受到严格限制。像样的廉价地图仅适用于低精度数据和少数国家，例如美国。
处理地图大小 – 地图查看器允许用户查看大区域并放大以获取更多细节。但对于通常非常大的卫星图像和地图，必须提供一种方法来管理它们的大小而不牺牲细节。
数字地图的科学和行业——数字地图有标准实践，包括坐标系、投影、地图格式、标注和地理编码（将街道地址转换为经度和纬度坐标）。开发人员必须应用这些标准，同时将数字地图背后的复杂性隐藏起来，以便最终用户只能看到他们需要的信息。

图 4：用于网络管理（左）和同步 2D 和 3D 地图（右）的地图示例

定位正确的平台

确定可视化显示组合后，第二步是考虑开发技术和部署选项。某些应用程序只需要在一种客户端类型上运行，例如桌面计算机或 Web 环境。但是，将同一应用程序作为丰富客户端提供给高级用户，并通过 Web 提供给远程用户的情况越来越普遍。另一种常见情况是桌面应用程序变得如此流行，以至于必须创建 Web 版本来支持更广泛的用户群体。在这两种情况下，都要预见到并考虑涵盖多个平台和部署选项的环境至关重要。如果 Java 平台是当今可移植的丰富应用程序和 Web 应用程序的最佳选择，那么双重支持需要更深入的分析。例如，Eclipse Rich Client Platform (RCP) 提供了一个非常好的框架，用于使用 SWT、GEF 和其他图形层编写丰富的桌面应用程序，并且有 Eclipse ATF 等工具用于构建 Web/Ajax 客户端。但是，双重桌面和 Web 部署仍然需要两个不同的代码库，而 Applet 几乎不可能实现，而且绝对不推荐。

其他给开发人员带来压力的因素是 Ajax、Rich Internet Application (RIA) 和 Web 2.0（互联网的下一代）。它们的需求正在迅速增长，因为它们使流行网站能够提供类似桌面的性能。

图 5：同一个应用程序处理同一个业务流程图；部署为丰富客户端（左）和 Web/Ajax 界面（右）

定义符号

大多数界面的起点是符号，这是一组定义要操作的图形实体的外观和感觉的符号。符号是独立的图形对象，代表底层应用程序中的物理或概念元素。例如，符号可以代表卡车、工厂、网络元素、刻度盘或仪表。它们具有内置行为和公开的接口，例如图形 JavaBean、小部件或控件。ILOG JViews 8.1 提供了 Symbol Editor，这是一个交互式编辑器，用于创建、编辑和组织填充用户界面的智能符号。它提供图形编辑功能，并与 Adobe Illustrator 和 Inkscape 等创作工具互操作，以确保符号的视觉元素尽可能吸引人。然后，它通过描述符号元素如何响应数据更改的规则，为这些静态图形添加动态。例如，规则可以定义导致工厂符号的一部分闪烁的警报条件，或者旋转仪表上的指针会旋转多远。然后，新创建的符号可以组织在调色板中，供其他设计工具重用。

图 6：将 SVG 在 Inkscape 中创建的图形（左）转换为活动符号（右）

符号及其行为不是用代码定义的。它们的定义在级联样式表 (CSS) 中提供，该样式表指定要使用的 JavaBean、它们的设置和逻辑。下面的代码片段说明了一种可以使用 CSS 等效项替换 Java 代码的情况。而不是用代码创建指针（图形对象是折线），交互式设计工具可以跟踪 JavaBean 的配置，并以以下形式使其持久化

模型驱动的界面

ILOG JViews Diagrammer 的 Designer 是一个交互式编辑器，用于指定图表的不同方面。它用于定义必须自动从数据源创建图表的应用程序（例如业务流程、网络拓扑、工作流、数据流或实体关系图）的外观和感觉。它通过将数据源元素与 Symbol Editor 创建的图形符号绑定来创建显示。例如，可以指定给定类型的数据实例应由给定符号表示，并且字段的特定值应输入一些符号参数以改变其外观。视觉元素如何被数据模型控制的规范是在高级别完成的，因为符号已经包含了它们特定的视觉逻辑。显示的其他方面，例如自动图形布局选项、链接的外观、背景图像、子图的外观以及缩放策略，也可以进行调整。

关于符号定义，数据模型与视觉实体之间的关联可以用 CSS 指令来描述。

例如，下面是一个图表使用的节点的通用 CSS 定义

下面的示例说明了一个 CSS 指令，该指令指定当实例的 state 字段等于 busy 时使用的默认节点

最终结果由描述性的 CSS 和 XML 文件组成，可以在运行时加载到应用程序中。然后，引擎能够匹配指定的数据源并应用 CSS 中定义的逻辑。项目中的各个元素可以通过专用的 Java 类进行访问，从而可以进一步自定义显示的外观或行为。对于丰富的桌面客户端，容器是 Swing 组件；对于 Web 客户端，是 JSP/JSF 服务器端组件；对于 Eclipse，是 SWT 组件。

构建监控面板

ILOG JViews 8.1 中的第三个设计工具是 Dashboard Editor，这是一个用于创建工业面板、业务仪表板和其他通用人机界面的界面。它允许用户在静态背景之上手动放置使用 Symbol Editor 创建的符号。符号参数可以在设计时通过传统的松耦合技术与应用程序数据相关联。例如，可以指定仪表的值链接到应用程序变量或数据库中的给定字段。这种关联在运行时连接到实际数据源时解析。

图 7：编辑不同类型的监控显示：业务（左）和工业监控（右）

生成的仪表板或示意图是一个 XML 文件，与符号调色板相关联，这些符号可以加载到应用程序的一个窗口中，然后用实时数据填充。同样，为了与最终应用程序集成，丰富的桌面客户端使用 Swing 容器；Web/Ajax 客户端使用 JSP/JSF 服务器端组件；Eclipse 使用 SWT 组件。

结论

通过泛化常用的软件组件方法并系统地添加设计工具和描述性内容，ILOG JViews 8.1 产品解决了大量的可视化需求和多目标部署。随着开发链中更精确的角色分配，也带来了新的视角。例如，可以通过创建无需修改代码库即可动态加载的新内容来丰富应用程序。另一个有趣的方面是能够将图形内容（例如视觉符号或外观定义）从一个应用程序重用到另一个应用程序，而与代码无关。最终，开发人员可以更自由地构建和交付最终用户喜欢使用的交互式应用程序。