VML工作流设计器

VML工作流设计器

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

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

演示地址位于：http://www.erist.com/demo/VMLWorkFlow/WorkFlowDesign.aspx

 

  由于本人的经验所限，所选技术只在微软路线上。经过查阅资料，发现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 设计器的承载页面。

下面介绍一个整个VML的工作流程：

一、显示工作流

大致的工作流程：WorkFlowDAL类从数据库中提取数据，不过这里数据暂存在XML文件里，实际此类未用到。接着是传到WorkFlowBLL类中，它将数据转换为XMLDocument文档。生成XMLDocument是从一个强类型数据集实例化的。

此强类型数据集从相应的XML文件中读取数据暂存到DataSet中，再执行从一个DataSet到另一个DataSet形式的对应。对应为简单的数据模型 Item 和Item 的Relation.

XML数据中保存着工作流节点的位置，名称和其它相应信息，以及先后的顺序。

转换后，转换为单个节点和他们之间的关系。这里转换只是为了适应公司原有数据需要，其它可以在XML或数据库中直接存储Item和Item之间的Relation.

接下来到了界面。

首先我们要知道在页面控件Designer有一控件XML类型用来执行从XML数据到HTML的转换，使用的是XSLT转换，可以将数据转换为可视化的VML代码。转换的对应关系是靠XSLT文件里的对应值。

转换为VML代码后，就要靠脚本进行重新定位，脚本定位比较麻烦，主要原理是控制图形的位置，首先从开始节点，再就是控制线段。脚本可以自己慢慢思考，在这里不细致的讲了。

二、设计工作流

设计时全靠脚本进行，主要是对节点移动，相应重新控制线段的位置。

三、保存工作流

首先在上面的设计工作流时，点击保存按钮，此时将数据暂存于一个HtmlHiden控件中。暂存的数据是一段XML数据。生成的方法是在Designer中的CreateXmlData方法。

之后从服务器端读取控件中的值，将XML数据用DataSet方法保存在XML文件中。

VML.OnlySp.Flow data=new VML.OnlySp.Flow(); System.Xml.XmlDocument doc=new System.Xml.XmlDocument(); doc.LoadXml(XMLData); //doc.Save(System.Web.HttpContext.Current.Request.MapPath("WorkFlowData.xml"));

http://www.erist.com/