CN107807913A - 一种基于web的电子表单设计系统及方法 - Google Patents

Abstract

本发明涉及一种基于web的电子表单设计系统与方法，在表单设计开发过程中，基于数据结构的表单模型，以及基于表单结构的信息域被所有开发人员所共享，能够适应不同的开发环境和条件，能够提供表单开发过程中不同阶段和层次所需的不同类型和格式的数据，并且能够自动维护数据的一致性。电子表单系统由表单设计、数据源绑定和表单提交等子模块组成，通过定义表单内容及样式、定义字段内容及格式、定义模板等，最后保存并发布表单。整个设计过程基于简洁美观的表单设计器来完成，大大降低了信息系统实施的复杂度，有效的提高了开发效率和系统稳定性。

Description

一种基于web的电子表单设计系统及方法

技术领域

本发明涉及一种基于web的电子表单设计系统及方法，通过可视化界面设计表单样式与控件属性，一键保存并发布表单，自动生成表单页面模板文件。

背景技术

通过对中外专利和非专利文献的检索结果来看，目前市场上的web电子表单设计主要是基于第三方工具或商用工具：第三方工具封装好基本功能，但是稳定性、性能、可扩展性较低，同时业务功能简单，不能满足业务上复杂变化的需求；商用工具跨平台能力有限，扩展性较差，且主要面向某一类型的业务方向，通用性较低，无法满足各行各业的个性化定制需求，页面设计老旧用户操作不便。

发明内容

本发明技术解决问题：在表单设计开发过程中，基于数据结构的表单模型，以及基于表单结构的信息域被所有开发人员所共享，能够适应不同的开发环境和条件，能够提供表单开发过程中不同阶段和层次所需的不同类型和格式的数据，并且能够自动维护数据的一致性。电子表单系统由表单设计、数据源绑定和表单提交等子模块组成，通过定义表单内容及样式、定义字段内容及格式、定义模板等，最后保存并发布表单。整个设计过程基于简洁美观的表单设计器来完成，大大降低了信息系统实施的复杂度，有效的提高了开发效率和系统稳定性。

本发明提供了一种基于web的电子表单设计系统，包括表单管理模块、表单设计模块、设图设计模块、存储模型模块，其中：

表单管理模块：能够为人机交互提供图形化界面，支持可视化表单建模；能够解耦数据库的ER关系；使实施人员可以动态、快速地根据业务变化调整和配置数据展示；支持对表单模型的分类管理，能够根据需要对表单模型分类进行添加、编辑和删除操作；所述表单建模包括两个环节，首先在预设的表单分类下创建表单模型，然后根据表单模型新建电子表单；创建电子表单时，有两种方式。一种是设计表单的同时自动生成表模型，另一种是先创建表模型再设计表单。两种方式均需要借助电子表单设计器进行表单设计。本发明优选第二种方式。

表单设计模块：新建电子表单后，表单设计模块调用电子表单设计器进行电子表单设计；并将设计完成或更新完成的电子表单保存到存储模型模块中；电子表单设计器的页面划分为四个区域，分别为控件选择区、数据源字段显示区、工具栏和设计面板区，元素属性和事件设置区；

视图设计模块：创建电子表单的页面视图后，视图设计模块调用视图设计器对电子表单视图进行设计；并将设计完成或更新完成的电子表单视图保存到存储模型模块中；视图设计器的页面包含四个功能区，分别为页面视图区、属性区、布局区、按钮区；

存储模型模块：存储模型基于数据库物理模型，在表和视图的基础上对业务元数据进行描述，并能够自动将数据映射到各类数据库中。在实际应用中存储模型模块可以是一组抽象化的商业属性描述，可以自动地持久化业务对象的数据。支持对存储模型进行分类管理，可根据需要对存储模型分类进行添加、编辑、删除操作。存储模型建模，是在使用电子表单设计器设计表单之前，先进行表建模，表建模有两种方式，一种是在系统中添加表模型，定义表名称以及字段，然后存储到数据库中；另一种是从数据库中选择一张表，直接导入到系统的存储模型中。

进一步的，所述电子表单设计器基于TinyMCE编辑器进行二次定制开发，集成了基本控件、高级控件、自定义按钮、自定义样式模块。TinyMCE编辑器(亦称Tiny MoxiecodeContent Editor)是一款遵循LGPL授权协议，以网页接口为导向的HTML编辑器。所见即所得，易于集成，支持多种浏览器，开发者可利用官方提供的应用程序接口扩展，包含了各种类型的插件。基于TinyMCE编辑器，能够所见即所得设计各种复杂情景下的电子表单。

进一步的，所述电子表单设计器保存的页面源码在后台采用超文本标记语言解析器Jsoup html进行解析，获取表单布局、表单列属性、表单控件事件脚本，并保存到数据库，在生成表单页面模板的时候直接调用。超文本标记语言解析器Jsoup html，是一款基于Java的HTML解析器，直接解析某个URL地址、HTML文本内容；Jsoup解析HTML得到一个Document对象，通过操作Document的属性来获取HTML页面内容，通过DOM，CSS以及类似于jQuery的操作方法来取出数据，并将HTML页面内容和数据提供给测试用例开发工具。

进一步的，所述电子表单设计器后台使用Apache Velocity模板引擎生成元素控件模板、表单页面模板等，一次生成永久使用，利于扩展表单页面的功能并提高运行效率。Apache Velocity模板引擎是一个基于Java的模板引擎，它提供了一个模板语言去引用由Java代码定义的对象。Velocity是Apache基金会旗下的一个开源软件项目，旨在确保Web应用程序在表示层和业务逻辑层之间的隔离(即MVC设计模式)。

本发明提供了一种基于web的电子表单设计方法，包括如下步骤：

新建电子表单的步骤：在预设的表单分类下创建表单模型，然后根据表单模型新建电子表单；

电子表单设计的步骤：新建电子表单后，调用表单设计器对电子表单进行设计；并将设计完成或更新完成的电子表单进行模型存储；表单设计器的页面分为四个区域，分别为控件选择区、数据源字段显示区、工具栏和设计面板区、元素属性和事件设置区；

电子表单视图设计的步骤：创建表单视图后，调用视图设计器对表单视图进行设计；并将设计完成或更新完成的电子表单视图进行模型存储；视图设计器的页面分为四个功能区，分别为页面视图区、属性区、布局区、按钮区；

模型存储的步骤：基于数据库物理模型，在表和视图的基础上对业务元数据进行描述，并自动将数据映射到各类数据库中。

模型存储的步骤：基于数据库物理模型，在表和视图的基础上对业务元数据进行描述，并自动将数据映射到各类数据库中。

进一步的，在电子表单设计的步骤中，基于表格进行表单设计，具体包括：电子表单的设计，一般基于表格进行设计，类似于页面代码布局中的<table>标签，然后在表格的每一行插入<th>和<td>。首先需要在表单设计器中插入表格，然后编辑表格的单元格，分别插入字段标题和字段控件(即为表字段)。基本控件包括文本控件、日期控件、数字控件、多行文本控件、下拉框控件、单选控件、多选控件、自动编码控件等，高级控件包括选用户控件、选部门控件、选角色控件、选群组控件、选岗位控件、宏控件、级联控件、子表控件、打开地址控件、文件上传控件、流程意见控件、图像控件等。无论基础控件还是高级控件，每个控件都包含字段名称、字段描述、必填、只读、显示5个通用属性，除文件上传、流程意见控件外，字段长度和默认值为部分控件通用属性。进行表单设计时，无论是使用基础控件还是高级控件，都可以给控件添加常见的事件属性，如：控件的点击事件、值变更触发事件、按键被释放的keyup事件、输入域失去焦点和获取焦点的事件、保存的前置事件以及表单初始化事件。

进一步的，电子表单视图设计的步骤中，在创建表单视图时，支持电子表单的视图建模，视图建模用于电子表单的访问入口，以列表或者树形结构展示表单数据，能够进行电子表单主页面的属性设置。，包括：页面显示类型、页面布局、表中列的显隐等。

进一步的，电子表单视图设计的步骤中，视图设计器对电子表单视图进行设计时，在设置页面布局后，在页面布局上添加树组件、添加表格组件，当进行树列表建模或主子表建模时，需要建立两个组件间的关联关系，使用组件联动实现。

进一步的，当同一页面，既需要展示数据统计，也要进行表单数据维护时，还需要在页面布局上添加表单组件。

本发明的有益效果是：本发明对没有编程功底的业务人员也能轻松的开发web电子表单并发布运行，可全程可视化操作执行，操作简单、易上手，大大提高了业务功能开发的开发执行效率。

(1)由于该发明使用设计器开发表单内容，不需要掌握较深的开发编程等专业知识，因此操作简单、易上手，大大提高了开发执行效率。

(2)由于该发明能够集成了常用web控件，并且预留丰富二次开发接口，并自动完成设计、建模、生成等一系列复杂操作，功能强大且全程可视化管理，能够满足大规模复杂业务需求。

(3)由于该发明使用了表单文件模板方式加载数据，稳定性更高性能更强，一次生成多处运行，方便开发运维人员进行调试与二次扩展。

(4)本发明具备自动化程度相对较高、可重用性强、可扩展性优良等优点，可适合应用于任何类型的web应用系统进行表单设计。

附图说明

图1是本发明系统的组成框架图；

图2是本发明的表单保存更新过程图；

图3是本发明的表单模板运行过程图；

图4是本发明的表单控件扩展过程图。

具体实施方式

下面结合附图和实施例对本发明进一步说明。

下面通过一个具体的实施例来说明本发明基于web的电子表单设计系统及方法，如图1所示。该实施例中表单设计流程能够集成第三方工具，超文本标记语言解析器Jsouphtml、Apache Velocity模板引擎、TinyMCE编辑器，分别用来解析页面元素、提供表单编辑区域、生成后台模板代码。

表单系统核心技术分析及处理：表单的设计主体分为六部分：定义表单内容及样式，定义字段内容及样式，定义模板，定义自定义处理代码，定义外部调用，表单定义的结果存入数据库中。

表单显示模块的处理逻辑：表单的显示是表单定义的逆过程，将数据库中定义好的表内容及样式通过浏览器展示出来。根据表单显示场景的不同，显示过程会有所不同。

表单提交模块的处理逻辑：表单设计和显示的最终目的就是为了保证数据采集的方便和有效性，所以表单提交处理也是业务系统中展现层与数据层之间处理的关键。表单的提交方式有两种：保存和保存发布，后者保存或更新表单后直接发布表单并关闭设计页面。

整个实现过程如下：

(1)在所见即所得表单开发模型中，新建表单分类并在分类下建立表单模块，然后在不同的模块下分别新建相应的电子表单。如果该电子表单绑定数据源，则点击打开该电子表单设计器时会默认填充数据模型的数据库字段属性，并按照默认格式在设计区绘制表格；如果没有绑定数据源，则保存表单后正向生成数据源。

(2)打开电子表单设计器，整个界面分为左中右三栏。其中，左侧栏为控件元素和数据源栏，基本控件包括文本控件、日期控件、数字控件、多行文本控件、下拉框控件、单选控件、多选控件、自动编码控件等，高级控件包括选用户控件、选部门控件、选角色控件、选群组控件、选岗位控件、宏控件、级联控件、子表控件、打开地址控件、文件上传控件、流程意见控件、图像控件等，数据源显示当前主表及其属性、子表及其属性的关联关系；中间栏为电子表单设计区，基于tinymce开发的电子表单设计器，点击元素控件即可在光标处插入该控件，同时可在设计区拖动该控件移动位置；右侧栏为控件属性区，点击元素控件即可显示当前元素所有相关属性，并可进行修改。此外，可随时将当前设计的表单另存为模板，便于以后复用，极大的节省了人力；也可以应用不同的样式，改变当前表单设计风格。

(3)在电子表单设计器中可设计出任意风格和样式的电子表单，并能够进行实时预览。可在设计器中先添加表格，然后基于表格的布局添加表单元素控件，并设置相应属性。当完成设计表单内容后，点击保存与更新按钮即可保存当前表单设计的源代码，同时在Oracle数据库中生成主表及其子表，再次点击后台物理表只会增量添加新的属性；如果点击保存并发布按钮，则会在保存功能后自动发布该表单，供系统调用。如果该表单未绑定数据源，则新增该表单原始设计数据，并根据设计内容生成物理主表与子表，然后会自动绑定到这一新生成的数据源；如果事先已经绑定数据源，则在原有表单内容的基础上进行更新，并新增物理表及其属性，同时维护原有物理表及其属性，设计区删除的元素控件，物理表并不删除，从而保持数据一致性。完成表单设计后，可在电子表单管理界面生成该电子表单模板页面，点击发布后会在应用服务器目录下动态生成物理模板并运行，当表单在视图或流程中被配置引用时，会通过当前生成的模板来动态加载数据，从而提高系统的稳定性与性能。

(4)可自定义扩展元素控件类型，主要分为前后台两个部分。前台：添加元素控件定义js，包括控件名称、样式、更新事件、初始化事件等，添加元素控件属性页面，然后在config.js中配置引用；后台：添加元素控件解析velocity模板定义元素解析样式，添加元素控件属性java类，添加元素控件页面加载执行js模板等。所有控件功能的开发均预留规范易用的接口，方便用户自定义功能与二次开发。

(5)当表单完成设计后，可通过视图或者流程来配置使用。视图：在表单模块下新建表单视图，点击配置视图布局，布局中可添加Tab页签，然后在布局或Tab页签下添加视图组件，其中视图组件可为非流程表单或树表单或表格表单，保存视图后进行预览即可动态加载相应配置的表单物理模板文件；流程：打开流程设计器，在全局或各节点配置流程表单，同时设置各字段能否编辑，当流程启动时会动态加载相应配置的表单物理模板文件。如果表单文件没有生成，则在浏览器中会提示找不到文件，通过动态生成页面文件模板的方式具有更高的效率与稳定性，能够提升并发性能，同时便于调试与开发。

上述电子表单设计方法，填写表单存储到数据库中的表单名称，具有唯一性，必须以DYN开头，需要选择表单存储到存储模型中的分类。点击提交，关闭表单设计器，表单展示区域显示新建的电子表单，点击表单模型右下侧按钮，选择发布表单按钮，可以进行表单发布；发布后，表单模型颜色变为绿色，表示表单已发布。当对已发布表单进行更改，需要对表单页面代码进行重新生成，然后引用表单时更改才会生效。也可以点击上方批量生成发布表单按钮，进行电子表单页面批量生成。

上述电子表单设计方法，视图设置中，建立树组件时，必须要先在数据库中树对应的表里面维护一条数据，维护8个必填字段、主键ID以及父ID字段的值。当表中有选部门、用户、选角色、选群组、选岗位、通用代码等控件，需要进行列的显示转换，进行部门ID转名称、用户ID转名称、角色ID转名称、群组ID转名称、岗位ID转名称、通用代码转换以及自定义转化。当进行树列表建模或主子表建模时，需要建立两个组件间的关联关系，使用组件联动实现。当同一页面，既需要展示数据统计，也要进行表单数据维护，则需要在页面上添加表格和表单两种组件。视图发布成功后(绿色)，授权用户可在前台菜单进行访问。

上述电子表单设计方法中，保存表模型，在表模型显示区，出现新建表模型(橘黄色，表示表模型还未创建表字段)，创建表完成三个操作：一是将表插入到数据库，二是按照开发规范，自动在表中补全必需字段，三是将ID字段创建为唯一索引。在表模型详细页，切换到索引选项卡，创建索引，索引类型可以选择Normal和Unique类型。已固化到数据库的表字段，仅允许更改列中文名称、列长度只能增大不能减小、默认值，其他项不允许更改。列删除时，会将数据库中的表字段同时删除。

如图2中所示，表单保存更新过程如下：

(1)表单保存时有三种基本状态，一种是新建电子表单，一种是绑定数据源生成默认内容电子表单，还有一种是加载模板导入的电子表单。前台js会记录当前表单是否创建主表，然后分别调用保存或更新方法，分别新增电子表单和更新电子表单。

(2)通过ajax方法动态请求后台执行相应方法，如果是新增表单，则会通过jsoup解析表单设计器中的源码并存入相应数据库字段，然后分别创建主表物理表以及子表物理表，最后维护数据模型信息；如果是更新表单，则先检查已有字段的类型是否发生改变，如果改变则提示前台用户，然后更新表单设计源码，更新维护主表物理表以及子表物理表，并维护数据模型信息，前台删除的字段后台不做处理。

(3)根据后台返回的处理结果提示用户，并动态刷新设计区表单信息。如果是保存并发布表单，则在执行完保存更新操作后，会自动关闭当前表单设计页。

如图3中所示，表单模板运行过程如下：

(1)在表单管理模块，从数据库读取表单数据，可分别对每个表单执行发布操作，也可以一键执行发布所有表单。

(2)在运行目录下生成表单页面模板文件。

(3)在视图管理页面，添加非流程表单组件；在流程设计页面，全局或节点添加流程表单。

(4)运行电子表单时会自动加载动态生成的页面文件。

如图4中所示，表单控件扩展过程如下：

(1)用户可自定义扩展设计区元素控件类型，便于拓展业务需求，主要分为前台js扩展和后台java扩展两块。

(2)前台js扩展包括自定义js对象，自定义jsp属性页面，然后在config.js中配置控件引用即可。

(3)后台java扩展包括自定义java属性类，自定义样式解析Velocity模板，自定义运行脚本Velocity模板，然后在页面模板中维护相应信息即可。

(4)按照约定大于配置的原则，统一遵循预留的接口规范，即可非常便利的开发自定义控件，然后在设计器中添加即可加载运行。

总之，本发明涉及一种基于web的电子表单设计系统与方法，在表单设计开发过程中，基于数据结构的表单模型，以及基于表单结构的信息域被所有开发人员所共享，能够适应不同的开发环境和条件，能够提供表单开发过程中不同阶段和层次所需的不同类型和格式的数据，并且能够自动维护数据的一致性。电子表单系统由表单设计、数据源绑定和表单提交等子模块组成，通过定义表单内容及样式、定义字段内容及格式、定义模板等，最后保存并发布表单。整个设计过程基于简洁美观的表单设计器来完成，大大降低了信息系统实施的复杂度，有效的提高了开发效率和系统稳定性。

本发明未详细阐述部分属于本领域公知技术。

通过足够详细的描述这些实施示例，使得本领域技术人员能够理解和实践本发明。在不脱离本发明的主旨和范围的情况下，可以对实施做出逻辑的、实现的和其他的改变。因此，以下详细说明不应该被理解为限制意义，本发明的范围仅仅由权利要求来限定。

Claims (9)

1.一种基于web的电子表单设计系统，其特征在于：包括表单管理模块、表单设计模块、视图设计模块以及存储模型模块，其中：

表单管理模块：能够为人机交互提供图形化界面，支持可视化表单建模；能够解耦数据库的ER关系；支持对表单模型的分类管理，能够根据需要对表单模型分类进行添加、编辑和删除操作；所述表单建模包括两个环节，首先在预设的表单分类下创建表单模型，然后根据表单模型新建电子表单；

表单设计模块：新建电子表单后，表单设计模块调用电子表单设计器进行电子表单设计；并将设计完成或更新完成的电子表单保存到存储模型模块中；电子表单设计器的页面划分为四个区域，分别为控件选择区、数据源字段显示区、工具栏和设计面板区、元素属性和事件设置区；

视图设计模块：创建电子表单的页面视图后，视图设计模块调用视图设计器对电子表单视图进行设计；并将设计完成或更新完成的电子表单视图保存到存储模型模块中；视图设计器的页面包含四个功能区，分别为页面视图区、属性区、布局区、按钮区；

存储模型模块：存储模型基于数据库物理模型，在表和视图的基础上对业务元数据进行描述，并能够自动将数据映射到各类数据库中。

2.根据权利要求1所述的系统，其特征在于：所述电子表单设计器基于TinyMCE编辑器进行二次定制开发，集成了基本控件、高级控件、自定义按钮、自定义样式模块。

3.根据权利要求1所述的系统，其特征在于：所述电子表单设计器保存的页面源码在后台采用超文本标记语言解析器Jsoup html进行解析，获取表单布局、表单列属性、表单控件事件脚本，并保存到数据库，在生成表单页面模板的时候直接调用。

4.根据权利要求1所述的系统，其特征在于：所述电子表单设计器后台使用ApacheVelocity模板引擎生成元素控件模板、表单页面模板。

5.一种基于web的电子表单设计方法，其特征在于：包括如下步骤：

新建电子表单的步骤：在预设的表单分类下创建表单模型，然后根据表单模型新建电子表单；

电子表单设计的步骤：新建电子表单后，调用表单设计器对电子表单进行设计；并将设计完成或更新完成的电子表单进行模型存储；表单设计器的页面分为四个区域，分别为控件选择区、数据源字段显示区、工具栏和设计面板区、元素属性和事件设置区；

电子表单视图设计的步骤：创建表单视图后，调用视图设计器对表单视图进行设计；并将设计完成或更新完成的电子表单视图进行模型存储；视图设计器的页面分为四个功能区，分别为页面视图区、属性区、布局区、按钮区；

模型存储的步骤：基于数据库物理模型，在表和视图的基础上对业务元数据进行描述，并自动将数据映射到各类数据库中。

6.根据权利要求5所述的方法，其特征在于：在电子表单设计的步骤中，基于表格进行表单设计，具体包括：首先需要在表单设计器中插入表格，然后编辑表格的单元格。

7.根据权利要求5所述的方法，其特征在于：电子表单视图设计的步骤中，在创建表单视图时，支持电子表单的视图建模，视图建模用于电子表单的访问入口，以列表或者树形结构展示表单数据，能够进行电子表单主页面的属性设置。

8.根据权利要求5所述的方法，其特征在于：电子表单视图设计的步骤中，视图设计器对电子表单视图进行设计时，在设置页面布局后，在页面布局上添加树组件、添加表格组件，当进行树列表建模或主子表建模时，需要建立两个组件间的关联关系。

9.根据权利要求8所述的方法，其特征在于：当同一页面，既需要展示数据统计，也要进行表单数据维护时，还需要在页面布局上添加表单组件。