韓仲明 李曉明 李俊杰

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

關鍵詞：組件;可視化編程;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）

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

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

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

2.1? ?基于組件（模塊）應用的工作原理

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

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

2.2? ?XML驅動的應用運行機制

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

標簽的通用描述格式如下：

…

…

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

標簽的通用描述格式如下：

xx.xxx

xx.xxx

…

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

2.3? ?可視化編程的原理

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

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

3.1? ?三層架構的分析與設計

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

3.1.1? ?模型層的設計

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

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

3.1.2? ?視圖層的設計

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

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

3.1.3? ?控制層的設計

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

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

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

3.2? ?屬性編輯方法設計

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

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

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

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

3.3? ?配置文檔導出及導入

3.3.1? ?配置文檔的自動導出

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

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

3.3.2? ?配置文檔的自動導入

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

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

4? ?實例演示（Example demonstration）

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

5? ?結論（Conclusion）

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

參考文獻（References）

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

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

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

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

[5]汪玲彥.可視化編程在電力系統(tǒng)保護技術中實現(xiàn)[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].中小企業(yè)管理與科技（中旬刊），2016（06）：149-150.

[13] 徐定科.儀器應用軟件模塊標準化技術與組合方法的研究[D].杭州：浙江大學，2016.

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

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

作者簡介：

韓仲明（1995-），男，碩士生.研究領域：面向可視化編程軟件的關鍵技術.

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

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