互联网技术服务提供商

Web应用在开发可视化表单平台的研究与实现

文章更新时间:作者:金翼致远
文章摘要:针对Web应用在开发过程中具有表单定制繁琐、需求变化频繁、后期维护难度大等问题,提出一种可视化的表单平台,服务于软件开发的全生命周期,做到对需求变更、软件实现的快速响应,实现软件开发过程中的快速开发,同时对表单平台的整体架构、建模设计、流程集成、提出了设计和实现思路。

针对Web应用在开发过程中具有表单定制繁琐、需求变化频繁、后期维护难度大等问题,提出一种可视化的表单平台,服务于软件开发的全生命周期,做到对需求变更、软件实现的快速响应,实现软件开发过程中的快速开发,同时对表单平台的整体架构、建模设计、流程集成、提出了设计和实现思路。

目前,Web系统[1]广泛应用于社会各个行业,尤其是在信息化管理方面,对各个行业的信息管理产生了举足轻重的作用,但是Web应用又因为其自身的特点,存在需求变化频繁,前端界面表单样式、元件布局等修改频繁,占用了大量的软件开发时间,造成项目建设的资源浪费,因此,软件行业迫切需要解决在前端界面的设计、开发、维护上能够缩短工期的问题,实现软件开发中表单快速开发,从而使研发人员的着重点从简单而繁琐的表单界面上解放出来,转到对业务逻辑的具体实现上。

目前,市面上存在着众多表单设计器或快速开发平台等产品,但是往往只是在快速生成、数据库建模等单一的着重点进行考虑,笔者认为一款表单平台不能仅仅满足界面的快速开发的单一功能,还需要在可视化开发、流程集成、扩展性等多个方面进行综合考虑,本文就开发一款可视化表单平台进行详细研究和实现。

1 相关定义

表单平台运行视图.jpg

1.1 表单[2-3]

表单是一个应用系统呈现数据给用户,并实现和用户交互的窗口,因此本文中对所有在Web应用中展示给用户的前端界面统称为表单。在本文中,表单的制作完全是通过平台提供的建模工具,采用的元件拖拽所见即所得的方式来实现,可以方便快捷制作一个表单,并保证所制作表的样式统一。

表单自动生成视图.jpg

1.2 表单元件[3]

在本文中对呈现在表单中的展示内容,例如:单行文本、多行文本、下拉框等统称为表单元件,为了更好的细化和区分,本平台对元件进行分为静态元件和动态元件两大类。

静态元件:仅用于表单装饰、布局,不需要用户输入输出,不存在后台数据库交互的一类元件,例如:线、矩形、圆、静态图片等。

动态元件:需要同后台数据库交互数据,用于数据的展示等功能性元件,例如:单行文本、多行文本、下拉框等。

2 可视化表单平台设计[3-4]

平台总体结构由四部分组成:通用功能组件、原型库、表单互动化定制、流程互动化定制。开发人员或用户通过建模工具完成表单和流程的对象模型定制,定制过程中采用平台提供的通用功能组件,并复用原型库中系统原型。在和用户交流时,模型解析器解析并显示已完成定制的对象模型。其总体结构如图1所示。

平台用户通过访问建模工具,采用“拖拉拽”的方式设计开发业务表单和业务流程,同时生成表单和流程对象模型[3],系统将对象模型发送到后台持久化到数据库中。在需要浏览表单或流程时,触发后台的模型解析器(Java实现)[4],解析器根据数据库中的对象模型结合平台的开发框架(MVC)[5-6]和组件库生成Html/CSS/JS文件[7],最后显示到客户浏览器中。 其运行视图如图2所示。

采用面向对象的思想和方法,将所管理的事物都视为对象,唯种类不同而已。这些对象主要包括:表、表关系、表单、图形等。建模的过程也就是定义这些对象属性的过程,并将所定义的对象属性保存到数据库中。系统运行时通过读取属性数据将对象实例化后展示。

将常见的页面类型(例如:树、表格、单表记录维护表单)做成页面域模板,形成展现视图库,视图库中的模板已经封装好常用功能。在使用时,通过对象模型的属性数据以及页面域的类型,模型解析器引用模板自动生成其页面域的内容,并提供常用功能。表单自动生成视图如图3所示。

业务系统在需求分析、业务设计、原型开发、用户确认四个阶段都可以由用户参与,在此过程中,用户可以随时查看开发原型的功能和界面,指出其中不符合业务需求的地方,也可以亲自设计开发原型。其使用过程视图如图4。

表单平台使用过程视图.jpg

3 平台关键功能设计与实现

3.1可视化表单存储及版本控制

可视化界面编辑器采用VC++进行研发,采用ActiveX控件形式嵌入到业务系统中,此种方式在日常使用大幅度降低环境部署安装复杂度,做到使用者可以在线进行编辑表单。为了实现在线进行及时编辑表单的功能,需要对表单编辑数据的存储及表单的版本控制等关键功能问题研究并解决。

3.1.1 表单模板及运行时数据存储

本平台表单模板内容直接存放在数据库中,此种存储方式的主要原因是:实现表单快速的修改,在无需启停服务的情况实现页面的修改后直接在线试用,达到应用修改的零延时[8]。

针对表单模板及其元件的存储,在设计上主要涉及到两张表,一为表单模板基本信息表,主要为表单的创建信息,表单关联业务表信息,表单版本信息;二为表单的元件编辑信息,主要为表单元件的位置、树形、权限、数据库字段绑定等信息,在此设计中,重点考虑表单元件的共性属性,并提取完备,在可视化界面中进行固化绑定设置,表单元件的位置、大小、样式、运行时存取的元件字段信息均在元件模板表中进行一一存放,为了进行用户级扩展,增加用户自定义信息等维护入口。为后续的表单展示引擎读取提供方便,甚至为以后的系统集成扩展提供便利。

在表单模板设计的基础上,表单平台对业务数据的存取进行自动化设计,即用户编辑表单过程中进行业务数据的数据库存取对应关系设置,并完成平台级的统一管理和维护,通过平台的业务数据表自动生成机制,按照模板信息中的动态元件内容,自动初始化数据库表结构,同时绑定表单同数据库物理表,表单元件同物理表字段的对应关系,极大降低用户进行重复开发运维的难度和复杂度。

3.1.2 表单版本控制

表单编辑的版本控制方法:由于保障表单的在线编辑,同时表单信息直接存储于数据库层,可以直接生效,因此在实际使用中难免会表单编辑中出现操作错误,因此表单编辑必然要求版本可以追溯,表单编辑验证后方能进行发布使用,因此表单编辑信息分为两个类别存储,一为编辑修改过程中的开发版,另一个为编辑发布后的运行版,同时两个版本的编辑前后、发布前后,均保存完整的历史版本,便于历史版本追溯。

表单编辑的并行开发问题:由于表单编辑直接对所有编辑人员开放,在解决了版本控制的基础上需要解决多人同时编辑页面的问题,目前平台采取为抢占式编辑模式,即当前的指定版本仅允许一人编辑,编辑前采取签出操作,锁定为当前人可修改,其他人等待此用户编辑后方能进行二次编辑,此方案可以有效解决在并行开发过程中多人同时修改界面造成的覆盖问题,同时开发过程中任务往往相对清晰,不会对并行研发造成进度缓慢问题。

3.2 流程引擎集成

由于目前的很多业务表单设计平台仅实现了基本的表单设计和展示功能,没有就表单平台和流程引擎平台的集成功能进行设计,造成了目前众多表单平台和流程引擎的集成困难,笔者认为可视化表单平台不仅仅要实现表单的编辑功能,同时应该在流程集成上进行充分考虑,表单同流程集成过程主要涉及两个方面的关键问题,第一是流程实例运行过程中的表单元件权限控制问题,第二是表单元件数据同流程参数映射问题,只有解决了这两个核心问题,才能真正实现表单同流程的集成工作。

流程参数设置流程图.jpg

3.2.1流程集成体系设计

表单同流程集成[9]过程主要集中在表单(流程)建模、表单绑定、权限设置、参数映射、运行控制几个环节。集成的主要环节内容如下:

(1)表单(流程)建模:二者分别按照设定的标准和规范进行数据建模,并实现二者的独立运行。

(2)流程模板同表单模板的业务绑定:主要设置流程中各个业务环节处理过程中的表单展示页面,实现流程实例运行过程中的页面展示[10]。

(3)权限控制设置:设计流程各个业务环节中表单的元件展示权限,包括:可编辑、可读、不可见等。

(4)流程参数映射:设置流程流转过程需要的业务参数变量,并同业务表单元件值进行映射对应,实现表单创建、提交等操作过程中队流程参数的映射、赋值功能。

(5)运行时控制:运行时由流程引擎进行控制表单的访问入口,查询对应的表单文件,并进行表单运行呈现,同时进行表单的权限控制操作。

3.2.2 流程参数映射操作过程

流程实例中的流程参数赋值时机主要在流程创建和提交环节,二者的操作机制是相通的,在流程的创建和提交环节过程中,由表单平台发起操作过程,首先检查流程引擎同表单的参数映射关系,延后统一封装表单中的元件数据为统一格式,提交到流程引擎中,流程引擎接收数据并写入具体的流程参数,完成流程实例运行时的业务判定[11]。流程参数的整个映射操作过程发生流程实例的所有操作(不含流程实例的创建)之前,为流程实例的分支判定等内容提供必要的数据来源,整个操作过程的流程如图5所示。

经过以上映射过程,可以实现流程实例中流程参数的及时赋值和修改,保证流程实例进行必要的分支流转和条件判定。

效果图6.jpg

4 可视化表单平台的实现

按照以上的设计体系和关键技术的研究,笔者实现了J2EE环境下的可视化表单平台的研发工作,该平台是集表单设计建模、权限控制、流程集成、统一展示运行为一体的快速开发平台,极大地解决了目前J2EE环境下软件开发的效率问题,并成功的应用于二十余个中小型项目的建设,为项目建设过程降低了大量研发时间,有效的加快了项目建设进度。

物质采购清单.jpg

可视化表单平台的在快速建模上完全实现所见即所得,研发过程中的表单编辑工作量明显降低,表单建模界面如图6所示。

表单建模之后的流程集成工作亦采用可视化操作风格,并实现流程节点的表单元件控制集成,有效解决了表单元件的权限控制和流程过程权限控制的统一,流程集成操作界面及最终表单运行时显示状态如图7、图8所示。

5 结语

为了解决Web应用在表单界面研发方面的严重不足,本文结合当前Web表单页面展示中的基本原理,在ActiveX控件可视化技术及J2EE环境下给出了可视化表单平台的设计和实现思路。通过实践证明了该表单平台可以在项目生命周期的多个环节提供快速建设保障:

(1)需求阶段:需求讨论中快速搭建原型,进行系统原型确认,原型可以直接保留指导下一步设计研发,需求阶段界面可以直接被研发阶段借鉴使用;

(2)设计阶段:底层技术架构在表单平台上进行落实,设计人员无需担心应用系统的技术架构;

(3)开发阶段:开发人员可以只关注自己负责的业务功能的代码,从前端界面的繁琐、低效的过程解脱出来;

(4)运行阶段:运维人员直接进行系统更新维护,无需启停服务即可实现运行时的更新。


相关文章推荐:

互联网公司传统行业化,要有互联网思维



上一篇: 苹果有关iOS10测试版的推送更新出现的问题 下一篇: 手机支付宝可一键查分推出高考一键查分

推荐阅读: