[发明专利]一种基于web的电子表单设计系统及方法

说明书

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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