用VML开发工作流设计器

工作流是许多系统中必备的一种功能，而工作流设计器就显示对用户很重要。可视化的设计器对于客户来说就更好了，非常直观，有效果的减少用户的烦脑。

在各种应用中有b/s的系统，有c/s的系统。不同的系统工作流程都是相似的。当今web应用日益广泛，因此本文将讲述如何在web上实现工作流设计器。

制作过程。

由于本人的经验所限，所选技术只在微软路线上。经过查阅资料，发现web上的图形表现形式有svg，vml等等。之所以选择vml是因为它靠浏览器IE就可以完全支持，不用安装插件，SVG就要安装插件。虽然从一些文章说的，VML已经过时，查看文档大部分是1999年的，但VML作为一种技术，感觉还是成熟的。后来还是选择了VML。

在web上作设计器，图形有了，剩下的就是控制这些图形元素。工作流程有两种基本元素一种我们称之为节点，一点称之为关系（节点间的关系）也就是工作流的流向问题。下面为两种基本形状。

要控制图形，因为VML是一种标记语言，符合基本HTML标记的规范，所有能控制HTML的都可以用来控制VML标记对象。

要实现工作流设计器有几个要点：

1、支持工作流元素的添加、删除、移动。

2、建立节点间的关系

3、将设计好的流程保存到永久物质里（如文件，数据库等）

4、可以从永久数据里读取数据，并表现为图形。

第一点：比较好完成，网络上有较多的脚本控制图形的拖动。

第二点呢，我们采用拖动某个节点的尖头，并绘制线段，当鼠标弹起时，查看当前鼠标下的结象，绘制关系。

数据存储为了方便应用，我们使用XML文件存储（当然，在写这篇文章时，已经完成了数据库的存储，XML只是为了演示方便而作。）数据库的数据与XML的转化可以使用XSD来完成。

为了将XML数据表现为VML标记，我们采用了习惯的作法，XSL可扩展样式，将XML表现为VML标记。

将设计好的图形，保存为数据，我们采用在客户端形成XML数据，传到服务器端。在写文章时，还未完全实现。工作还在继续，也许明天或后天能全部完成。

现在我们先来看一下作好的工作流设计器的样式：

演示地址位于：

左边为设计器，右边为工具栏。

可从右边工作栏增加节点，并通过拖动节点间而增加关系。

新增的节点未指定部门，可以点键菜单来指定部门。

源文件已经在文章中打包了，以供下载。

相关文件描述如下：

Control.js 控制图形的脚本

Designer.ascx 用于设计器的控件

EditDepartment.aspx 选择部门的页面

Flow.xsd 工作流原始数据样式

WorkFlow.xsd 转换后的数据格式

WorkFlow.xslt 将XML转为VML的样式表

WorkFlowBLL.cs 业务逻辑层，包含两种数据的转换格式以及从数据中设计工作流位置信息的初始值

WorkFlowDAL.cs 数据访问类，用于从数据库中提取数据。

WorkFlowData.xml 用于演示的XML数据源

WorkFlowDesign.aspx 设计器的承载页面。

如果各位有什么好的意见和建议可以论坛发表，有什么问题也可以提。

我去吃饭了，改天聊。