基于mxGraph的組態(tài)設(shè)計器設(shè)計方案

孔曉陽 代真虎

(上海寶信軟件股份有限公司 上海：201900)

隨著HTML5標(biāo)準(zhǔn)的發(fā)布，在Web瀏覽器前端可以完成的功能越來越多，其性能水平與CS架構(gòu)的前端軟件之間的差距在快速縮小。同時眾多相關(guān)廠商先后發(fā)布基于H5標(biāo)準(zhǔn)的產(chǎn)品，一時間各種前端框架、前端解決方案百花齊放。傳統(tǒng)工業(yè)監(jiān)控組態(tài)軟件大多基于CS架構(gòu)搭建，此類軟件與其他第三方系統(tǒng)集成、移動端集成以及多屏自適應(yīng)等方面有諸多不便，難以適應(yīng)目前工業(yè)互聯(lián)網(wǎng)國家戰(zhàn)略下對于工業(yè)領(lǐng)域IT系統(tǒng)的融合要求，各工業(yè)企業(yè)也急于尋找對自身監(jiān)控類軟件的改造升級路徑。

組態(tài)設(shè)計器軟件向來是工業(yè)SCADA系統(tǒng)的核心部件，是工業(yè)監(jiān)控系統(tǒng)現(xiàn)場實施的重要工具。實現(xiàn)純BS架構(gòu)的組態(tài)設(shè)計器軟件，將對工業(yè)監(jiān)控領(lǐng)域的軟件部署方式、實施方案等產(chǎn)生重大影響。首先，BS架構(gòu)的組態(tài)設(shè)計器將大大減輕客戶端部署的復(fù)雜度，用戶只需要有瀏覽器便可以進(jìn)行項目實施，也無需考慮客戶端版本升級維護(hù)的問題；其次，基于H5標(biāo)準(zhǔn)和互聯(lián)網(wǎng)最新技術(shù)構(gòu)建的組態(tài)工具，可以滿足工業(yè)互聯(lián)網(wǎng)時代下的大規(guī)模、高強度的訪問請求，方便支持橫向擴(kuò)展、系統(tǒng)高可用等特性；還有面對大融合的工業(yè)互聯(lián)要求，BS架構(gòu)的設(shè)計器能夠與其他第三方系統(tǒng)、移動應(yīng)用等進(jìn)行快速集成。

本文介紹了一種基于mxGraph開源圖形庫的組態(tài)設(shè)計器工具的設(shè)計方案，通過該設(shè)計器工具用戶可以所見即所得構(gòu)建組態(tài)監(jiān)控畫面、創(chuàng)建可復(fù)用圖元、與底層數(shù)采系統(tǒng)數(shù)據(jù)點綁定、編寫業(yè)務(wù)邏輯腳本以及最終運行畫面，滿足了工業(yè)現(xiàn)場對BS架構(gòu)的組態(tài)設(shè)計器軟件的需求。

1 關(guān)鍵技術(shù)

1.1 mxGraph

mxGraph是一個基于SVG和HTML技術(shù)進(jìn)行渲染的JavaScript圖形庫，通過它設(shè)計良好的API，可以進(jìn)行圖形繪制、與圖形交互以及與圖形相關(guān)常用操作。mxGraph提供了一套屏蔽不同瀏覽器差異的JavaScript庫，通過進(jìn)行完善的抽象和封裝提供給用戶一致的、簡潔的API。mxGraph還提供一個設(shè)計器原型mxEditor，讓使用者快速構(gòu)建圖形應(yīng)用。本文介紹的設(shè)計方案便是基于mxEditor進(jìn)行構(gòu)建。mxGraph主要功能全部包含在一個JavaScript文件中，通過在HTML頁面中引用該文件，便可以進(jìn)行相關(guān)圖形操作，結(jié)合與后端服務(wù)的通信實現(xiàn)數(shù)據(jù)聯(lián)通、文件管理等功能，可以完成一個最簡的圖形繪制應(yīng)用。圖1是mxGraph全局架構(gòu)圖。

圖1 mxGraph架構(gòu)圖

1.2 SVG

SVG是指Scalable Vector Graphics，即可縮放的矢量圖形，用SVG描述的圖形無論如何縮放都不會損失畫質(zhì)。它基于XML語言構(gòu)建，通過描述性的語句來表述圖形內(nèi)容，與通常的位圖有著本質(zhì)的區(qū)別。SVG圖形可以支持用戶交互，基于瀏覽器用戶事件可以完成眾多交互相關(guān)功能；SVG直接支持HTML的DOM操作，可以通過JavaScript語言動態(tài)改變SVG內(nèi)容；SVG自身提供動畫操作元素，可以很方便完成動畫過程。SVG對于JavaScript和DOM的支持，極大地擴(kuò)展了其使用范圍和靈活性，同時還可以搭配CSS樣式表對SVG圖形進(jìn)行樣式設(shè)置，更重要的是SVG標(biāo)簽支持自定義擴(kuò)展屬性，對于組態(tài)畫面這樣的復(fù)雜圖形，通過擴(kuò)展屬性可以攜帶各種配置信息和數(shù)據(jù)信息，再結(jié)合JavaScript語言處理，便可基于此來實現(xiàn)前端組態(tài)畫面數(shù)據(jù)刷新以及動畫展示等功能。

2 組態(tài)設(shè)計器架構(gòu)

2.1 整體流程

本文所實現(xiàn)的組態(tài)設(shè)計器為BS架構(gòu)應(yīng)用程序，基于mxGraph圖形庫的GraphEditor示例來搭建，該示例中包含了一個設(shè)計器的各項基本功能，并支持?jǐn)U展。主要包括設(shè)計器頁面框架、菜單欄、工具欄、元素邊欄、元素上下文菜單、畫面內(nèi)部結(jié)構(gòu)以及后臺通信接口等。

設(shè)計器整體流程(見圖2)描述如下：通過GraphEditor完成圖形繪制生成內(nèi)部的基于XML語法的畫面表述文本，重寫畫面保存接口，將畫面文本發(fā)送到后臺服務(wù)進(jìn)行畫面內(nèi)容保存和轉(zhuǎn)換，畫面轉(zhuǎn)換主要是將內(nèi)部表述形式的文本轉(zhuǎn)換為基于SVG的形式，同時增加用戶腳本等重要功能，最終方便前端瀏覽器運行態(tài)展示以及數(shù)據(jù)刷新。畫面轉(zhuǎn)換格式后，將畫面內(nèi)容進(jìn)行后臺存儲，當(dāng)后臺服務(wù)接收到畫面運行態(tài)加載請求后，將轉(zhuǎn)換好格式的畫面內(nèi)容發(fā)送到前端，前端運行態(tài)對畫面內(nèi)容進(jìn)行解析，主要對數(shù)據(jù)綁定、用戶腳本進(jìn)行提取，并根據(jù)配置內(nèi)容進(jìn)行畫面數(shù)據(jù)刷新和接受用戶事件。

圖2 畫面設(shè)計與運行流程

2.2 設(shè)計器搭建過程

mxGraph的GraphEditor示例是一個相對完整的前端設(shè)計器框架，通過將該示例文件夾拷貝到相應(yīng)的Web工程中，并對后臺對接服務(wù)進(jìn)行相應(yīng)調(diào)整，便可以初步運行起來。如果需要對后臺對應(yīng)的服務(wù)，比如畫面保存服務(wù)、畫面打開服務(wù)進(jìn)行相應(yīng)修改，則需要對與后臺交互部分的邏輯進(jìn)行調(diào)整；如果需要前端設(shè)計器功能、樣式調(diào)整等，則需要對前端JavaScript、CSS等文件內(nèi)容進(jìn)行修改。

2.2.1 初始運行設(shè)計器

GraphEditor示例在mxGraph程序包中的/javascript/examples/grapheditor目錄下，其中/java目錄中是兩個Java程序，分別負(fù)責(zé)啟動一個HTTP服務(wù)以及一個畫面打開服務(wù)，在本文方案中HTTP服務(wù)由Tomcat容器運行，畫面打開、保存等后臺服務(wù)參考GraphEditor的Java示例實現(xiàn)。

拷貝/javascript/examples/grapheditor/目錄下的/www文件夾到Web工程下，并調(diào)整目錄結(jié)構(gòu)為需要的路徑。本文方案中的設(shè)計器目錄結(jié)構(gòu)如圖3所示。

圖3 設(shè)計器目錄結(jié)構(gòu)

在/designer文件夾下的index.html文件為組態(tài)設(shè)計器入口，此時運行Tomcat容器加載Web工程后，通過瀏覽器訪問/console/designer路徑可以看到設(shè)計器初始運行成功，如果需要調(diào)整設(shè)計器界面的展示語言，可以通過修改mxLanguage=’zh’來指定使用中文，同時在/resources文件夾下增加grapheditor_zh.txt文件，內(nèi)容可以參考/resources/grapheditor.txt文件。設(shè)計器初始界面如圖4所示。

圖4 設(shè)計器初始界面

2.2.2 調(diào)整后臺交互

GraphEditor示例的后端交互請求主要有以下幾種類型，包括畫面新建、畫面保存與畫面打開，本文通過對前端設(shè)計器發(fā)出的請求進(jìn)行復(fù)寫，同時更改后臺Java接口的實現(xiàn)方式，對原新建、保存等操作進(jìn)行了重新編碼，并新增畫面導(dǎo)出、畫面轉(zhuǎn)換等后端接口。

以畫面保存為例，其調(diào)用發(fā)起是在/js/EditorUI.js文件的EditorUi.prototype.save函數(shù)中，通過修改save函數(shù)的Ajax請求地址以及參數(shù)，可以將畫面保存內(nèi)容發(fā)送到后臺服務(wù)中，從而實現(xiàn)自定義的畫面保存功能。

為了更加豐富設(shè)計器功能，本文還對設(shè)計器畫面提供畫面導(dǎo)出、畫面查錯等功能，需要同時對前端設(shè)計器界面和后臺服務(wù)進(jìn)行調(diào)整。首先通過/js/Toolbar.js中添加工具欄中的按鈕入口或者在/js/Menus.js中添加菜單入口，然后通過在/js/Actions.js中定義對應(yīng)的action操作，從而實現(xiàn)設(shè)計器的自定義功能實現(xiàn)。圖5是本文設(shè)計器的自定義工具欄。

圖5 設(shè)計器工具欄

2.2.3 設(shè)計器樣式調(diào)整

首先需要明確對于整體設(shè)計器的布局是通過/js/EditorUI.js文件來進(jìn)行定義，該文件通過createDivs和createUI兩個方法創(chuàng)建了整個設(shè)計器的樣式內(nèi)容，調(diào)整該方法中的div容器創(chuàng)建和相應(yīng)UI組件，可以自定義設(shè)計器樣式。本文中對于設(shè)計器右側(cè)的Diagram容器、菜單容器以及左邊欄容器都進(jìn)行了相應(yīng)的調(diào)整，圖6為最終設(shè)計器界面。

圖6 設(shè)計器界面樣式

如果對于原有的div容器需要進(jìn)行刪除修改等操作，可以直接在createDivs方法中進(jìn)行調(diào)整，在該方法中創(chuàng)建的div容器是各個UI控件的父容器。圖7是createDivs方法截圖。

圖7 創(chuàng)建div容器

同時，本文設(shè)計器還對整體樣式進(jìn)行了調(diào)整，比如調(diào)整設(shè)計器整體色系、字體等。GraphEditor示例對于所有樣式的定義都在/styles/grapheditor.css文件中，通過該文件可以查看設(shè)計器中已有UI控件的所有配置class、id信息，從而可以方便地進(jìn)行樣式調(diào)整，對于新增的UI控件，也可以自定義相關(guān)的class、標(biāo)簽樣式等。

2.3 畫面靜態(tài)結(jié)構(gòu)

由于組態(tài)畫面在編輯狀態(tài)和運行狀態(tài)其功能有一定差異，比如編輯態(tài)需要能保留用戶操作步驟以此進(jìn)行撤銷操作，而運行態(tài)則需要支持觸發(fā)用戶事件等，所以其各自狀態(tài)下的表述形式也有所不同。編輯態(tài)內(nèi)容以mxGraph圖形庫的文檔結(jié)構(gòu)為基礎(chǔ)，其根元素為mxGraphModel，所有圖形元素都是一個mxCell標(biāo)簽，在mxCell標(biāo)簽中通過parent屬性表明父子關(guān)系，通過mxGeometry標(biāo)簽表明該元素的位置大小信息，其結(jié)構(gòu)如圖8所示。

圖8 mxGraph文檔基本結(jié)構(gòu)

在組態(tài)畫面搭建過程中的所有配置屬性全部體現(xiàn)在該文檔結(jié)構(gòu)中，比如線條顏色、填充比例等，對于mxCell可以識別的屬性內(nèi)容，可以直接進(jìn)行配置，如果不屬于mxCell可識別的范圍，比如圖元閃爍頻率、文本替換規(guī)則等，那么需要將這些自定義屬性全部添加到style屬性中，并通過配置界面來修改和展示這些內(nèi)容。后續(xù)再次打開該畫面內(nèi)容時，需要對所有已配置屬性進(jìn)行解析，并回填到相應(yīng)的屬性配置界面中。基本的編輯態(tài)文檔格式如圖9所示。

圖9 編輯態(tài)文檔結(jié)構(gòu)

事件處理是組態(tài)畫面的重要功能，通過在編輯態(tài)定義畫面元素與用戶事件的關(guān)聯(lián)關(guān)系以及處理函數(shù)，以此提供組態(tài)畫面交互特性，而不僅僅只是簡單的圖形展示。用戶事件處理內(nèi)容并不與畫面元素共同存儲在同一文檔中，這是因為mxGraph的文檔格式并不支持JavaScript語言存儲。所以當(dāng)用戶進(jìn)行腳本編輯時，需要在設(shè)計器中緩存腳本內(nèi)容，當(dāng)畫面進(jìn)行保存時，將腳本內(nèi)容與畫面元素內(nèi)容一并傳遞到后臺進(jìn)行處理。

畫面腳本在編輯態(tài)以”元素唯一名稱_事件=function(){}”的形式存儲，經(jīng)過后臺解析后將具體元素的事件響應(yīng)關(guān)聯(lián)到該函數(shù)上，同時將所有用戶腳本加入到頁面