基于Bootstrap的自定义表单系统的制作方法

文档序号:11950187阅读:778来源:国知局

本发明涉及表单数据管理技术领域,具体地说是基于Bootstrap的自定义表单系统。



背景技术:

随着移动互联网和智能手机的普及,广大用户访问互联网的习惯已由电脑转为通过移动终端来进行与生活工作相关的活动。如:移动办公、移动商务等。在我们的日常生活和工作中,随处可见各种填写表单的场景。例如:通信运营商的故障工单系统,都是由若干内容和格式不同的表单元素构成,运维人员只需根据故障填写相应的工单,就可发起一次修复故障的派遣单。这些工单的开发,主要有2种形式:

1、针对每个表单的内容,进行单一定制开发,即:每个表单都要开发一系列的数据模型存储、表单呈现逻辑。

2、提供预定义好的表单布局模版,由用户根据需要选择表单的布局并配置相应的表单元素,从而构成一张表单。

传统方式定义出的表单已不能更好的支持移动终端使用了。由此可知现有技术方案主要缺点包括以下几个方面:

1.对移动终端的支持度不好

首先,传统的表单呈现方式,多针对大屏幕PC电脑显示器开发,因此在这些设备上显示效果好,但是移动终端由于屏幕相对较小,传统表单在移动终端设备上显示效果较差。例如:在PC电脑显示器上全屏显示的一张表单,在通过移动终端访问时,会出现大幅度的滚动条,而拖动滚动条对于移动终端,尤其是手机来说,是很不方便的。因此会降低易用性。

2.表单布局和配置灵活性低

第一,针对不同表单单一开发其数据存储、表单呈现逻辑的方式存在开发工作量大,表单配置更改时修改量大,不易于维护,无法灵活配置表单布局等问题。

第二,针对提供预定义表单布局模版,再通过选定模版来确定表单布局的方式存在布局模版需要预定义,配置灵活度低,预定义模版内容可能与用户实际需求有差距等问题。

3.表单实体数据模型需先在数据库中建立

表单对应的存储数据的数据模型,需要先在数据库中创建。如果表单元素属性变更,数据模型中需要人工修改和维护。



技术实现要素:

本发明的技术任务是针对以上不足之处,提供基于Bootstrap的自定义表单系统,灵活便捷的配置用户需要的表单,其具备配置灵活,同时支持PC电脑和移动终端都能兼容的表单呈现功能。

本发明解决其技术问题所采用的技术方案是:

基于Bootstrap的自定义表单系统,包括:

定义系统提供的表单元素控件,包括表单可视化编辑器,通过灵活的配置信息来定义表单元素控件的类型、数据格式, 表单元素控件配置信息支持灵活的可扩展属性;

表单基础信息和布局配置,以图形化界面和可拖动的组件来完成表单元素控件的选择和拖放,提供实时预览功能,展现表单缩略图;

表单呈现,根据配置的表单元素和布局,正确的显示表单信息,支持在移动终端采用流式布局正确的展现表单信息;

表单的查询结果列表配置,根据表单配置信息,提供该表单查询结果列表中要显示的列及其相关的配置,根据查询结果列表配置信息,生成该表单的查询结果列表;

表单实体数据模型动态创建,根据表单配置信息,动态生成数据模型。

对表单可视化编辑器进行功能区域划分,包括:已配置表单列表区域,可用表单控件列表区域,表单设计区域,表单控件属性配置区域,表单布局实时预览区域;通过设计器,新建表单,并编辑其基础信息;在基础信息保存后,继续选择想要使用的控件并拖放到设计区域,对该控件的相关属性进行个性化配置,该操作可重复进行,直到用户认为表单提供的功能达到预期;期间用户可根据实时预览图,调整控件属性或拖动调整各个控件的显示顺序;待配置好表单布局后,在查询结果列表配置选项卡中配置该表单的查询列表需要显示的列及其个性化配置,如果不配置,则默认显示全部表单元素属性。

对已配置的表单,根据其配置数据,生成该表单的编辑、查询呈现页面模版,其中使用Bootstrap技术对表单布局和查询结果列表进行流式布局控制,从而保证每个表单的呈现页面。

本发明的基于Bootstrap的自定义表单系统和现有技术相比,具有以下有益效果:

配置灵活、便捷,本发明的布局、表单元素的选定及配置均采用可视化配置。只需在可视化设计器中拖动需要使用的控件放置在设计区,并配置该控件的相应属性即可完成配置;可以通过实时预览功能,动态拖动已配置表单元素控件实现表单控件的显示顺序排序,配置十分灵活、方便;

表单元素控件配置扩展性高,系统中提供的可用表单元素控件本身定义了一些常用的属性配置,以满足日常需求,如果在使用中需要增加其他配置,只需在控件配置定义中增加扩展配置属性信息,即可完成,无需再修改代码。因此,本发明有很高的扩展性、灵活性;

对移动终端呈现显示兼容性高,由于引入Bootstrap技术提供的流式布局,本发明配置的表单,不仅在PC电脑端显示效果良好,而且对移动终端的显示效果提供良好的兼容性,从而为移动办公、移动商务等基于移动终端的操作,提供便捷的服务,满足越来越多的用户对移动终端使用的需求;

表单实体数据模型动态生成,维护便捷,维护复杂度低,本发明中配置的表单,在发布后,会自动根据表单配置信息生成实体数据模型,无需在数据库中预先定义数据模型。因此对表单数据模型的日常维护便捷度高、维护复杂度低。

具体实施方式

下面结合具体实施例对本发明作进一步说明。

基于Bootstrap的自定义表单系统,包括:

定义系统提供的表单元素控件,包括表单可视化编辑器,通过灵活的配置信息来定义表单元素控件的类型、数据格式, 表单元素控件配置信息支持灵活的可扩展属性;

表单基础信息和布局配置,以图形化界面和可拖动的组件来完成表单元素控件的选择和拖放,提供实时预览功能,展现表单缩略图;

表单呈现,根据配置的表单元素和布局,正确的显示表单信息,支持在移动终端采用流式布局正确的展现表单信息;

表单的查询结果列表配置,根据表单配置信息,提供该表单查询结果列表中要显示的列及其相关的配置,根据查询结果列表配置信息,生成该表单的查询结果列表;

表单实体数据模型动态创建,根据表单配置信息,动态生成数据模型。

对表单可视化编辑器进行功能区域划分,包括:已配置表单列表区域,可用表单控件列表区域,表单设计区域,表单控件属性配置区域,表单布局实时预览区域;通过设计器,新建表单,并编辑其基础信息;在基础信息保存后,继续选择想要使用的控件并拖放到设计区域,对该控件的相关属性进行个性化配置,该操作可重复进行,直到用户认为表单提供的功能达到预期;期间用户可根据实时预览图,调整控件属性或拖动调整各个控件的显示顺序;待配置好表单布局后,在查询结果列表配置选项卡中配置该表单的查询列表需要显示的列及其个性化配置,如果不配置,则默认显示全部表单元素属性。

对已配置的表单,根据其配置数据,生成该表单的编辑、查询呈现页面模版,其中使用Bootstrap技术对表单布局和查询结果列表进行流式布局控制,从而保证每个表单的呈现页面。

基于Bootstrap的自定义表单系统,

定义可用表单元素控件及其属性;

EasyUI实现对表单可视化设计器布局的呈现,包括已配置表单列表、可用组件列表、设计区域、表单元素组件属性配置区域等功能;

实现拖拽可用组件列表中相应控件放置设计区域,并对该控件属性进行配置和保存的功能;

对设计区域已放置的组件进行拖动排序并保存的功能;

实现在配置表单元素组件时显示实时预览的功能;

实现表单查询结果列表配置功能,方便用户定义需要显示在列表中的属性;

通过Bootstrap、JavaWeb等技术实现对已配置好的表单及其编辑、查询界面进行呈现的功能;

通过Java提供的相关技术,动态生成表单数据模型;

使用本发明来配置的表单,用户可根据自己预期的效果来配置表单布局和表单元素。用户可灵活的控制每个表单元素的各种配置,并根据实时预览效果,方便灵活的调整占用的列数,控件之间的显示顺序等。如果系统提供的表单元素控件中需要增加额外的配置项,只需在该控件的扩展配置属性中增加该配置项就能完成,无需额外编写程序来完成。因此本发明的配置灵活性高,易用性高,易于维护。并且由于本发明在表单显示引入了Bootstrap流式布局技术,使得表单显示页面既支持PC电脑端访问,又能为移动终端提供良好的显示效果。因此本发明对终端兼容性高。表单的数据存储模型,由系统动态创建和维护,无需人工修改和维护。

通过上面具体实施方式,所述技术领域的技术人员可容易的实现本发明。但是应当理解,本发明并不限于上述的具体实施方式。在公开的实施方式的基础上,所述技术领域的技术人员可任意组合不同的技术特征,从而实现不同的技术方案。

除说明书所述的技术特征外,均为本专业技术人员的已知技术。

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1