基于miniui的Activiti的 流程表单的自定义设计

一、Miniui表单的概述

 

       Miniui是一套基于jquery中比较优秀的前端框架，本人在不少项目上用过EXTJS,EasyUI,QUI等。对于一些UI团队不怎么强的软件公司或开发团队，在项目开发过程中，没有好的UI工程师配合，开发出来的项目或产品均面临一个界面不友好，前端代码开发混乱，重构成本高，后续维护成本高等问题，这使得产品更迭一段时间就夭折情况成为普遍现象。Miniui的前端代码写得非常简洁，对开发人员要求也低，甚至者只需要能写前端Html及EL的工程师即可。它有以下优点：

1．  代码简洁

2．  API丰富

3．  相对Eextjs，Js库体积小

4．  组件丰富

5．  与其他jquery插件结合使用容易

 

Miniui目前是商业版本，需要购买授权费用。官方网www.miniui.com

 

二、如何实现Miniui在线表单的设计

 

在实现miniui的表单设计之前，我们先说明一下miniui的表单展示的模式：

 

1． 浏览器下载Mini ui的元素配置(html)

2． 加载miniui的js库及css

3． 替换原来的页面配置中的miniui的元素配置，并且生成miniui的控件对象并加载数据进行渲染。

 

如下代码，可渲染出以下功能：

 

 

<input id="select2" class="mini-treeselect" url="../data/listTree.txt" multiSelect="false"  valueFromSelect="false" textField="text" valueField="id" parentField="pid" value="control"  allowInput="true" showRadioButton="true" showFolderCheckBox="false"

 渲染后的效果：

 

 因此只需要在线设计工具类，设计及生成以上的html代码，再交给miniui进行渲染即可。

 

目前市场上流行的富文本编辑器均都在线生成Html,如Ckeditor,Ueditor等，但效果做得比较好并且文档比较完善的是Uditor,毕竟有百度的开发人员在维护及开发。

 

那么如何实现在Uditor上自定义控件?以下以生成一个下拉控件为例，首先看如何生成

首先为控件提供属性配置页面，如下：

 

通过该页面生成以下html代码片段，然后插入至编辑器对应的Html源码中，预览其结果即如下：

 

 

生成的html代码：

<input name="reqHoliday" class="mini-combobox" plugins="mini-combobox" style="" label="下拦类型" required="true" pagesize="10" value="出差" mwidth="0" mheight="0" data="[{'key':'休假','name':'休假'},{'key':'出差','name':'出差'},{'key':'请假','name':'请假'}]" textfield="name" valuefield="key"/>

 

以上Input的属性就是在编辑器的属性中生成出来的，如何实现在ueditor中自定义表单控件，请参考前一篇博文，http://redxun.iteye.com/blog/2238211

 

目前JSAAS平台中支持的已经支持多种MINIUI控件，如下：

 

预览的效果：

 

后续更多的其他控件的扩展，之前的博客进行扩展即可。

 

三、Miniui表单的数据存储

 

生成业务表单后，其数据存储是需要特别处理的，这在miniui中已经有好的解决办法，就是采用Json的数据存储，要求我们每个控件都需要有一个标识键，调用miniui的表单时，即可以通过form.getData()即可以拿到有效的json值。

 

Json的属性值可转成元数据，作为流程引擎中的变量使用，以支持后续的流程引擎表单、外部接口的调用等。

 

另外需要说明一下，流程在很多情况下若不需要展示的表单时，可通过Json对象映射到业务实体中，然后把该业务实体关联至流程实例中进行任务跳转即可。

 

四、在流程引擎中挂接的流程表单

 

流程引擎中需要用到的表单主要是在人工任务节点上，因此我们提出以下几点的审批配置处理:

1．流程定义中全局表业务表单，以使得用户可以不需要每个任务设置相同的表单

2．人工任务上可以设置单独的业务表单

 

业务表单主要是挂接在流程节点上，以方便展示，因此我们的表的设计如下所示：

 在界面的配置方式如下：

 
 表单绑定后，在任务审批过程中如：

 

 

具体的实现效果请参考流以下：

http://www.redxun.cn:8020/saweb/login.jsp