基于组件的软件可视化编程方法研究
韩仲明 李晓明 李俊杰
摘 要：近年来，可视化编程在许多非计算机领域得到广泛的应用，但基本上属于编程语句和结构的图形化表述。本文提出了一种基于组件的软件可视化编程方法，将图标与连线组成的图形映射为软件组件模块及其相互之间的数据交互，并基于该思想，对应用软件、组件、通讯等进行可视化建模;基于XML技术，设计了可视化程序的描述文档;基于Eclipse/GEF图形编辑框架，实现了可视化编程开发平台、组件的图形化管理等功能。最后，通过具体的测试用例，证明了所开发的可视化编程平台，以及该可视化方法具有较好的可行性和通用性。
关键词：组件;可视化编程;Eclipse/GEF;图形化
中图分类号：TP311.11 文献标识码：A
文章编号：2096-1472（2021）-09-02-06
Abstract：
In recent years， visual programming has been widely used in many non-computer fields， but it is basically a graphical representation of programming sentences and structures. This paper proposes a component-based software visual programming method， which maps the graphics composed of icons and wires into software component modules and their mutual data interaction. Based on this idea， visual modeling of application software， components， and communications is performed， and description document of the visual program is designed based on XML（Extensible Markup Language）technology. Based on the Eclipse/GEF （Graphical Editing Framework）， functions such as a visual programming development platform and graphical management of components are realized. Finally， through specific test cases， it is proved that the developed visual programming platform and the visualization method have good feasibility and versatility.
Keywords：
components; visual programming; Eclipse/GEF; graphical
1 引言（Introduction）
可視化编程是一种所见即所得的程序描述方式，它将底层代码封装成更易理解和阅读的图形化方式，以直观的形式展示程序的功能。其主要的操作是鼠标拖放相应的编程单元，通过定义的管道连线各个单元，实现单元的数据通信，而不是依赖键盘进行程序指令的输入表达。相比于传统计算机编程语言学习难度大、程序后期维护困难[1]等特点，可视化编程使得领域开发人员只需关注领域内知识，而不需要掌握程序内部的程序细节。因此，可视化技术迅速发展，并逐渐推广到虚拟仪器[2]、建筑设计[3]、编程教育[4]、电力系统[5]等领域。
目前可视化编程应用较为广泛的有Sketchpad[6-7]、LabVIEW[8]、Microsoft Robotics Studio[9]、Simulink[10-11]等。这些可视化的开发工具为领域专家快速开发应用提供了一种便捷可靠的手段。以LabVIEW为代表的虚拟仪器开发软件，采用图形化编程语言G语言[12]实现程序逻辑，使得开发者更容易上手，但是仍存在一些不足，如版本兼容性差，二次开发困难等。本课题组研发的组合式仪器平台采用组件模块化的思想[13]，建立了一套组件运行、组件间数据传输、组件组合通讯等规范。但是人为编码描述文档存在容错率低、编码困难等问题，因此本文提出一种软件可视化编程的方法，以图形化的方式展现组件单元，并以拖拽和连线的方式，实现组件之间的连接组合，从而自动生成描述文档，传递给运行平台，并按照描述文档信息执行应用任务。
2 可视化编程方法的设计（Design of visual programming method）
2.1 基于组件（模块）应用的工作原理
组件采用通用性的设计思想，是应用软件的最小组成及运行单元，由三个部分组成，分别是输入端口、输出端口、数据处理。组件模型实现Java原生的线程Runnnable接口，能将耗时操作放在辅助线程中调用。根据实现功能复杂度，组件可分为单一组件与复合组件，组件模型如图1所示。
运行平台主要是根据应用程序任务要求，将需要的功能组件进行组合，提供组件的运行环境，维护组件之间的数据交换机制，将其中组件的任务注册到时钟，调用组件实时任务，实现应用程序的功能需求。组件间交互模式如图2所示。
2.2 XML驱动的应用运行机制
运行平台采用配置文档作为描述组件组合的工具，文档采用标准的可扩展标记语言XML（Extensible Markup Language）[14]。针对组件的属性信息及其输入输出的数据流通方式，设计采用组件装配端口的形式;针对组件的组合通讯，定义管道来描述组件间数据交互方式。因此，本文使用自定义标签描述组件、管道的信息。为方便运行平台解析文档，采用组件标签嵌套端口标签以及管道标签标识端口信息来描述端口、管道、组件三者间的关系。我们采用
…
…
其中，module标签表示功能组件，name表示组件名称，class表示组件全限定类名，UUID表示唯一标记符，version和author表示更新的版本及作者;port标签表示该组件的嵌套端口，name表示端口名称，dataclass表示端口的数据类型，type表示端口的类型;param标签表示组件的配置参数，name表示参数名称，value表示参数值，type表示参数的数据类型。
…
其中，pipe标签表示管道，name表示管道名称，定义为：组件名称_输出端口名称;source表示输出源标签，定义为：组件名称.输出端口名称;target表示输入目的标签，定义为：组件名称.输入端口名称。
2.3 可视化编程的原理
XML文档与图形化元素的转化是实现可视化的目标。XML文档以可视化方式给出，作为运行平台装载XML文档的过渡产物，提高了用户的界面友好性。本文通过对组件及依赖信息的可视化建模，完成组件信息的图形化展示，通过连线操作搭建图形化组件的依赖关系。图形化信息可编译成XML文档，最终被运行平台解析执行。图形化元素与XML文档映射图如图4所示。
3 可视化编程软件的实现（Realization of visual programming software）
3.1 三层架构的分析与设计
GEF（Graphical Editor Framework）[15]以图形展示用户自定义模型，创建图形编辑器（画布）操作编辑模型，达到可视化管理。在GEF中，控制层是框架的核心，是视图和模型交互的媒介，完成请求处理、模型的修改和视图的更新等;视图层依赖Draw2D实现图形界面，管理图形控件模型;模型层包含持久化的数据。GEF的工作交互流程如图5所示。
3.1.1 模型层的设计
模型是用户创建的图形编辑器编辑的对象，本文的模型设计为仪器平台参数模型、单一及复合组件模型、输入端口及输出端口模型、管道模型。其中平台参数模型作为外层的父类模型，在画布中显示模型标签参数;组件模型作为其子类节点，嵌入仪器平台参数模型中;端口模型嵌入组件模型中，是组件间数据传输的起始站，组件模型可包含多个端口模型;管道模型是组件连接路径的抽象表示，组合了端口对象模型。模型层类依赖关系如图6所示。
图6中构建两个基类，分别是节点模型基类及管道模型基类。设计时采用监听器模式、组合模式以及适配器模式，实现类的复用性。顶层父类模型为Node类，定义了模型名称、模型类名、模型父节点、子节点列表等公有属性。类中组合PropertyChangeSupport监听器，模型属性的变化传递到控制器;BaseModule类继承Node类，定义了组件的作者、编号、类路径、参数属性列表、参数类型列表、图标的路径等信息;Port类定义端口基本信息，InPort和OutPort类继承Port类，组合其连线的模型列表，其中在InPort接口中定义了关于vars變量的hash表的映射封装;Pipe类定义端口模型、管道名称及拐点列表，实现输入输出端口的连接和断开、初始化管道名称、拐点信息的设置与更新等。
3.1.2 视图层的设计
视图是对模型元素的可视化表现形式。本文使用的视图编辑器继承自GraphicalEditorWithPalette，此编辑器由GraphicalEditViewer（画布）和PaletteViewer（调色盘）组成。前者是对应图形元素Figure的容器，用于编辑区域;后者是对应组件素材库以及连接、选择工具的视图展示。素材库的组件从组件数据库中读取，并根据组件的组名放置其中。画布占据软件主要区域，用户可以把素材库的组件拖拽至画布，将组件使用管道连接起来。Properties视图是属性编辑视图，可实现元素编辑功能;变量映射视图是针对输入端口动态数据类型的管道映射图，实现管道与端口变量的对应，总体布局如图7所示。
模型对应的Figure是画布展示模型信息的最小控件，是轻量级的图形元素。本文设计了5 个图形元素描述类，InstrCanvasFigure对应仪器模型图形类，组合了Label标签类，对其模型信息进行页面显示;SingleModuleFigure及ComboModuleFigure是单一及复合组件模型的图形类，定义图形的外围轮廓大小及宽度、图标样式、组件的描述及嵌套端口的排版和布局显示;InPortFigure和OutPortFigure是端口的图形类，继承自Label类，采用绝对坐标形式布局，通过setIcon（）方法设置图标;Pipe模型对应图形采用Draw2D中的PolylineConnection类实现。
3.1.3 控制层的设计
控制器（EditPart）是整个软件的核心，除了要监听模型的改变，当用户编辑视图时，还需要把编辑结果反映到视图。模型需要对应一个控制器对象，模型和Figure的交互由控制器负责。控制器中注册编辑策略（EditPolicy），当用户发出请求命令时，控制器将请求分发给编辑策略，编辑策略会创建相应的命令（Command），由命令操作模型。本文设计了多种控制器、编辑策略以及命令。控制器层类依赖关系如图8所示。
本文设计了7 个控制器类，其中AppAbstractEditPart是定义的抽象控制类，通过重写activate（）和deactivate（）方法，设置控制器的可用状态。SingleModulePart、ComboModulePart、InStrCanvasPart分别与组件模型及仪器模型对应，实现创建图形元素对象、注册编辑策略方法等功能;PipePart是管道控制类，采用拐点路由算法和箭头标识，连接端口锚点。
本文设计了多种策略及命令。针对组件命令，实现修改名称、图形元素布局、实例化组件模型等;针对端口命令，实现实例化端口模型、添加管道等;针对管道命令，实现管道删除、管拐点配置（拐点的移除、添加、重置）等。其中策略、命令关系如图9所示。
3.2 属性编辑方法设计
从组合式仪器组件的可拓展性来说，实现组件信息、端口信息、管道信息、仪器参数信息完整性及智能化编辑是很有必要的。可视化信息包含许多属性，而有些属性需要我们手动配置，因此需要界面编辑元素属性功能。而GEF提供了监控属性视图中属性值的改变并且创建Command命令执行的机制。
本文通过实现IPropertySource接口作为标准样式的属性来源。考虑模型和属性页来源的通用性，本文分为节点类和管道类属性源。以模型Node类为切入点，采用适配器模式并定义属性参数常量作为key值，使其标识不同的参数属性。NodePropertySource实现了IPropertySource接口，并通过set/get方法获取Node类的属性值;重写getPropertyDescriptors（）方法，使其返回属性描述列表，其中包含属性页中显示的属性名称;最后重写getPropertyValue（）及setPropertyValue（）方法，负责返回参数常量key对应的参数的值及将参数修改的值设置到属性页中，完成属性页与模型之间的交互。
以单一组件为例，本节讲述设计细节。组件包含名称（可编辑）、备注内容（不可编辑）、参数列表（可编辑）。为了实现参数的智能化填充，结合组件设计规范，本文提出了5 种参数类型，分别是文本类型、文件类型、下拉框类型、颜色类型、日期类型。考虑到组件参数类型差异，设计自定义的属性描述对象。属性常量、参数类型以及属性描述对象映射关系如表1所示。其中CommonFilePropertyDescriptor实现弹出文件选择框功能，将其地址路径写入属性值中;DatePropertyDescriptor實现弹出日期选择框功能，将日期值写入属性值中;TextPropertyDescriptor实现文本编辑功能;ComBoxPropertyDescriptor及ColorPropertyDescriptor分别对应下拉框和颜色框功能。
以修改组件的下拉框属性为例，具体流程如图10所示。当点击组件的图形化元素时，Properties视图会调用属性来源NodePropertySource类的getPropertyDescriptors方法获取属性描述列表，根据下拉框参数的索引位置，获取其当前值对应索引值，转化成下拉框所选值。在组件的设计规范中，本文设计下拉框的完整类型为combox（下拉框值1#下拉框值2#……），当我们从组件库中获取x信息时，字符串分割获得下拉框集合列表，便形成完整的下拉选择项。当用户编辑下拉框值时，调用NodePropertySource类的setPropertyValue传入下拉框值的当前索引，模型BaseModule获取未编辑时的旧值，根据getRealComboxValue获取已编辑的下拉框值。注册在模型中的控制器监听参数变化，刷新Properties视图。
3.3 配置文档导出及导入
3.3.1 配置文档的自动导出
配置文档描述了组件组合的方式，需要以图形化的方式导出成约定的文档格式。之后运行平台，根据配置文件信息，对其中组件进行实例化和初始化，实现组件的即插即用。自动导出的流程如图11所示。
在图11中，当用户点击保存后，会遍历画布中组件并判断是否存在组件重名或参数信息未完善情况，如果存在，则自动导出结束;如果不存在，则会初始化配置文件，将模型层信息解析并保存至XML节点中，完成导出功能。
3.3.2 配置文档的自动导入
当保存好的配置文档需要再次查看其组件组合的可视化结构时，即需要将文档转化成画布上的图形元素，同样可以对图形化元素二次编辑。读取配置文档流程如图12所示。
在图12中，对XML文档的导入是导出的反向过程，当用户点击配置文档时，会根据文档的状态，将编辑器置顶并读取文档且对组件信息进行解析。之后判断组件库是否存在该组件，若存在，则其解析组件依赖信息，最后图形化展示。
4 实例演示（Example demonstration）
为验证可视化平台的可用性，本文设计了菜单源组件和打印数据组件来实现。其中菜单源组件作为上游组件，包含一个输出端口，按照指定的频率发送数据，输出端口将指定类型的数据发送至数据管道中;打印数据组件作为下游组件，包含一个输入端口，从输入端口接收到管道数据，将数据信息打印至控制台。组件组合可视化运行界面及自动导出配置文档如图13和图14所示。
5 结论（Conclusion）
本文分析了可视化编程技术的研究现状，针对课题组研发的组合式仪器平台软件平台组件管理混乱以及人为编写配置文档容易出错的问题，提出了可视化的解决方案。对组件的配置文档进行规范设计，对图形化编辑进行三层架构设计，并提出智能化组件属性编辑方法，自动实现图形化与配置文档的切换，最后组合组件完成软件程序设计。上文的实例演示也说明了该可视化开发平台的可行性。
参考文献（References）
[1] 金旭.面向IoT应用的可视化编程工具的研究与实现[D].长春：吉林大学，2017.
[2] 黄剑.虚拟仪器技术及应用综述[J].计量与测试技术，2010，37（04）：42-43.
[3] 孙晓丹.基于BIM的建筑可视化运维管理系统的设计与实现[D].北京：北京林业大学，2019.
[4] 钟志宏，周娟娟.AI战略下少儿可视化编程教育研究[J].电脑知识与技术，2019，15（32）：204-207.
[5]汪玲彦.可视化编程在电力系统保护技术中实现[J].电工技术，2018（16）：83-85.
[6] MENG C C， SAM L C. Encouraging the innovative use of geometer"s sketchpad through lesson study[J].Creative Education， 2011， 2（3）：236-243.
[7] MALONEY J， PEPPLER K， KAFAI Y B， et al. Programming by choice：
urban youth learning programming with scratch[J]. Acm Sigcse Bulletin， 2008， 40（1）：367-371.
[8] JAMAL R. Graphical object-oriented programming with LabVIEW[J]. Nuclear Instruments & Methods in Physics Research， 1994， 352（1/2）：438-441.
[9] 黃立，叶益斌，张辉.基于Microsoft Robotics Studio的机器人运动仿真研究[J].机电工程，2010，27（08）：122-126.
[10] 吴凌燕，蔡岗.BLDCM在Simulink中的图形化仿真与分析[J].太原师范学院学报（自然科学版），2010，9（04）：63-65.
[11] 姚俊，马松辉.建模与仿真[M].西安：西安电子科技大学出版社，2002：8.
[12] 邵林林.浅析LabVIEW编程语言[J].中小企业管理与科技（中旬刊），2016（06）：149-150.
[13] 徐定科.仪器应用软件模块标准化技术与组合方法的研究[D].杭州：浙江大学，2016.
[14] 吴敏，丁永生，陈家训.XML的研究现状及展望[J].微型电脑应用，2001（04）：5-9，2.
[15] 张鹏，姜昊，许力.Eclipse插件开发学习笔记[M].北京：电子工业出版社，2008：184-190，511，533-544.
作者简介：
韩仲明（1995-），男，硕士生.研究领域：面向可视化编程软件的关键技术.
李晓明（1976-），男，博士，副教授.研究领域：机电系统集成，物联网应用.
李俊杰（1986-），女，硕士，工程师.研究领域：测试与诊断，软件开发.
猜你喜欢 图形化组件 创建Vue组件npm包实战分析计算机与网络(2021年8期)2021-06-20智能机械臂发明与创新·中学生(2021年4期)2021-04-20国际国内双循环背景下国产图形化编程平台的比较与趋势展望中小学信息技术教育(2020年11期)2020-12-08掌控板编程软件mPython简介电脑报(2020年20期)2020-06-30多功能栅栏设计(2020年24期)2020-01-25陶瓷熔块釉筛选剔除设备佛山陶瓷(2019年10期)2019-11-29升级无障碍 修复Windows 10的Update电脑爱好者(2018年17期)2018-11-05文字图形化海报的叙事性解读设计(2017年7期)2017-10-30GIS的图形化配网继电保护整定研究科教导刊·电子版(2017年8期)2017-05-16Mixly米思齐：优秀的国产创客教育工具中国信息技术教育(2015年18期)2015-11-03