【开源项目】Silverlight工作流设计器

【开源项目】Silverlight工作流设计器Silverlight工作流设计器是一款开源项目，支持用户在线设计工作流程，或者项目流程，支持在线拖拽，以及鼠标右键支持。具体来说，这样的流程设计器应该具有以下的特点：图形化的方式显示流程支持拖拽创建和修改流程导出图形对应的xml描述文件根据流程xml描述文件Silverlight工作流设计器是一款开源项目，支持用户在线设计工作流程，或者项目流程，支持在线拖拽，以及鼠标右键支持。具体来说，这样的流程设计器应该具有以下的特点：图形化的方式显示流程支持拖拽创建和修改流程导出图形对应的xml描述文件根据流程xml描述文件显示流程图点击访问本系列专题文章源代码下载数据库下载Silverlight构建图形化工作流程设计器(一)前言Silverlight发布已经很久了，具体是什么就不多说，大家一定很清楚。最关心的就是其中的跨浏览器能力，以及强大的用户界面表现能力。于是决定使用它来实现一个流程设计工具，以替代以前的流程设计器（原来是用vml实现，只能在IE浏览器上工作），因为第一次接触silverlight，在学习、工作的过程中肯定会遇到很多的问题前言Silverlight发布已经很久了，具体是什么就不多说，大家一定很清楚。最关心的就是其中的跨浏览器能力，以及强大的用户界面表现能力。于是决定使用它来实现一个流程设计工具，以替代以前的流程设计器（原来是用vml实现，只能在IE浏览器上工作），因为第一次接触silverlight，在学习、工作的过程中肯定会遇到很多的问题，将这个学习新知识、解决问题的过程记录下来，肯定能找到许多志同道合的朋友，也请大家抱着这种态度阅读本文。本文主要讲述使用vs.net2008开发一个基于silverlight的流程设计器。在进入正文之前，先说一下开发环境的配置。使用vs.net2008作为开发工具，需要下载一个Silverlighttoolsforvirsualstudio2008sp1，地址在，安装后就可以使用vs.net2008来开发silverlight应用了。本系列文章包含以下几部分（可能有变）。系统范围系统设计类设计Xml设计美化重构一、系统范围在开始之前，先来看一下系统将要完成什么样的功能。具体来说，这样的流程设计器应该具有以下的特点：图形化的方式显示流程支持拖拽创建和修改流程导出图形对应的xml描述文件根据流程xml描述文件显示流程图注意：本文只将焦点放置在图形的描述上，不涉及流程的各种属性，不过您完全可以在此基础上创建一个包含流程属性设置的应用程序。另外，本文是随着程序的编写进度而撰写的，程序在不断的完善，本文也将不断的修改完善。在这个过程中将随时提供可以运行的程序供下载。下面的图形具体的显示了系统将要完成的功能：二、系统设计从上面的图形来看，我们的系统将包含三个大的对象：活动（activity）：如上图中的方框图（三角图，圆形图）对应的对象，这个对象代表工作流中的一个活动。规则（rule）：如上图中的带箭头的直线，二、系统设计从上面的图形来看，我们的系统将包含三个大的对象：活动（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架构的。下面将进入具体的类的设计，并提供一个可运行的程序。Silverlight构建图形化工作流程设计器(二)三、类的设计在进行类设计之前，先说一下silverlight中使用怎么表示上面描述的类。在silverlight可以使用用户控件（silverlightusercontro）来描述各种具有用户界面的类，如上文所讲的活动类，规则类。操作很简单，在vs.net2008中增加一个新的silverlightuserc三、类的设计在进行类设计之前，先说一下silverlight中使用怎么表示上面描述的类。在silverlight可以使用用户控件（silverlightusercontro）来描述各种具有用户界面的类，如上文所讲的活动类，规则类。操作很简单，在vs.net2008中增加一个新的silverlightusercontro就可以了。其实是一个xaml文件。在xaml文件中布局用户界面，在对应的xam.cs文件中编写后台方法即可。需要说一下的是,在进行鼠标拖动活动或者规则移动时，规则和活动的动态定位使用的是相对于容器来的相对位置，也就是使用Canvas.Top和Canvas.Left属性进行定位。还有一点需要说明的就是，对于活动和规则的关联有几点需要注意。一个规则可以关联到两个不同的活动，一个为起始活动（起始端点关联）。一个为终结活动（终结端点关联）规则的起始活动和终结活动不能为同一个活动。任何两个规则，他们的起始活动和终结活动不能相同，也就是说在不同的两个活动之间，不能有重复的规则关联。3.1活动类的设计(Activity)活动代表工作流中的一个活动节点，在流程图上表现为一个方框图，可以被拖拽，可以关联到一个规则的开始或者结束。3.1.1Xam下面的代码表示了活动类的外观UserControx:Class=Shareidea.Web.UI.Contro.Workflow.Designer.Activityxmlns=:x==UserContro_MouseLeftButtonDownMouseLeftButtonUp=UserContro_MouseLeftButtonUpMouseMove=UserContro_MouseMoveMouseEnter=UserContro_MouseEnterMouseLeave=UserContro_MouseLeaveWidth=100Height=60CanvasName=containerRectangleHorizontalAlignment=StretchVerticalAlignment=StretchFil=Green/BorderCornerRadius=10Background=GreenOpacity=0.9Width=100Height=60TextBoxName=TitleText=新建活动BorderBrush=GreenFontSize=12Background=GreenHeight=30Width=60MouseEnter=TextBox_MouseEnter/TextBox/BorderHyperlinkButtonCanvas.ZIndex=10000Padding=10555MouseLeave=HyperlinkButton_MouseLeaveForeground=RedWidth=65Height=25Canvas.Top=50Canvas.Left=100Background=YellowName=btnDeleteClick=HyperlinkButton_ClickClickMode=ReleaseContent=删除活动/HyperlinkButton/Canvas/UserContro从上面代码可以看出，活动类主要包含一个矩形的图形，还有一个删除按钮。图形显示如下：3.12后台代码活动类主要实现主要动作（函数）鼠标拖拽删除关联到规则(增加，删除)输出活动xml描述导入xml描述还有一些主要属性：活动标示（ID）活动名称（Name）所有关联的规则的集合以及一些主要的事件：移动删除具体代码不再贴出，大家可以下载源代码运行。一个规则从图形上被分成三个部分，起始端点（白色），中间线段，终结端点（黑色）（在实际环境中，应该整体表现为一个带箭头的线段，为了便于描述，先这样表示，在后面的美化部分将作修改）。这三个部分都可以被鼠标拖动，当拖动起始端点时，起始端点随着鼠标变化而变化位置，终结端点不动，中间线段根据起始端点和终结端点计算位置。拖动终结端点类似于拖动起始端点。当拖动中间线段时，整个规则图形（包括起始端点，中间线段，终结端点）随着鼠标移动而移动。另外一个需要仔细考虑的是，当拖动规则，并且将端点移动到活动上时，进行规则和活动关联的时机。有以下几个时机可以考虑：拖动规则进入活动范围。（活动的MouseEnter事件）拖动规则结束后，放开鼠标。对于第一种情况，当拖动规则并且进入互动范围时，无法触发活动的MouseEnter事件。暂时无法解决。（但是在放开鼠标，并且在活动上移动时，此时触发MouseEnter事件。但是这样做会存在某些特定的bug）。因此使用第二种方法进行关联，也就是在规则的MouseLeftButtonUp事件中遍历当前所有的活动，检查规则是否处于活动的范围内，如果在，那么就进行关联。3.2.1xaml下面的代码描述了规则类的xaml1UserControx:Class=Shareidea.Web.UI.Contro.Workflow.Designer.Rule2xmlns=:x==UserContro_MouseEnter5MouseLeave=UserContro_MouseLeave67Canva