韓仲明 李曉明 李俊杰

摘? 要：近年來，可視化編程在許多非計算機領(lǐng)域得到廣泛的應(yīng)用，但基本上屬于編程語句和結(jié)構(gòu)的圖形化表述。本文提出了一種基于組件的軟件可視化編程方法，將圖標(biāo)與連線組成的圖形映射為軟件組件模塊及其相互之間的數(shù)據(jù)交互，并基于該思想，對應(yīng)用軟件、組件、通訊等進(jìn)行可視化建模;基于XML技術(shù)，設(shè)計了可視化程序的描述文檔;基于Eclipse/GEF圖形編輯框架，實現(xiàn)了可視化編程開發(fā)平臺、組件的圖形化管理等功能。最后，通過具體的測試用例，證明了所開發(fā)的可視化編程平臺，以及該可視化方法具有較好的可行性和通用性。

關(guān)鍵詞：組件;可視化編程;Eclipse/GEF;圖形化

中圖分類號：TP311.11? ? ?文獻(xiàn)標(biāo)識碼：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）

可視化編程是一種所見即所得的程序描述方式，它將底層代碼封裝成更易理解和閱讀的圖形化方式，以直觀的形式展示程序的功能。其主要的操作是鼠標(biāo)拖放相應(yīng)的編程單元，通過定義的管道連線各個單元，實現(xiàn)單元的數(shù)據(jù)通信，而不是依賴鍵盤進(jìn)行程序指令的輸入表達(dá)。相比于傳統(tǒng)計算機編程語言學(xué)習(xí)難度大、程序后期維護困難[1]等特點，可視化編程使得領(lǐng)域開發(fā)人員只需關(guān)注領(lǐng)域內(nèi)知識，而不需要掌握程序內(nèi)部的程序細(xì)節(jié)。因此，可視化技術(shù)迅速發(fā)展，并逐漸推廣到虛擬儀器[2]、建筑設(shè)計[3]、編程教育[4]、電力系統(tǒng)[5]等領(lǐng)域。

目前可視化編程應(yīng)用較為廣泛的有Sketchpad[6-7]、LabVIEW[8]、Microsoft Robotics Studio[9]、Simulink[10-11]等。這些可視化的開發(fā)工具為領(lǐng)域?qū)＜铱焖匍_發(fā)應(yīng)用提供了一種便捷可靠的手段。以LabVIEW為代表的虛擬儀器開發(fā)軟件，采用圖形化編程語言G語言[12]實現(xiàn)程序邏輯，使得開發(fā)者更容易上手，但是仍存在一些不足，如版本兼容性差，二次開發(fā)困難等。本課題組研發(fā)的組合式儀器平臺采用組件模塊化的思想[13]，建立了一套組件運行、組件間數(shù)據(jù)傳輸、組件組合通訊等規(guī)范。但是人為編碼描述文檔存在容錯率低、編碼困難等問題，因此本文提出一種軟件可視化編程的方法，以圖形化的方式展現(xiàn)組件單元，并以拖拽和連線的方式，實現(xiàn)組件之間的連接組合，從而自動生成描述文檔，傳遞給運行平臺，并按照描述文檔信息執(zhí)行應(yīng)用任務(wù)。

2 可視化編程方法的設(shè)計（Design of visual programming method）

2.1? ?基于組件（模塊）應(yīng)用的工作原理

組件采用通用性的設(shè)計思想，是應(yīng)用軟件的最小組成及運行單元，由三個部分組成，分別是輸入端口、輸出端口、數(shù)據(jù)處理。組件模型實現(xiàn)Java原生的線程Runnnable接口，能將耗時操作放在輔助線程中調(diào)用。根據(jù)實現(xiàn)功能復(fù)雜度，組件可分為單一組件與復(fù)合組件，組件模型如圖1所示。

運行平臺主要是根據(jù)應(yīng)用程序任務(wù)要求，將需要的功能組件進(jìn)行組合，提供組件的運行環(huán)境，維護組件之間的數(shù)據(jù)交換機制，將其中組件的任務(wù)注冊到時鐘，調(diào)用組件實時任務(wù)，實現(xiàn)應(yīng)用程序的功能需求。組件間交互模式如圖2所示。

2.2? ?XML驅(qū)動的應(yīng)用運行機制

運行平臺采用配置文檔作為描述組件組合的工具，文檔采用標(biāo)準(zhǔn)的可擴展標(biāo)記語言XML（Extensible Markup Language）[14]。針對組件的屬性信息及其輸入輸出的數(shù)據(jù)流通方式，設(shè)計采用組件裝配端口的形式;針對組件的組合通訊，定義管道來描述組件間數(shù)據(jù)交互方式。因此，本文使用自定義標(biāo)簽描述組件、管道的信息。為方便運行平臺解析文檔，采用組件標(biāo)簽嵌套端口標(biāo)簽以及管道標(biāo)簽標(biāo)識端口信息來描述端口、管道、組件三者間的關(guān)系。我們采用標(biāo)簽分別描述組件與端口的關(guān)系以及管道與端口的關(guān)系。XML驅(qū)動的應(yīng)用運行原理如圖3所示。

標(biāo)簽的通用描述格式如下：

…

…

其中，module標(biāo)簽表示功能組件，name表示組件名稱，class表示組件全限定類名，UUID表示唯一標(biāo)記符，version和author表示更新的版本及作者;port標(biāo)簽表示該組件的嵌套端口，name表示端口名稱，dataclass表示端口的數(shù)據(jù)類型，type表示端口的類型;param標(biāo)簽表示組件的配置參數(shù)，name表示參數(shù)名稱，value表示參數(shù)值，type表示參數(shù)的數(shù)據(jù)類型。

標(biāo)簽的通用描述格式如下：

xx.xxx

xx.xxx

…

其中，pipe標(biāo)簽表示管道，name表示管道名稱，定義為：組件名稱_輸出端口名稱;source表示輸出源標(biāo)簽，定義為：組件名稱.輸出端口名稱;target表示輸入目的標(biāo)簽，定義為：組件名稱.輸入端口名稱。

2.3? ?可視化編程的原理

XML文檔與圖形化元素的轉(zhuǎn)化是實現(xiàn)可視化的目標(biāo)。XML文檔以可視化方式給出，作為運行平臺裝載XML文檔的過渡產(chǎn)物，提高了用戶的界面友好性。本文通過對組件及依賴信息的可視化建模，完成組件信息的圖形化展示，通過連線操作搭建圖形化組件的依賴關(guān)系。圖形化信息可編譯成XML文檔，最終被運行平臺解析執(zhí)行。圖形化元素與XML文檔映射圖如圖4所示。

3? 可視化編程軟件的實現(xiàn)（Realization of visual programming software）

3.1? ?三層架構(gòu)的分析與設(shè)計

GEF（Graphical Editor Framework）[15]以圖形展示用戶自定義模型，創(chuàng)建圖形編輯器（畫布）操作編輯模型，達(dá)到可視化管理。在GEF中，控制層是框架的核心，是視圖和模型交互的媒介，完成請求處理、模型的修改和視圖的更新等;視圖層依賴Draw2D實現(xiàn)圖形界面，管理圖形控件模型;模型層包含持久化的數(shù)據(jù)。GEF的工作交互流程如圖5所示。

3.1.1? ?模型層的設(shè)計

模型是用戶創(chuàng)建的圖形編輯器編輯的對象，本文的模型設(shè)計為儀器平臺參數(shù)模型、單一及復(fù)合組件模型、輸入端口及輸出端口模型、管道模型。其中平臺參數(shù)模型作為外層的父類模型，在畫布中顯示模型標(biāo)簽參數(shù);組件模型作為其子類節(jié)點，嵌入儀器平臺參數(shù)模型中;端口模型嵌入組件模型中，是組件間數(shù)據(jù)傳輸?shù)钠鹗颊?，組件模型可包含多個端口模型;管道模型是組件連接路徑的抽象表示，組合了端口對象模型。模型層類依賴關(guān)系如圖6所示。

圖6中構(gòu)建兩個基類，分別是節(jié)點模型基類及管道模型基類。設(shè)計時采用監(jiān)聽器模式、組合模式以及適配器模式，實現(xiàn)類的復(fù)用性。頂層父類模型為Node類，定義了模型名稱、模型類名、模型父節(jié)點、子節(jié)點列表等公有屬性。類中組合PropertyChangeSupport監(jiān)聽器，模型屬性的變化傳遞到控制器;BaseModule類繼承Node類，定義了組件的作者、編號、類路徑、參數(shù)屬性列表、參數(shù)類型列表、圖標(biāo)的路徑等信息;Port類定義端口基本信息，InPort和OutPort類繼承Port類，組合其連線的模型列表，其中在InPort接口中定義了關(guān)于vars變量的hash表的映射封裝;Pipe類定義端口模型、管道名稱及拐點列表，實現(xiàn)輸入輸出端口的連接和斷開、初始化管道名稱、拐點信息的設(shè)置與更新等。

3.1.2? ?視圖層的設(shè)計

視圖是對模型元素的可視化表現(xiàn)形式。本文使用的視圖編輯器繼承自GraphicalEditorWithPalette，此編輯器由GraphicalEditViewer（畫布）和PaletteViewer（調(diào)色盤）組成。前者是對應(yīng)圖形元素Figure的容器，用于編輯區(qū)域;后者是對應(yīng)組件素材庫以及連接、選擇工具的視圖展示。素材庫的組件從組件數(shù)據(jù)庫中讀取，并根據(jù)組件的組名放置其中。畫布占據(jù)軟件主要區(qū)域，用戶可以把素材庫的組件拖拽至畫布，將組件使用管道連接起來。Properties視圖是屬性編輯視圖，可實現(xiàn)元素編輯功能;變量映射視圖是針對輸入端口動態(tài)數(shù)據(jù)類型的管道映射圖，實現(xiàn)管道與端口變量的對應(yīng)，總體布局如圖7所示。

模型對應(yīng)的Figure是畫布展示模型信息的最小控件，是輕量級的圖形元素。本文設(shè)計了5 個圖形元素描述類，InstrCanvasFigure對應(yīng)儀器模型圖形類，組合了Label標(biāo)簽類，對其模型信息進(jìn)行頁面顯示;SingleModuleFigure及ComboModuleFigure是單一及復(fù)合組件模型的圖形類，定義圖形的外圍輪廓大小及寬度、圖標(biāo)樣式、組件的描述及嵌套端口的排版和布局顯示;InPortFigure和OutPortFigure是端口的圖形類，繼承自Label類，采用絕對坐標(biāo)形式布局，通過setIcon（）方法設(shè)置圖標(biāo);Pipe模型對應(yīng)圖形采用Draw2D中的PolylineConnection類實現(xiàn)。

3.1.3? ?控制層的設(shè)計

控制器（EditPart）是整個軟件的核心，除了要監(jiān)聽模型的改變，當(dāng)用戶編輯視圖時，還需要把編輯結(jié)果反映到視圖。模型需要對應(yīng)一個控制器對象，模型和Figure的交互由控制器負(fù)責(zé)?？刂破髦凶跃庉嫴呗裕‥ditPolicy），當(dāng)用戶發(fā)出請求命令時，控制器將請求分發(fā)給編輯策略，編輯策略會創(chuàng)建相應(yīng)的命令（Command），由命令操作模型。本文設(shè)計了多種控制器、編輯策略以及命令?？刂破鲗宇愐蕾囮P(guān)系如圖8所示。

本文設(shè)計了7 個控制器類，其中AppAbstractEditPart是定義的抽象控制類，通過重寫activate（）和deactivate（）方法，設(shè)置控制器的可用狀態(tài)。SingleModulePart、ComboModulePart、InStrCanvasPart分別與組件模型及儀器模型對應(yīng)，實現(xiàn)創(chuàng)建圖形元素對象、注冊編輯策略方法等功能;PipePart是管道控制類，采用拐點路由算法和箭頭標(biāo)識，連接端口錨點。

本文設(shè)計了多種策略及命令。針對組件命令，實現(xiàn)修改名稱、圖形元素布局、實例化組件模型等;針對端口命令，實現(xiàn)實例化端口模型、添加管道等;針對管道命令，實現(xiàn)管道刪除、管拐點配置（拐點的移除、添加、重置）等。其中策略、命令關(guān)系如圖9所示。

3.2? ?屬性編輯方法設(shè)計

從組合式儀器組件的可拓展性來說，實現(xiàn)組件信息、端口信息、管道信息、儀器參數(shù)信息完整性及智能化編輯是很有必要的?？梢暬畔S多屬性，而有些屬性需要我們手動配置，因此需要界面編輯元素屬性功能。而GEF提供了監(jiān)控屬性視圖中屬性值的改變并且創(chuàng)建Command命令執(zhí)行的機制。

本文通過實現(xiàn)IPropertySource接口作為標(biāo)準(zhǔn)樣式的屬性來源?？紤]模型和屬性頁來源的通用性，本文分為節(jié)點類和管道類屬性源。以模型Node類為切入點，采用適配器模式并定義屬性參數(shù)常量作為key值，使其標(biāo)識不同的參數(shù)屬性。NodePropertySource實現(xiàn)了IPropertySource接口，并通過set/get方法獲取Node類的屬性值;重寫getPropertyDescriptors（）方法，使其返回屬性描述列表，其中包含屬性頁中顯示的屬性名稱;最后重寫getPropertyValue（）及setPropertyValue（）方法，負(fù)責(zé)返回參數(shù)常量key對應(yīng)的參數(shù)的值及將參數(shù)修改的值設(shè)置到屬性頁中，完成屬性頁與模型之間的交互。

以單一組件為例，本節(jié)講述設(shè)計細(xì)節(jié)。組件包含名稱（可編輯）、備注內(nèi)容（不可編輯）、參數(shù)列表（可編輯）。為了實現(xiàn)參數(shù)的智能化填充，結(jié)合組件設(shè)計規(guī)范，本文提出了5 種參數(shù)類型，分別是文本類型、文件類型、下拉框類型、顏色類型、日期類型。考慮到組件參數(shù)類型差異，設(shè)計自定義的屬性描述對象。屬性常量、參數(shù)類型以及屬性描述對象映射關(guān)系如表1所示。其中CommonFilePropertyDescriptor實現(xiàn)彈出文件選擇框功能，將其地址路徑寫入屬性值中;DatePropertyDescriptor實現(xiàn)彈出日期選擇框功能，將日期值寫入屬性值中;TextPropertyDescriptor實現(xiàn)文本編輯功能;ComBoxPropertyDescriptor及ColorPropertyDescriptor分別對應(yīng)下拉框和顏色框功能。

以修改組件的下拉框?qū)傩詾槔?，具體流程如圖10所示。當(dāng)點擊組件的圖形化元素時，Properties視圖會調(diào)用屬性來源NodePropertySource類的getPropertyDescriptors方法獲取屬性描述列表，根據(jù)下拉框參數(shù)的索引位置，獲取其當(dāng)前值對應(yīng)索引值，轉(zhuǎn)化成下拉框所選值。在組件的設(shè)計規(guī)范中，本文設(shè)計下拉框的完整類型為combox（下拉框值1#下拉框值2#……），當(dāng)我們從組件庫中獲取x信息時，字符串分割獲得下拉框集合列表，便形成完整的下拉選擇項。當(dāng)用戶編輯下拉框值時，調(diào)用NodePropertySource類的setPropertyValue傳入下拉框值的當(dāng)前索引，模型BaseModule獲取未編輯時的舊值，根據(jù)getRealComboxValue獲取已編輯的下拉框值。注冊在模型中的控制器監(jiān)聽參數(shù)變化，刷新Properties視圖。

3.3? ?配置文檔導(dǎo)出及導(dǎo)入

3.3.1? ?配置文檔的自動導(dǎo)出

配置文檔描述了組件組合的方式，需要以圖形化的方式導(dǎo)出成約定的文檔格式。之后運行平臺，根據(jù)配置文件信息，對其中組件進(jìn)行實例化和初始化，實現(xiàn)組件的即插即用。自動導(dǎo)出的流程如圖11所示。

在圖11中，當(dāng)用戶點擊保存后，會遍歷畫布中組件并判斷是否存在組件重名或參數(shù)信息未完善情況，如果存在，則自動導(dǎo)出結(jié)束;如果不存在，則會初始化配置文件，將模型層信息解析并保存至XML節(jié)點中，完成導(dǎo)出功能。

3.3.2? ?配置文檔的自動導(dǎo)入

當(dāng)保存好的配置文檔需要再次查看其組件組合的可視化結(jié)構(gòu)時，即需要將文檔轉(zhuǎn)化成畫布上的圖形元素，同樣可以對圖形化元素二次編輯。讀取配置文檔流程如圖12所示。

在圖12中，對XML文檔的導(dǎo)入是導(dǎo)出的反向過程，當(dāng)用戶點擊配置文檔時，會根據(jù)文檔的狀態(tài)，將編輯器置頂并讀取文檔且對組件信息進(jìn)行解析。之后判斷組件庫是否存在該組件，若存在，則其解析組件依賴信息，最后圖形化展示。

4? ?實例演示（Example demonstration）

為驗證可視化平臺的可用性，本文設(shè)計了菜單源組件和打印數(shù)據(jù)組件來實現(xiàn)。其中菜單源組件作為上游組件，包含一個輸出端口，按照指定的頻率發(fā)送數(shù)據(jù)，輸出端口將指定類型的數(shù)據(jù)發(fā)送至數(shù)據(jù)管道中;打印數(shù)據(jù)組件作為下游組件，包含一個輸入端口，從輸入端口接收到管道數(shù)據(jù)，將數(shù)據(jù)信息打印至控制臺。組件組合可視化運行界面及自動導(dǎo)出配置文檔如圖13和圖14所示。

5? ?結(jié)論（Conclusion）

本文分析了可視化編程技術(shù)的研究現(xiàn)狀，針對課題組研發(fā)的組合式儀器平臺軟件平臺組件管理混亂以及人為編寫配置文檔容易出錯的問題，提出了可視化的解決方案。對組件的配置文檔進(jìn)行規(guī)范設(shè)計，對圖形化編輯進(jìn)行三層架構(gòu)設(shè)計，并提出智能化組件屬性編輯方法，自動實現(xiàn)圖形化與配置文檔的切換，最后組合組件完成軟件程序設(shè)計。上文的實例演示也說明了該可視化開發(fā)平臺的可行性。

參考文獻(xiàn)（References）

[1] 金旭.面向IoT應(yīng)用的可視化編程工具的研究與實現(xiàn)[D].長春：吉林大學(xué)，2017.

[2] 黃劍.虛擬儀器技術(shù)及應(yīng)用綜述[J].計量與測試技術(shù)，2010，37（04）：42-43.

[3] 孫曉丹.基于BIM的建筑可視化運維管理系統(tǒng)的設(shè)計與實現(xiàn)[D].北京：北京林業(yè)大學(xué)，2019.

[4] 鐘志宏，周娟娟.AI戰(zhàn)略下少兒可視化編程教育研究[J].電腦知識與技術(shù)，2019，15（32）：204-207.

[5]汪玲彥.可視化編程在電力系統(tǒng)保護技術(shù)中實現(xiàn)[J].電工技術(shù)，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].太原師范學(xué)院學(xué)報（自然科學(xué)版），2010，9（04）：63-65.

[11] 姚俊，馬松輝.建模與仿真[M].西安：西安電子科技大學(xué)出版社，2002：8.

[12] 邵林林.淺析LabVIEW編程語言[J].中小企業(yè)管理與科技（中旬刊），2016（06）：149-150.

[13] 徐定科.儀器應(yīng)用軟件模塊標(biāo)準(zhǔn)化技術(shù)與組合方法的研究[D].杭州：浙江大學(xué)，2016.

[14] 吳敏，丁永生，陳家訓(xùn).XML的研究現(xiàn)狀及展望[J].微型電腦應(yīng)用，2001（04）：5-9，2.

[15] 張鵬，姜昊，許力.Eclipse插件開發(fā)學(xué)習(xí)筆記[M].北京：電子工業(yè)出版社，2008：184-190，511，533-544.

作者簡介：

韓仲明（1995-），男，碩士生.研究領(lǐng)域：面向可視化編程軟件的關(guān)鍵技術(shù).

李曉明（1976-），男，博士，副教授.研究領(lǐng)域：機電系統(tǒng)集成，物聯(lián)網(wǎng)應(yīng)用.

李俊杰（1986-），女，碩士，工程師.研究領(lǐng)域：測試與診斷，軟件開發(fā).