web工作流管理系统开发之三可视化流程设计器-优快云博客

本文介绍了一种基于HTML+JS+Ajax的可视化流程设计器实现方案，该方案无需客户端安装额外软件，适用于Web工作流管理系统。文章详细阐述了如何通过拖拽操作进行业务流程建模，并讨论了流程定义文件的不同保存方式。

在工作流管理系统中，引擎的所有的活动，驱动，和流转，都是以流程定义为基础而展开的。流程定义文件是流程能运行的先决条件，同时流程定义文件又是工作流引擎的设计基础，引擎必须要能生成，解释和获取到任意流程定义节点的信息。业务流程建模就是将一个具体的业务流程系统用流程定义文件来描述。而生成这个流程定义文件的可视化编辑工具就是流程设计器。

一般来说，只要是足够熟悉流程定义的各个步骤和节点的意义，流程描述文件可以用文本编辑器手动的输入来生成。但是这样做对用户的要求太高了。通常都会采用一个可视化的流程定义工具来实现。

工作流定义工具实现方式：

用java的图形界面包来实现：

生成一个java application，需要在客户端装jre，是c/s的应用，每个使用的客户端必须安装jre，安装这个可视化的编辑工具，这种方式根本不适合web管理系统的发布，每个客户端都需要安装，不理想；

用applet来实现：

这种方案虽然解决了每个使用的客户端安装程序的过程，但还是需要大量下载安装包，下载jre，也不是理想的实现方式。

用html+js+ajax来实现：

无须客户端安装，无须下载jre，只是第一次运行需要下载所有js的脚本，是理想的实现方式。

下面主要谈html+js+ajax的实现方式：
工作流流程定义，必须要图形化的实现流程的建模，使得流程建模变得简单和可操作，用户通过拖、拉、点、拽来实现流程的建模。

通过html和dhtml来实现界面的展示。
通过javascript和xml，dom分析实现动态的修改和编辑节点属性。
通过ajax来实现和后台的交互。
通过vml来实现图形化的操作，画线，画方框，拖动等等。

运用js, dhtml, xml, dom, vml 这些技术足可以将界面的编辑功能做得灵活简便，然后有ajax随时可以取得和后台交互，同时是web网页发布的，可以和应用程序一起集成发布，通过权限控制可以开放给最终端的用户使用。

一般来说流程定义文件的保存可以是保存成文件的形式，也可以保存到数据库的表中，因为采用ajax的方式来设计保存，这两种方式很容易都可以实现。同时通过文件方式的保存和数据库方式的保存，很容易做到流程的上传和下载，真是一举两得。