背景

可视化编程发展

随着计算机快速应用与发展，计算机软件迅速普及到各行各业的各个领域，快速开发出满足客户需求的软件越来越迫切，然而随着软件应用逐步深入到行业业务的深层，随需而变的客户要求也变得越来越难以满足。古人曰：“工欲善其事，必先利其器”，基于传统的文本编程越来越不能应对这些挑战。功能强大的 IDE( 集成开发环境 ) 应运而生，强大的 IDE 提供了高效的可视化编程环境，不同的应用领域可视化编程环境提供的可视化程度也有所不同。有的提供了界面构造的可视化，而有的甚至提供了程序流控制的可视化编程，极大地增强了在对应的应用领域的业务开发能力，提高了应用领域信息化程度。

可视化 IF 条件逻辑编程需求

传统的可视化 IDE 的设计理念多为编程元素可视化，即将编程中的元素转化为多个小的可视化对象，然后开发支持可视化编辑器来编辑这些编程元素。在很多成熟的可视化编程 IDE 中，对于 IF/Else 表达逻辑采取了一种避重就轻的态度，因为 IF/Else 为程序流条件控制，并非直接的可视化编程元素，因此很多成熟的 IDE 都支持基于可视化元素的 IF 条件表达，而不能直接表达 IF/Else 逻辑。这种表达的不直接性造成了对于 IF/Else 条件逻辑 IDE 表现手法和传统程序员程序开发习惯的大相径庭，此外这种不直接性造成了可读性差、复用性差、维护困难、学习困难、存在潜在风险等诸多问题，这些问题在实际的开发应用中极为明显。随着成熟 IDE 大量投入使用，在实际应用中这种低效率的可视化矛盾愈发突出，使 IDE 实现对于这种 IF/Else 条件逻辑表达的可视化支持也变得日益迫切。

对于已经较为成熟的 IDE，如果直接修改和增加会带来较大的风险和难度，基于这几点考虑，需要寻求一种间接的方式来获得支持，使得成熟的 IDE 也能够较为容易的支持可视化的 IF/Else 逻辑表达的开发。根据已有的开发经验和设计理念，采用一个独立支持 VIE(Visual IF/Else) 编程的框架和已有的 IDE 相接合使用，可以降低开发难度和风险，提高开发效率。

回页首

VIE 解决方案

面临的问题

根据文献[1]（见 参考资源）中对于可视化编程的论述，本文认为对于一个可视化框架而言，一般需要解决两方面的问题，一方面在可视化方面，要提供一个足够满足需要的灵活的编辑器，进行高效便捷的展现和编辑可视化元素以及可视化元素之间的关系；另一方面要解决可视化编辑器背后的逻辑关系的对应，关于逻辑关系的一致性对应问题上，包括编辑器运行时的对应和系统编辑后的对应。对于编辑器运行时的对应问题，即在用户可视化的改变编辑器中图形元素的时候，这些操作包括拖拽、双击、移动、拉伸、连接等等，要灵活的响应这种处理逻辑和处理方式，保证对应的逻辑关系发生相应的改变。对于系统编辑后的对应问题，即要解决在 IDE 关闭后的逻辑关系保存，IDE 启动后的逻辑关系读取、生成程序的成功构建和生成程序按照设计的逻辑成功运行。

解决方案

本文论述的通用可视化 IF 条件表达语句编程框架需要和独立的 IDE 结合使用，因此在研究框架设计解决方案的时候必须以此为前提，面对上文提及的两方面问题，一般认为有两种手段。其一为，改变 IDE 系统内核，从而增加新的可视化元素类型和新的可视化元素类型后的新的逻辑元素，这种解决方案要在熟悉 IDE 系统内核的基础上，修改 IDE 代码来支持新元素类型的添加、编辑、删除、保存和读取工作，并能使得生成程序在生成和运行时刻能按照设计逻辑进行运行。

另一种解决方案是充分利用已有的可视化元素和元素逻辑，构造新的逻辑结构。这种思想基于重用已有逻辑的思想，避免了因为入新元素，导致 IDE 系统内核的大量新的逻辑的修改。除了降低了这种风险，使用这种重用的思想可以有效地构建一个通用的框架予以支持，并且可以重用框架的内容，降低开发难度提高开发效率；另一方面，充分利用框架可以复用很多通用框架的元素。

对比两种解决方案，本文采用第二种解决方案建立一个通用条件语句处理框架，依赖于该框架设计出整体的架构。通用框架叫做 VIE(Visual IF Else) 。

回页首

通用 VIE 框架设计

结构层次设计

根据分析可知，通用 VIE 框架一方面要提供核心处理逻辑的能力，并提供可视化编辑器，另一方面要提供良好的接口，可以快速的与其他系统相兼容。如图 1 所示，VIE 框架结构分为三个层次，核心层（VIE Core），桥接层（Bridge）和环境层（Environment）。

核心层为框架的主体部分，框架的复用和控制在本层完成。在 IDE 启动时刻，核心层需要调用桥层获得相应的表示逻辑；在编辑时刻，核心层解决可视化编辑器所提供的显示编辑等功能，并提供对于编辑的逻辑的表示，并调用或者通知桥层完成和具体的环境相关操作；在运行时刻，核心层上要调用桥层获得核心的表示逻辑，并把这种逻辑按照一定的方式进行转换调用，从而保证按照设计执行相应的逻辑。

桥层为框架和具体的 IDE 环境对接的部分，因此完成 VIE 框架与其他 IDE 系统对接需要实现该层。在 IDE 启动时刻，桥层要完成数据的读取，并把数据转化为新的逻辑数据，提供给核心层调用；在编辑时刻，桥层收到核心层的通知后把相应的逻辑转化为相应的 IDE 识别的逻辑元素进行保存；在 IDE 关闭时刻，桥层要完成将新的逻辑元素转化为 IDE 识别的元素按照 IDE 系统的方式进行保存；在程序生成时刻，桥层要完成生成资源的准备和识别，并打包生成程序；在运行时刻，桥层调用核心层来完成设计逻辑的运行。

环境层为一个虚拟层，不属于框架内容，是具体的 IDE 。

核心层为系统运行的抽象层，为框架的主体部分，VIE 框架在 IDE 编辑和运行时都运行于抽象层；桥层是抽象层和运行环境的接口层，在运行时刻和编译时刻等，桥层接受核心层的通知后，在环境层运行，执行相应的操作。

架构设计

VIE 的分层架构模型为图 2 所示，整个分层架构模型包括概念模型和实现模型两个部分。概念模型是对实现模型的抽象，实现模型是对概念模型的实现具象。概念模型主要为了满足 VIE 逻辑表达需要，因此概念模型属于抽象层的逻辑实现，不依赖于具体的 IDE，更具通用性。

实现模型是根据需要对于某个特定 IDE 予以概念模型的实现，实现模型充分利用 IDE 中对于已存在的可视化元素的支持来描述新的逻辑元素，这种表达和描述带有机械性的直接转换和翻译，对于具体的逻辑含义则由概念模型来进行描述和表达，因此实现模型提供基于具体 IDE 的有效阐述，从而提供给概念层进行调用转换。

概念层模型设计包括基本 VIE 面向对象设计、可视化编辑器设计、IDE 启动后的编辑器初始化设计、在 IDE 中的编辑操作设计、运行期的逻辑流处理设计以及在这些过程中与桥层交互等功能设计，对于概念层模型设计的品质属性包括复用性、维护性等设计要求。

基本 VIE 表达的面向对象设计

在 IF 条件语句中，任何一个表达 True/False 逻辑的状态的类为 VIECondition 的实现，多个 VIECondition 形成一个表达逻辑的集合，集合通过“与”，“或”来表达具体的逻辑状态。

任何独立执行的语句操作为一个独立的 VIEAction，在 IF 条件语句中，包括两个操作集合，即 True 条件下的操作集合和 False 条件下的操作集合，如果状态集合表达的逻辑状态为 True 则执行 True 操作集合，否则执行 False 操作集合。

根据以上论述，在 VIE 逻辑表达中，VIECondition 与 VIEAction 关系如下所示：

VIEConditionSets = {VIECondition0, VIECondition1, … , VIEConditionM, … , VIEConditionN}; 
FalseActionSets = {VIEAction0, VIEAction1, … , VIEActionM, … , VIEActionN}; 
TrueActionSets = {VIEAction0, VIEAction1, … , VIEActionM, … , VIEActionN};

VIEStatement 为一个操作集合，可以被有效的使用。

VIE 框架中处于核心地位的类为 VIECore，该类处理和管理条件状态集合，True 操作集合和 False 操作集合，并负责运行时刻逻辑关系的执行处理。

根据以上设计思路和研究结果，VIE 表达的面向对象设计如图 3 所示。考虑到设计的品质属性，设计采用了 Superivsor-Agent[1] 模式予以实现，保证了 VIEStatement 对于 VIECore 不存在依赖，同时保证了 VIECore 对于 VIEStatement 的控制，增强了 VIEStatement 的复用性和框架内部之间状态的可维护性。对于 VIECore 与桥接层及其他 VIE 框架外层之间的关系，采用观察者模式[2] 予以实现，增强了核心框架的稳定性同时，保证了对于外部访问的灵活性。

VIE 独立可视化编辑器设计

独立编辑器设计，要独立于具体的 IDE 开发环境，只依赖于框架的核心部分。另外 IDE 提供的编辑主要为对于 VIEAction、VIECondition、VIECore 和 VIEStatement 的编辑。编辑过程中与 VIE 框架之外部分的交互交由框架完成，从而保证了编辑器独立于具体的 IDE 和框架外部内容，保证了代码的稳定性。可视化编辑器的设计采用 JAVABean 方式予以实现，保证了编辑器的通用性和规范性，可以更好的和其他 IDE 相融和。可视化编辑器和 VIE 框架之间的关系如图 4 所示。

VIE 桥层设计

VIECoreImp 为桥层与 IDE 交互的核心接口，该接口和 VIECore 之间使用桥接模式 [2] 的组合方式进行组合，解耦核心层的 VIECore 与桥层的 VIECoreImp 之间关系，使得两者可以自由变化，提高了 VIE 框架设计的灵活性和独立性。

由于 VIECore 为 VIE 框架的核心类，VIE 框架的所有类都通过这个类进行调用桥接的实现，理论上桥接层也必须通过 VIECore 才能与核心层进行交互，针对这些特性，VIECore 应该设计为门面模式 [2] 。此外，基于 VIECoreImp 与 VIECore 之间利用桥接模式进行组合，VIECore 如果采用类来实现的话会存在灵活性差的缺点，为退化的桥接模式。考虑到核心层可能需要优化其核心功能，改善其性能等方面品质，退化模式不利于扩展，因此 VIECore 的设计还应该采用单例模式 [2] 和工厂模式 [2] 的结合体，可以创建出多个实例，并保证了灵活性，必要的情形下，还可以设计从外部文件读取扩展类，更高效的提高系统设计的灵活性。

在编辑时刻，ConditionPanel 和 StatementPanel 需要读取系统的默认数据元素类型和系统配置参数，VIEUI 提供了读取这些参数的接口。 ConditionPanel 和 StatementPanel 独立于 VIEUI，保证了可视化编辑器独立于具体的桥阶层和 IDE 系统。

VIECoreImp 为桥接层的核心，是 VIECore 的具体 IDE 的实现，对于桥阶层的数据可以有效地控制和调用。因此 VIECoreImp 与 VIEUI 之间采用工厂模式 [2] 进行设计，VIECoreImp 实现对于 VIEUI 的创建。 ConditionPanel 和 StatementPanel 对 VIEUI 的调用来自于 VIECoreCustomerizer，VIECoreCustomerizer 通过门面模式的 VIECore 调用桥层的核心实现 VIECoreImp，VIECoreImp 创建出 VIEUI 的实例。

此外对于 VIEAction 和 VIECondition，在桥层都需要予以实现，ConcreteVIEAction 和 ConcreteVIECondition 。 ConcreteVIECoreImp 类完成对 ConcreteVIEAction 和 ConcreteVIECondition 调用和创建。

VIE 框架整体设计如图 5 所示。

如图 6 所示为 VIE 框架的概念模型架构，VIE 框架的概念模型架构设计核心目标是在满足准确表达 VIE 表达式结果的前提下，建立一个独立于任何 IDE 的架构。因此，VIE 概念模型架构的设计集中于 VIE 关系的具体表达和跟桥层交互的解耦设计上，使得 VIE 框架一方面独立于任何 IDE，另一方面又可以直接有效的和具体的 IDE 灵活交互。

回页首

基于 ISMP 的框架应用实现

ISMP 简介

ISMP(InstallShield MultiPlatform) 是一款强大的跨操作系统平台向导平台，提供包括产品安装、系统环境更新、系统配置等多个应用领域，应用领域广，提供的开发工具包功能强大，提供了多种多样的 API 和类包，并且 ISMP 自身附带一个功能丰富的可视化 IDE，对于一些简单的应用，甚至于不用开发代码即可完成，全球有无数应用程序应用 ISMP 作为向导安装、部署、配置。

基于 ISMP 的 VIE 实现层模型设计

实现模型的实现主要集中于桥层的实现，ISMPVIECoreImp 的设计采用接口适配器模式 [2] 来实现，ISMPVIECoreImp 一方面实现 VIECoreImp 接口，准备好上层的调用；另一方面继承自 ISMP 的 WizardAction 实现具体的和 IDE 有关的过程实现。ISMPVIECoreImp 是实现模型的关键部分，要完成在 IDE 系统启动、编辑器编辑、生成程序生成、生成程序运行等时刻 VIE 框架和 ISMP 之间交互的桥接。

对于 ISMPVIECondition 和 ISMPVIEAction 的实现采用对象适配器模式 [2] 来实现。以 ISMPVIECondition 的实现为例，通过首先实现 VIECondition 接口，同时引用 WizardBeanCondition 类。这样满足面向对象的初衷，一方面，保证了可以复用 ISMP 中的 WizardBeanCondition 和 WizardAction；另一方面，保证了重用的 WizardBeanCondition 和 WizardAction 可以和 VIE 概念模型设计无缝相融和，不至于修改 VIE 框架概念层内核。

回页首

基于 ISMP 实现模型的 VIE 框架

使用 ISMP 5.0 和 Eclipse 3.2 按照 ISMP 的实现模型开发 VIE 框架，充分重用 WizardBeanCondition/WizardAction/WizardSequence 等已有框架编程元素来表示 VIE 框架中描述的新元素类型，按照 ISMP 实现模型的设计，ISMP 实现模型的核心实现 ISMPVIECoreImp 采用接口适配器模式实现，因此对于 ISMP 的 IDE 而言 ISMPVIECoreImp 为 WizardAction，使用方式和普通 WizardAction 一样。

为了在 ISMP 中使用 VIE 框架，需要把 ISMP 实现模型的 VIE 框架所有的进行程序编译，然后放到 %ISMP_Root%/lib 中，最后在 IDE 中注册 ISMPVIECoreImp，保证在 IDE 添加 WizardAction 时候的正常使用。

在 ISMP 中的 installer 页中，点击“ Insert …”按钮，添加 WizardBean，在弹出对话框中选择 ISMPVIECoreImp，点击 OK 完成添加，然后在 installer 页左边的树目录中选中该 Action，则在构建的可视化编辑器界面，如图 8 所示。

利用可视化 IDE 提供的编辑功能可快速添加新的 VIECondition 到状态条件中了，添加的 Condition 为复用已有的 WizardBeanCondition，在 TrueStatement 和 FalseStatement 中选择添加 VIEAction，则添加复用的 WizardBeanAction 。

按照图 9 描述添加几个 Condition，True 状态下的 Action 和 False 状态下的 Action，并为这几个 Action 提供了可编辑的编辑器。图 10 所示的为这些 Condition 和 Action 的功能描述，首先判断系统是否为 windows，然后判断 c:\temp\DWE.flag 是否存在；条件都满足情况下执行 True 条件下的 Action，即读取 c:\temp\DWE.flag 中的版本信息；如果条件不满足则执行 False 条件下的 Action，即弹出校验失败的对话框。

完成编辑后，保存工程，执行程序生成，生成可执行程序文件包，在 Windows 平台上执行生成程序，系统 c:\temp\DWE.flag 存在的情况下，执行结果如图 11 所示，取得文件中数据；当系统中 c:\temp\DWE.flag 不存在的情况下，执行程序，结果如图 12 所示，弹出对话框提示交验失败。

回页首

结论

本文探讨了基于可视化通用框架的设计和实施的思路与方法论，根据需要可以拓展到其它可视化编程的领域，因此对于可视化通用框架的设计和编程思路不应该局限于 VIE 的实现模型开发和编程应用。

回页首

参考文献

• [1] P. C. Brown，满足图形化需求的可视化 DV–Centro 框架设计,Satisfying the Graphical Requirements of Visual Languages in the DV–Centro Framework, Proc. 13th IEEE Symposium on Visual Languages, Capri, Italy, Sep. 23–26, 1997, pp84–91。
• [2] E. Gamma et.al., 设计模式-面向对象软件可复用元素, Design Patterns - Elements of Reusable Object-Oriented Software, Addison Wesley, 1995。
• [3] Xinxin Bai, Minghua Zhu, Longjun Cai, 面向特定行业的策略分析服务数据模型, Data Model Design of Strategic Analysis Services for Specific Customer Oriented Industries。
• [4] Da–Qian Zhang Kang Zhang, 通用可视化编程环境设计, On the design of a generic visual programming environment。

作者简介

为本文评分

评论

回页首

内容

• 背景
• VIE 解决方案
• 通用 VIE 框架设计
• 基于 ISMP 的框架应用实现
• 基于 ISMP 实现模型的 VIE 框架
• 结论
• 参考文献
• 作者简介
• 建议