WEB 端可視化表單生成引擎的設計與實現

宋奕爽，劉紹華

（北京郵電大學電子工程學院，北京 100876）

WEB 端可視化表單生成引擎的設計與實現

宋奕爽，劉紹華

（北京郵電大學電子工程學院，北京 100876）

近年來，公司管理辦公系統的主要工作已經從硬件設施的建設逐步轉化為系統軟件應用的開發，而表單一直是公司管理和業務獲取信息的重要途徑，為了簡化工作流程和提高工作效率，可以開發一個通用的 Web可視化表單生成引擎以靈活適用不同的表單需求。本文設計實現的 Web端可視化表單生成引擎，采用組件化模塊化開發，大大提升了開發的效率。同時在功能上實現了基本的拖拽表單行以及各類組件，通過選項設置模板設置表單列和各類組件對應的相關屬性，以及本地儲存與本地預覽的功能，真正意義上實現了通過“可視化”操作來快速、靈活、簡單的生成可在Web系統里通用的表單。

WEB開發；表單生成；模塊化；拖拽生成

0 引言

近年來，公司管理辦公系統的主要工作已經從硬件設施的建設逐步轉化為系統軟件應用的開發，如何通過軟件應用為用戶提供更加方便、快捷、有效的服務是該領域研究的重點。如今公司的辦公管理系統大多是Web在線管理平臺，而表單一直是公司管理和業務獲取信息的重要途徑，隨著業務的不斷擴張與深入，信息采集、分類、處理等的需求使表單制作、分發、獲取與提交方式已經難以滿足當前的業務需求。為了簡化工作流程和提高工作效率，可以開發一個通用的Web可視化表單生成引擎以靈活適用不同的表單需求。

本論文實現的Web端可視化表單生成引擎，采用組件化模塊化開發，將表單從區塊行列開始劃分到每個單元格的相應組件都對應設計實現了相關的Widget模塊實現了相關模塊組件的復用，大大提高了開發的效率[1]。同時在功能上實現了基本的拖拽表單行以及各類組件，通過選項設置模板設置表單列和各類組件對應的相關屬性，以及本地儲存與本地預覽的功能，真正意義上實現了通過“可視化”操作來快速、靈活、簡單的生成可在Web系統里通用的表單。

1 表單生成引擎的需求分析

根據表單生成引擎在現實開發中的使用場景和開發者的實際需求入手，從業務建模、功能性需求和非功能性需求三個方面來詳細闡述可視化表單生成引擎的有關需求及業務分析。

1.1 業務建模

表單在各行各業中都有廣泛的用途，它不僅是企業管理的基本措施和途徑，而且也是企業的最為基本的業務要求。隨著互聯網技術和企業信息化技術的發展，越來越多的報表和表單都從傳統的手寫方式轉換為基于Web的互聯網頁面方式呈現，這大大的提高了企業處理信息的效率，也使得企業管理更加高效和透明化，從而大大的提高了企業對高質量信息的要求[2]。例如，本課題的原型北京市發改委的房地產大本系統和月報系統就都是基于Web端對各種表單信息進行處理的平臺。

隨著企業信息化的發展，越來越多的表單將以網頁的形式呈現給用戶。然而，我們目前大多使用的Web信息管理平臺對于表單的基本處理方式是將具體的表單對應一個頁面，用代碼的方式將表單用固定頁面樣式展示出來[3]。這種傳統的開發方式將定制好的表單以編碼的方式固化在系統中，當信息系統構建完成后，系統的功能也就固化了，并且當業務需求發生變更時，必須對原來的系統結構及功能進行代碼級的改動。此外，由于先天存在的業務人員需求不確定，業務人員與開發人員在溝通上存在問題，以及開發人員理解上面的偏差，修改代碼將是不可避免的。但是，頻繁的修改不僅增加軟件開發成本，也增加了軟件項目管理的負擔。

這就急需一款有效的表單生成工具，來幫助編程人員更為有效的開發出適合企業不斷變化需求的企業信息化系統。

1.2 功能性需求分析

通過前文的分析可以確定本生成系統具有以下主要的功能。

組件庫的創建：自定義表單中會運用到的各個組件，包括了用于分割表單的Section區塊、表單的標題h1（也就是對應HTML中的＜h1＞標簽）、表單中的行 Row（對應 HTML中 Class屬性為 row的＜div＞標簽）等等。

創建模板表：這是表單自定義創建的預設模塊，主要目的是用戶操作之前在表單拖放區域首先給予一個預設的Section塊給用戶以友好的示意，表示在這個Section塊中開始創建表單，可視化的拖放進行表單的設計。

拖放組件：所有的組件都是可以拖放的，我們預設把所有的組件放在頁面左側的組件列表中，并且所有的組件都綁定了可拖放事件（drag&drop）同時設置拖放的目標容器也就是放置著預設 Section的區域。用戶能夠根據自己的需求將組件放置到自定的單元格中。

1.3 非功能性需求分析

可靠性：本課題設計的表單生成器不僅要能夠對組件進行拖放實現表單的自定義創建，而且還要具備一定校驗識別能力，以充分保證軟件具有較為強大的健壯性[4]。同時，要做到當用戶意外關閉瀏覽器或者誤操作的時候，系統具有一定的數據恢復能力（也就是本地再次加載的功能）。此外，為了保證表單的布局更為協調美觀，表單最后呈現出來需要帶有響應式的樣式。

效率：在配置較低的情況下可以滿足用戶的一般性使用要求，在配置更高的情況下表單生成器的運行配置效率應該有相應的提升。

性能需求：在目前主流的筆記本電腦上，整個表單預覽響應的時間應該在1～2秒鐘內。

2 表單生成引擎的設計方案

Web端可視化表單生成引擎的核心是基于Dojo的表單組件的拖放及自定義創建，所以開發設計過程中要注意：保證表單的可用性；以用戶為中心來設計產品，注重使用中的用戶體驗；表單生成引擎使用迭代式組件化開發，將表單的各個部分組件化、模塊化，在高效快速開發的同事兼顧程序的健壯性和可維護性。為滿足上述需求，必須對項目規劃一個完整的設計方案。

2.1 系統整體架構設計

本課題設計與實現的可視化表單生成器采用的應用體系架構[5]，如圖 1所示。從上到下依次分為Web瀏覽器端表單創建、組件屬性配置和本地服務器端處理這三個層次。

圖1 系統架構設計Fig.1 Design of system architecture

2.2 拖放功能的構思與設計

本課題將會采用 Dojo庫來實現關鍵的元素拖放操作[6]。拖拽作為Dojo的基礎功能之一，可視化地支持頁面元素或對象在多個容器之間拖放。Dojo還可以制定規則過濾拖放對象的目標容器，比如“桌子”應該被放在“家具”容器內，而不該放在“家電”容器中。Dojo的拖放功能在 dnd模塊中（也就是Dojo/dnd），使用 Dojo讓我們避免了重復造輪子，也讓開發更加高效。如圖2展示了Dojo/dnd包中的幾個主要類之間的關系。

圖2 DOJO/dnd主要類的關系Fig.2 Relationship among class in DOJO/dnd

2.3 拖放規則的設計

前文分析得到，不同的組件應該具有不同的拖放規則。組件的拖放規則即規定了組件能否作為容器組件以及組件作為容器的時候能夠在其中放置哪些組件兩個方面。具體的組件拖放規則如下表1所示。

表1 組件拖放規則Tab.1 Module drag & drop rule

由上表容易知道，表單組件中能夠作為組件容器的只有Section和由Row組件添加自動生成的Col組件，Input類組件、TextArea組件、Image組件等都是單元格中最小的部分，不能作為容器在其內部進行添加。

3 可視化表單生成引擎的實現

在完成需求分析之后，本章主要在代碼層面進行幾個核心技術要點的實現過程。其中開發集成環境是phpstorm，PHP使用的版本是5.6.30版本。由上一節的分析首先給出系統整體的設計圖，如下圖3所示。

圖3 系統總體設計結構圖Fig.3 Overall architecture design of system

整個Server端由PHP本地服務器模擬，瀏覽器將前端數據進行序列化整合后，以 JSON的形式儲存在localstorage中，當用戶請求預覽時，服務器從localstorage中取出相應的 JSON數據[7]，并由此進行DOM組裝最后將拼接完成的HTML內容返回到瀏覽器中，予以渲染展示。

3.1 表單拖放功能的實現

拖拽作為Dojo的基礎功能之一，可視化地支持頁面元素或對象在多個容器之間拖放，而整個拖放的實現核心就在Dojo的dojo/dnd整個包中。

要實現表單的拖放功能，首先要理解 dojo.dnd包中的類結構。由上一章節分析，我們可以進一步了解到dojo.dnd的工作流程。當用戶在要拖動的對象上按住鼠標左鍵并開始移動時，Source 會調用Manager.startDrag 函數，標志拖放過程的開始。這個函數記錄當前發起拖放的Source和拖放的結點，然后創建出 Avatar，建立起一切必要的事件關聯，并通過dojo.publish方法發布一個“開始拖放”（ 也就是/dnd/start）的主題topic。Dojo.dnd里廣泛采用主題廣播的方式管理拖放過程，這樣頁面上所有的Source都能監聽這些主題并作出反應。例如這個/dnd/start主題發布后，頁面上所有的Source（包括剛才拖出來的那個），都將通過checkAcceptance方法檢查自己是否能夠接受那些正在被拖動的結點。

這里要注意到，Source有一個屬性叫 accept，這是一個字符串數組，默認是["text"]，表示這個Source能夠接受的東西只限于包含文本的結點，當然我們可以自由定義accept里的內容。當這些結點被拖到一個 Source上時（也就是 onmouseover操作），將使Manager發布 /dojo/source/over 主題，更新Avatar上的圖標，以反映是否能在這Source上進行Drop操作。

3.2 配置屬性模板的實現

表單右側欄為每個組件對應的屬性配置項。而對于每個組件來說，它們的屬性大多一部分相同，剩下的部分獨立。如果我們采用一般的思路，為不同的組件綁定點擊事件來控制屬性 display的顯示或隱藏，那么不僅邏輯繁多，而且代碼冗余不夠優雅。本課題在處理這個問題上采取了Handlebars語義模板庫，在大大提升了開發效率的同時讓代碼更優雅、更具可維護性。

在JavaScript中，Handlebars是通過Handlebars.compile()的方式來進行模板預編譯的[8]。這里先聲明了預編譯的模板template然后定義了組件的配置屬性config，后面同過if語句對每個組件config中包含的屬性進行判斷，根據判斷的結果，對模板中將會出現的屬性進行預設，進而影響到HTML頁面的有關渲染呈現。

3.3 輸入數據監聽的實現

當用戶在配置模板中進行屬性修改操作時，修改文字和模塊名希望實時的反映到編輯模板中，給用戶以及時的反饋，從而提升用戶體驗。這就要求引擎實現輸入數據的監聽，當這些屬性值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。

由于本項目中配置屬性都使用到了＜inpiut＞標簽，所以使用來自 Jquery的 on()來監聽 input值的變化，通過對輸入框 propertychange屬性的監聽，可以實時的監測到用戶鍵入的內容。當輸入的值發生變化，表單編輯區域會立刻產生響應，更新并保存最新的修改。

此外，為了避免用戶操作的復雜，在每次用戶鍵入內容以后都通過trigger()來觸發保存按鈕，已進行對鍵入值的保存。

3.4 本地保存與預覽

本課題可視化表單生成工具的設計與實現中，服務端系統是基于PHP5（具體到版本為5.6.30）實現的本地服務器[9]，引擎在Web前端實現了對數據的預處理將表單編輯區拖放的組件保存為了json對象格式的數據，存在本地的localstorage中。

當用戶在點擊預覽按鈕的時候，前端處理好的json數據將以POST的方式提交，并生成相應的預覽。預覽步驟的數據處理過程具體如下：

首先聲明了一個空變量$startHtml，然后根據數據里面的widgetType屬性進行組件的分類，不同的組件拼接不同的 HTML片段，例如“row”在這里是Class類為“form-widget-row row”的＜div＞標簽，用于Bootstrap柵格化的布局；“col”在這里是Class類為“form-widget-col col-md-”的＜div＞標簽，同樣用于柵格化布局，不同的是，這里的 Class會根據右側欄設置的寬度屬性變化而變化；同樣的道理，“label”和“textArea”也是這樣渲染出來的，只是它的相關屬性有所不同，所以轉化成的HTML片段屬性有所不同[10]。

4 性能測試與實現效果

在完成可視化表單生成引擎的詳細設計和具體的代碼以后，我們需要通過完善的測試來對系統的整體運行狀況、各功能模塊的實現情況、實際使用中的用戶體驗的方面進行檢查，盡可能多的發現存在的BUG并進行修改，保證整個表單生成器的正常上線及使用。

4.1 測試環境

從實際應用場景出發，對可視化表單生成引擎進行全方位的測試，測試環境分為硬件測試環境、軟件測試環境和網絡測試環境，分別如下表2、表3和表4所示。

表2 硬件測試環境Tab.2 Hardware testing environment

表3 軟件測試環境Tab.3 Software testing environment

表4 網絡測試環境Tab.4 Network testing environment

4.2 性能測試

啟動PHP運行環境，進行項目的本機測試。在Safari DevTools開發者工具可以直接通過瀏覽器的審查元素監視網頁的各個性能指標，其中網絡面板下面可以觀察到該網頁每一個被請求資源的狀態碼、請求類型、發送請求的對象、資源大小、加載時間等。

如圖4，可以看到在本地PHP服務端測試總的表單渲染時間是相當可觀的，因為整個頁面沒有多余的樣式，只有相應的表單格式和布局，所以主要的耗時都在響應階段。另外，從時間線錄制里面來看，得到的結果如圖5所示。

圖4 響應時間Fig.4 Response time

圖5 頁面渲染時間Fig.5 Page render time

可以看到，最后的復合與布局是花費了相當一段時間，并且是間隔完成的，下表分別記錄了25次從頁面網絡請求開始到布局與渲染結束的時間，其中我們關注的指標為傳輸文件總大小、網絡請求時間、觸發DOMContentLoaded事件時間、頁面渲染完成時間。對該組數據進行分析，系統的網絡請求和相關JavaScript事件的DOMContentLoaded事件都為毫秒級的時間消耗（因為這里DOM的操作很少），而總體的渲染時間穩定在2秒左右，完全符合設計和使用的任務需求。具體加載時間變化如圖6所示。

從上圖我們可以看到，在瀏覽器剛開始預覽渲染頁面的時候，頁面加載時間不穩定，但對頁面進行了多次請求之后渲染效率有所提高，由于部分GET請求被Service Worker緩存，網絡延時已經很少幾乎可以被忽略，無論是 DomContentLoaded觸發時間、Load加載時間抑或是整體的頁面渲染時間，都進一步減少，而總的加載時間回落到2秒左右。綜上所述，總體看來用戶體驗是完全達到標準的。

4.3 實際效果測試

完成性能測試之后，在瀏覽器客戶端進行實際的效果測試。可視化表單生成引擎的主界面如圖 7所示。

圖6 完全渲染時間走勢圖Fig.6 Tendency of overall render time

圖7 表單編輯主界面Fig.7 Main interface of form editor

在實現了本地保存和加載功能以后，點擊最右側的預覽按鈕，頁面將會跳轉至本地測試頁面preview.php進行可視化表單最終效果的預覽呈現，具體效果如下圖8所示。

圖8 本地預覽頁面Fig.8 Local preview page

5 結論

本文主要敘述了Web端可視化表單生成引擎的設計與實現。可視化表單生成系統是為了解決用戶對于表單不斷變化的需求，提升開發的效率、組件模塊的復用以及減小維護的成本的問題而實現的。從根本上實現了在目前最為流行的企業在線管理系統中表單的自定義創建功能。雖然表單生成器已經得到了越來越廣泛的研究，但其在內容和設計實現模式上仍具有廣闊的創新前景。

[1] 程佳, 陳濤, 王成. 通用Web表單數據采集系統的設計與實現[A]. 軟件工程Software Engineering, 2016 (8): 19-8.

[2] Strme kiD, Rado evi D, Magdaleni I. Web Form Generators Design Model[C]. Ceciis, 2015.

[3] 林向, 方凱. Web表單可視化定制原理研究[A]. 浙江 寧波,2013第6期.

[4] 吳賀, 及俊川, 李新. 基于XML的動態表單快速生成技術[J]. 計算機系統應用, 2010, 19(9): 60-63.

[5] 徐群. 通用表格生成系統的實現[A]. 計算機光盤軟件與應用, 2015 (33): 31-31.

[6] Dojo專題 [IBM developerWorks]. https://www.ibm.com/developerworks/cn/web/wa-dojotoolkit/newto.html

[7] 郭慶燕, 張敏, 楊賢棟. JQuery Ajax異步處理JSON數據實現氣象圖片的顯示[J].計算機應用于軟件, 2016, 33(6):20-22; 67.

[8] Handlebars. js: Minimal Templating on Steroids. http://handlebarsjs.com/.

[9] 霍瑞. 基于PHP技術的人力資源信息管理系統設計與實現[D]. 成都: 電子科技大學, 軟件工程, 2015. 6.

[10] 王野. 基于Web的柔性報表系統的研究與實現[D]. 哈爾濱工程大學, 2010.

Design and Implementation of Visual Form Generator Based on Web

SONG Yi-shuang, LIU Shao-hua
(School of Electronic Engineering, Beijing University of Post and Telecommunications, Beijing 100876, China)

These years, construction of hardware facilities has translated into software system application development in management office system’s mainly work, however, forms have always been the most significant way of company management and information acquisition. In order to simplify workflow and improve work efficiency,there is an urgent requirement of the flexible visual form. The visual form generator designed in this paper adopt modularization development to improve work efficiency. Meanwhile, essential drag and drop have been realized functionally, including set form’s row or module’s attribute through optional setting panel, local storage and preview locally. This is a real sense of realizing simple, flexible and fast web using form by visual control.

WEB development; Form generator; Modularization; Drag and drop

TP311.52

A

10.3969/j.issn.1003-6970.2017.12.029

本文著錄格式：宋奕爽，劉紹華. WEB端可視化表單生成引擎的設計與實現[J]. 軟件，2017，38（12）：153-159