宋奕爽，刘绍华

（北京邮电大学电子工程学院，北京 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