使用silverlight构建一个图形化流程设计器(一)(源代码下载及在线演示)

前言 

•  系统范围
•  系统设计
•  类设计
•  Xml设计
•  美化
•  重构

一、系统范围

在开始之前，先来看一下系统将要完成什么样的功能。具体来说，这样的流程设计器应该具有以下的特点：

•  图形化的方式显示流程
•  支持拖拽创建和修改流程
•  导出图形对应的xml描述文件
•  根据流程xml描述文件显示流程图

注意：本文只将焦点放置在图形的描述上，不涉及流程的各种属性，不过您完全可以在此基础上创建一个包含流程属性设置的应用程序。另外，本文是随着程序的编写进度而撰写的，程序在不断的完善，本文也将不断的修改完善。在这个过程中将随时提供可以运行的程序供下载。

下面的图形具体的显示了系统将要完成的功能：

二、系统设计

从上面的图形来看，我们的系统将包含三个大的对象：

•  活动（activity）：如上图中的 方框图（三角图，圆形图） 对应的对象，这个对象代表工作流中的一个活动。
•  规则（rule）：如上图中的带箭头的直线，这个对象代表了工作流中的规则。
•  设计面板：设计面板是流程图的容器对象。

   系统对象确定以后，再来看一下系统功能描述：

•  新增活动：创建一个活动的实例，并将这个实例添加到设计面板中。
•  新增规则：创建一个规则的实例,并将这个实例添加到设计面板中。
•  拖拽规则实例：规则实例可以被鼠标拖拽，规则实例表现为一个带箭头的直线，可以拖拽直线的开头部分，也可以拖拽直线的结尾部分，或者拖拽直线中间的部分。拖拽开头部分时，直线的开头部分随鼠标变化位置，但结尾部分位置不改变。拖拽结尾部分时，直线的开头部分随鼠标变化位置，但结束部分位置不改变。拖拽中间部分，整条直线随鼠标改变位置。在拖拽开头或者结尾部分，并在某一个活动实例上放开鼠标左键，那么将建立活动和规则的关联关系。
•  拖拽活动实例：活动实例可以被鼠标拖拽，如果这个活动有相关联的规则，那么规则位置也随鼠标变化。
•  支持活动和规则的删除:支持删除活动实例和规则实例，删除活动实例时，同时删除关联的规则实例。
•  根据图形导出xml文件：
•  导入xml文件生成图形：

通过上面的分析，对流程设计器有一个大概的了解，在进入具体的类设计之前还是有几点需要提醒的：

• silverlight和asp.net的运行模型的不同和编制程序时的注意点。
  Silverlight和asp.net都可以使用c#进行编程设计，但他们的运行方式却截然不同。Asp.net中的ｃ#代码是需要您的ｗｅｂ服务器执行的（IIS）后，将执行后的html代码发送到客户端的浏览器，而silverlight中的c#代码却是在客户端的浏览器中运行的。
  对于asp.net页面，您的每一次请求都将实例化一个Page类的对象，你在服务器代码中的C#代码的各种变量都将被重新初始化。但是silverlight不需要发送代码到服务器，而是在本地浏览器中完成了您编写的Ｃ#代码，这种方式更类似于传统的VB或者VC编写的c/s架构的程序。
• 正是基于以上的理解，我们把silverlight看作是c/s架构的编程方式，所以可以进行上面的各种类的设计。这样使用c/s编程方式编写一个流程设计器，通过silverlight技术，最终可以通过浏览器来给客户使用。对客户而言，这是一个b/s架构的程序，而对于程序员来说，其实是c/s架构的。

下面将进入具体的类的设计，并提供一个可运行的程序。待续。。。。。。

（本文由控件中国网转载）