自定义动态表单
整体描述：通过XML配置完成表单及表单控件的定义、通过对XML的解析完成表单及表单控件的展示、表单的验证控制、表单数据的加载、表单相关操作的接口设计，实现动态表单。
动态表单组件为独立的开发工具包，详细需求分析如下：
1、表单分类
对创建的表单进行分类，分类包括分类编码（固定位数的数字字符串编码）和分类名称，至少支持三级分类。
可以对表单分类进行编辑、排序和删除，分类下存在表单的不能删除。
建议和流程分类、办事项分类合并或共用同一个分类体系。
2、表单管理
完成一个新表单的设计，包括表单ID（UUID）、表单名称（中文）、表单标识（英文）、所在分类、表单类型、模板视图（对应的）、表单版本、表单XML配置文件等；
表单类型包括普通表单、表格表单、模板表单三种；
表单可以进行升级，升级后的表单版本增加一个新版本，老的版本自动禁用，如果老的版本没有使用过时，将自动删除，升级需要记录更新日志。
老版本的表单禁用后不能启用，最新版本可以进行禁用和启用。
表单可以进行删除，已经使用的表单不能被删除。
3、表单配置
在表单配置中需要完成对表单中的数据项进行配置，数据项包含需要填写的、展示的、隐式关联的所有数据项目，进行中文名称和英文标识的定义。
4、表单设计
表单设计由表单设计器导入表单数据生成表单XML配置文件，XML配置文件的版本依据当前最新的表单视图解析器版本。
表单设计器建议采用桌面应用程序开发，生成XML配置文件。桌面应用程序采用C#.net开发，表单解析采用XSL解析（要区分版本）实现。
5、表单应用
在表单应用中可以查询每一个表单应用的办事项列表，点击办事项名称可以链接至办事项的应用情况分析报表。



表单管理在系统管理后台分为5个子栏目：

l 添加新表单：添加一个新的表单；

l 表单管理：通过分类检索，完成表单的应用情况链接、信息编辑、配置设计、升级、禁用启用、删除等；

l 表单分类管理：完成表单的分类管理；

l 表单控件信息：查看表单可用的所有控件相关信息；

l 更新日志：了解表单的版本变化、查看表单的升级日志信息。



涉及的表单基础数据表设计：

1、表单分类表（Sys_FormType）

分类编码、上级编码、分类名称、排序码等；

2、表单基本信息表（Sys_Form）

表单ID（UUID）、表单所属分类（对应分类表的分类编码）、表单名称（中文描述）、表单标识（英文）、表单当前版本（和表单解析器的版本保持一致）、添加人、添加时间、禁用启用状态等；

3、表单扩展信息表（Sys_FormInfo）

表单ID、表单版本、表单类型（0-普通表单、1-表格表单、2-模板表单）、模板视图（对应的模板文件地址）、配置信息（存储XML数据）、添加人、添加时间等；

4、表单控件表（Sys_FormControl）

控件编码（两位数字编码）、控件标识（英文）、控件名称、默认格式化函数、默认宽度、默认高度、默认值、默认控件样式（JSON字符串）、默认控件属性（JSON字符串）、默认控件事件（JSON字符串）、默认验证条件（JSON字符串）、默认辅助信息（JSON字符串）等；

5、表单配置信息表（Sys_FormControls）

表单ID、表单版本、控件序号（流水数字）、控件标识、控件ID、控件NAME、控件标题、是否允许为空、是否只读、备注信息、格式化函数、宽度、高度、最大输入字符数、默认值、数据源、数据字段、自定义控件样式（JSON字符串）、自定义控件属性（JSON字符串）、自定义控件事件（JSON字符串）、验证条件（JSON字符串）、自定义辅助信息（JSON字符串）等；



系统内置的解析器：

1、表单解析器

根据对应版本的表单的“模板试图”结合表单类型、控件组解析代码获取表单HTML代码；

2、控件解析器

根据控件的基本信息、配置信息，获取控件属性、样式、事件代码，结合辅助信息的解析代码和验证要求，获取控件的HTML代码、验证脚本代码；

3、控件验证脚本解析器

根据控件配置的验证枚举类型，获取控件的验证脚本代码；

4、控件辅助解析器

主要包括控件事件、控件属性、控件样式、格式化、辅助信息的解析，解析生成的结果用于对应的控件解析。

5、数据源解析器

根据配置的数据源生成数据集，用于对应的控件解析。

目录

目录

Activiti表单

手册对表单的阐述

生成动态表单的步骤

动态表单的定义

示例说明

获取启动事件上定义的动态表单

根据动态表单定义前端渲染（开发人员自己写代码）

获取待办任务

待办任务列表

获取UserTask上定义的动态表单

任务办理页面

总结

Activiti表单

动态表单
	
外置表单
	
普通表单
其中动态表单和外置表单是是Activiti提供的表单机制。

官方手册对表单的阐述

流程由流程参数驱动，Activiti支持复杂的对象（实现serializable接口），JPA实体，XML文档作为流程参数，上述三类参数在Activiti中以字符串的形式存储。

动态表单生成步骤

流程启动和UserTask任务需要用户参与，用户与流程的交互通过表单来实现。Activiti对外暴露“表单属性定义集合”，使得任何一种前端技术都能基于“表单属性定义集合”来动态生成表单，步骤如下：

在开始事件和UserTask元素上定义表单元素
	
通过activiti提供的API获取表单元素定义
	
前端动态生成表单（需要开发人员自己写代码实现）
获取开始事件上的表单数据：StartFormData FormService.getStartFormData(String processDefinitionId) 
获取任务元素上的表单数据：TaskFormdata FormService.getTaskFormData(String taskId)

动态表单中元素的定义

Activiti表单元素的字段

public interface FormProperty extends Serializable {

    public String getId();

    public String getName();

    public FormType getType();

    public String getValue();

    public boolean isReadable();

    public boolean isWritable();

    public boolean isRequired();
}

示例说明



动态表单依附于开始事件或UserTask元素，我们设计一个简单的请假审批流程，为开始事件和UserTask定义动态表单。

 



以reason为例。

1.在Expression和variable未定义的情况下，activiti会将流程参数reason的值作为该表单元素的值。

2.若定义variable为myReason，activiti会将流程参数myReason的值作为该表单元素的值。

3.若定义variable为#{mo.reason}，activiti会将流程参数mo中reason属性值的为该表单元素的值。

获取启动流程上定义的动态表单

    @RequestMapping(value = "/start/{procDefId}", method = RequestMethod.GET)
    public String start_page(@PathVariable("procDefId") String procDefId, Model model) {
        StartFormData startFormData = formService.getStartFormData(procDefId);
        List<FormProperty> formProperties = startFormData.getFormProperties();
        ProcessDefinition pd = startFormData.getProcessDefinition();
        model.addAttribute("list", formProperties);
        model.addAttribute("pd", pd);
        return "process/start_page";
    }

根据动态表单定义前端渲染（开发人员自己写代码）

 <form  method="post" action="<%=request.getContextPath()%>/process/start"> 
            <input type="hidden" name="procDefId" value="${procDefId}"/>
            <input type="hidden" name="data"  id="data"/>
            <div class="row form-group">
                <div class="col-md-1 align-right">事项名称</div>
                <div class="col-md-7">
                    <input  type="text"  name="procName" value="${proc.name}" 
                            class="width-100 form-control"  />
                </div>

            </div>
            <c:forEach items="${list}" var="prop">
                <!--设置隐藏域，统一处理-->
                <div class="row form-group">
                    <div class="col-md-1 align-right">${prop.name}</div>
                    <div class="col-md-7">
                        <c:choose>
                            <c:when test="${prop.type.name=='string'}">
                                <input  type="text" id="${prop.id}" name="${prop.id}" value="${prop.value}" 
                                        class="width-100 form-control"  />
                            </c:when>
                            <c:when test="${prop.type.name=='date'}">
                                <div class="input-group">
                                    <input  type="text" id="${prop.id}"  name="${prop.id}" value="${prop.value}"  
                                            class="width-100 form-control date-picker-o"  data-date-format="${prop.type.getInformation('datePattern')}"/>

                                    <span class="input-group-addon">
                                        <i class="fa fa-calendar bigger-110"></i>
                                    </span>
                                </div>

                            </c:when>
                            <c:when test="${prop.type.name=='enum'}">
                                <select id="${prop.id}" name="${prop.id}">
                                    <option value="-1">----请选择---</option>
                                    <c:forEach  items="${prop.type.getInformation('values')}" var="item">
                                        <option value="${item.key}">${item.value}</option>
                                    </c:forEach>
                                </select>
                            </c:when>

                            <c:when test="${prop.type.name=='boolean'}">
                                <input  type="checkbox" id="${prop.id}" name="${prop.id}" value="${prop.value}" />
                            </c:when>
                        </c:choose>

                    </div>
                </div>
            </c:forEach>
            <div class="row form-group align-right col-md-8">
                <button class="btn btn-primary" id="startBtn">启动流程</button>
            </div>
        </form>

做过web开发的同学一定都清楚，表单和后台的传值是依靠表单的name属性，那么会产生一个问题，不同的表单表单元素不同，难道要为每一个动态表单写一个后台接口吗？

答案是：不必要，若每个动态表单都写一个后台接口，则失去了动态表单存在的意义。这意味需要我们做统一化处理，即前台将表单中元素的取值使用一个参数传入到后台，后台使用一个参数来接收。

我的做法是在表单中设置一个隐藏域，在点击启动流程按钮的时候，将表单序列化后的取值赋值给该隐藏域，后台做统一的处理。



表单效果（前端使用了bootstarp框架）





 

获取待办任务

 



待办任务列表



获取UserTask上定义的动态表单

    @RequestMapping("/task/{taskId}")
    public String taskPage(@PathVariable("taskId") String taskId, Model model) {
        Task task = this.taskService.createTaskQuery().taskId(taskId).singleResult();
        String processInstanceId = task.getProcessInstanceId();
        TaskFormData taskFormData = this.formService.getTaskFormData(taskId);
        ProcessInstance pi = this.runtimeService.createProcessInstanceQuery().processInstanceId(processInstanceId).singleResult();
        List<FormProperty> list = taskFormData.getFormProperties();
        model.addAttribute("list", list);
        model.addAttribute("task", task);
        model.addAttribute("pi", pi);
        return "process/task_page";
    }

表单元素的值是对应的流程参数的值。表单元素的值是对应的流程参数的值。表单元素的值是对应的流程参数的值。--重要的话说三遍。

任务办理页面

表单依然需要动态生成，并且根据表单元素的属性进行控制（本文是将启动流程表单页面和UserTask动态表单页面分开的，有兴趣的也可以合并为一个页面，控制逻辑要复杂一些）。

 



需要说明，禁用的控件没有设置name属性，因此流程参数不会重复赋值



 

总结

动态表单适用于简单的逐级审批的流程，业务数据存储在参数表中驱动流程的运行，不需要用户自定义业务表，方便的同时也意味着无法处理复杂的流程。

 

 

 

 

 

 

 

一.动态表单背景
在企业级开发中，我们会根据业务情况设计表单，每个业务表单建一张物理表，随着后期业务需求变更，导致物理表不断膨胀，如果项目已上线，修改物理表后，可能造成程序问题。
场景一： 最初工作流软件表单功能相对比较落后，每一个表单制作都要代码去写，但这种方式不能满足企业变化的需求。
场景二： OA系统，基本上采用表单+流程就可以实现，然而大量的表单和表单的易变动性，对于开发人员维护时非常痛苦的。比如：许多公文在多部门直接传递审批，不同的公文有不同的要求，内容与格式，这时候就适合使用动态表单。
场景三： 简单企业网站，用内容管理系统cms建设，有点资源浪费。
目的：动态表单，可以灵活配置并扩展业务、避免在系统中硬编码的数据采集及处理表单，提高系统的可维护性。动态表单，使开发人员把注意力集中在业务流程上，同时，也可以让系统操作人员参与表单的管理。
二.动态表单定义
动态表单分为两部分：一部分动态表单的定义和显示，另一部分动态表单内容的接收和存储
本质：相当于一个数据库
三.动态表单设计思路
1.利用横向表纵向存储的思路，即一张表保存表单的定义信息(分组)，一张表保存表单的字段配置信息(分组字段)，这样做可以灵活扩展表单(后期如果添加一个字段，只需要往表里插入一条数据即可)。
2.利用mongodb数据库对表单数据内容存储。(不足之处，数据统计功能弱)

当表单类的属性个数和类型不能确定的时候, 就可以使用动态表单来解决
普通表单和动态表单的区别:
1. 普通表单ActionForm, 首先要定义一个这样的类, 然后配置到struts-config.xml中
2. 动态表单完全依赖于反射机制, 所以不需要创建表单类, 直接在struts-config.xml中配置即可.
项目结构:
index.jsp:
web.xml:
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
action
org.apache.struts.action.ActionServlet
config
/WEB-INF/struts-config.xml
action
*.do
struts-config.xml:
/p>
"-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"
"http://struts.apache.org/dtds/struts-config_1_3.dtd">
parameter="flag" type="com.itcast.struts1.action.RegisterAction">
register.jsp:
用户注册
u: 
p: 
e: 
t: 
RegisterAction.java:
public class RegisterAction extends DispatchAction {
public ActionForward register(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws Exception {
DynaActionForm dynaActionForm = (DynaActionForm) form;
String username = (String) dynaActionForm.get("username");
String password = (String) dynaActionForm.get("password");
String email = (String) dynaActionForm.get("email");
// 动态表单的意思是可以在这里动态添加属性
String telephone = (String) dynaActionForm.get("telephone");
System.out.println("username: " + username + " | "
+ "password: " + password + " | "
+ "email: " + email
+ "telephone: " + telephone);
return mapping.findForward("registerOk");
}
}
registerOk.jsp:
恭喜您! 注册成功!
测试: