开源项目Silverlight工作流设计器.docx
- 文档编号:27437106
- 上传时间:2023-07-01
- 格式:DOCX
- 页数:106
- 大小:58.07KB
开源项目Silverlight工作流设计器.docx
《开源项目Silverlight工作流设计器.docx》由会员分享,可在线阅读,更多相关《开源项目Silverlight工作流设计器.docx(106页珍藏版)》请在冰豆网上搜索。
开源项目Silverlight工作流设计器
【开源项目】Silverlight工作流设计器
Silverlight工作流设计器是一款开源项目,支持用户在线设计工作流程,或者项目流程,支持在线拖拽,以及鼠标右键支持。
具体来说,这样的流程设计器应该具有以下的特点:
图形化的方式显示流程支持拖拽创建和修改流程导出图形对应的xml描述文件根据流程xml描述文件
Silverlight工作流设计器是一款开源项目,支持用户在线设计工作流程,或者项目流程,支持在线拖拽,以及鼠标右键支持。
具体来说,这样的流程设计器应该具有以下的特点:
∙?
图形化的方式显示
∙?
支持拖拽创建和修改流程
∙?
导出图形对应的xml描述文件
∙?
根据流程xml描述文件显示流程图
Silverlight构建图形化工作流程设计器
(一)
前言Silverlight发布已经很久了,具体是什么就不多说,大家一定很清楚。
最关心的就是其中的跨浏览器能力,以及强大的用户界面表现能力。
于是决定使用它来实现一个流程设计工具,以替代以前的流程设计器(原来是用vml实现,只能在IE浏览器上工作),因为第一次接触silverlight,在学习、工作的过程中肯定会遇到很多的问题
前言
Silverlight发布已经很久了,具体是什么就不多说,大家一定很清楚。
最关心的就是其中的跨浏览器能力,以及强大的用户界面表现能力。
于是决定使用它来实现一个流程设计工具,以替代以前的流程设计器(原来是用vml实现,只能在IE浏览器上工作),因为第一次接触silverlight,在学习、工作的过程中肯定会遇到很多的问题,将这个学习新知识、解决问题的过程记录下来,肯定能找到许多志同道合的朋友,也请大家抱着这种态度阅读本文。
本文主要讲述使用2008开发一个基于silverlight的流程设计器。
本系列文章包含以下几部分(可能有变)。
系统范围
系统设计
类设计
Xml设计
美化
重构
一、系统范围
在开始之前,先来看一下系统将要完成什么样的功能。
具体来说,这样的流程设计器应该具有以下的特点:
图形化的方式显示流程
支持拖拽创建和修改流程
导出图形对应的xml描述文件
根据流程xml描述文件显示流程图
注意:
本文只将焦点放置在图形的描述上,不涉及流程的各种属性,不过您完全可以在此基础上创建一个包含流程属性设置的应用程序。
另外,本文是随着程序的编写进度而撰写的,程序在不断的完善,本文也将不断的修改完善。
在这个过程中将随时提供可以运行的程序供下载。
下面的图形具体的显示了系统将要完成的功能:
二、系统设计从上面的图形来看,我们的系统将包含三个大的对象:
活动(activity):
如上图中的方框图(三角图,圆形图)对应的对象,这个对象代表工作流中的一个活动。
规则(rule):
如上图中的带箭头的直线,
二、系统设计
从上面的图形来看,我们的系统将包含三个大的对象:
活动(activity):
如上图中的方框图(三角图,圆形图)对应的对象,这个对象代表工作流中的一个活动。
规则(rule):
如上图中的带箭头的直线,这个对象代表了工作流中的规则。
设计面板:
设计面板是流程图的容器对象。
系统对象确定以后,再来看一下系统功能描述:
新增活动:
创建一个活动的实例,并将这个实例添加到设计面板中。
新增规则:
创建一个规则的实例,并将这个实例添加到设计面板中。
拖拽规则实例:
规则实例可以被鼠标拖拽,规则实例表现为一个带箭头的直线,可以拖拽直线的开头部分,也可以拖拽直线的结尾部分,或者拖拽直线中间的部分。
拖拽开头部分时,直线的开头部分随鼠标变化位置,但结尾部分位置不改变。
拖拽结尾部分时,直线的开头部分随鼠标变化位置,但结束部分位置不改变。
拖拽中间部分,整条直线随鼠标改变位置。
在拖拽开头或者结尾部分,并在某一个活动实例上放开鼠标左键,那么将建立活动和规则的关联关系。
拖拽活动实例:
活动实例可以被鼠标拖拽,如果这个活动有相关联的规则,那么规则位置也随鼠标变化。
支持活动和规则的删除:
支持删除活动实例和规则实例,删除活动实例时,同时删除关联的规则实例。
根据图形导出xml文件:
导入xml文件生成图形:
通过上面的分析,对流程设计器有一个大概的了解,在进入具体的类设计之前还是有几点需要提醒的:
silverlight和的运行模型的不同和编制程序时的注意点。
Silverlight和都可以使用c#进行编程设计,但他们的运行方式却截然不同。
A中的c#代码是需要您的web服务器执行的(IIS)后,将执行后的html代码发送到客户端的浏览器,而silverlight中的c#代码却是在客户端的浏览器中运行的。
对于页面,您的每一次请求都将实例化一个Page类的对象,你在服务器代码中的C#代码的各种变量都将被重新初始化。
但是silverlight不需要发送代码到服务器,而是在本地浏览器中完成了您编写的C#代码,这种方式更类似于传统的VB或者VC编写的c/s架构的程序。
正是基于以上的理解,我们把silverlight看作是c/s架构的编程方式,所以可以进行上面的各种类的设计。
这样使用c/s编程方式编写一个流程设计器,通过silverlight技术,最终可以通过浏览器来给客户使用。
对客户而言,这是一个b/s架构的程序,而对于程序员来说,其实是c/s架构的。
下面将进入具体的类的设计,并提供一个可运行的程序。
Silverlight构建图形化工作流程设计器
(二)
三、类的设计在进行类设计之前,先说一下silverlight中使用怎么表示上面描述的类。
在silverlight可以使用用户控件(silverlightusercontro)来描述各种具有用户界面的类,如上文所讲的活动类,规则类。
操作很简单,在2008中增加一个新的silverlightuserc
三、类的设计
在进行类设计之前,先说一下silverlight中使用怎么表示上面描述的类。
在silverlight可以使用用户控件(silverlightusercontro)来描述各种具有用户界面的类,如上文所讲的活动类,规则类。
操作很简单,在2008中增加一个新的silverlightusercontro就可以了。
其实是一个xaml文件。
在xaml文件中布局用户界面,在对应的xam.cs文件中编写后台方法即可。
需要说一下的是,在进行鼠标拖动活动或者规则移动时,规则和活动的动态定位使用的是相对于容器来的相对位置,也就是使用Canvas.Top和Canvas.Left属性进行定位。
还有一点需要说明的就是,对于活动和规则的关联有几点需要注意。
一个规则可以关联到两个不同的活动,一个为起始活动(起始端点关联)。
一个为终结活动(终结端点关联)
规则的起始活动和终结活动不能为同一个活动。
任何两个规则,他们的起始活动和终结活动不能相同,也就是说在不同的两个活动之间,不能有重复的规则关联。
3.1活动类的设计(Activity)
活动代表工作流中的一个活动节点,在流程图上表现为一个方框图,可以被拖拽,可以关联到一个规则的开始或者结束。
3.1.1Xam
下面的代码表示了活动类的外观
MouseLeftButtonDown="UserContro_MouseLeftButtonDown"
MouseLeftButtonUp="UserContro_MouseLeftButtonUp"
MouseMove="UserContro_MouseMove"
MouseEnter="UserContro_MouseEnter"
MouseLeave="UserContro_MouseLeave"
Width="100"Height="60">
Height="30" Width="60"MouseEnter="TextBox_MouseEnter"> 从上面代码可以看出,活动类主要包含一个矩形的图形,还有一个删除按钮。 图形显示如下: 3.12后台代码 活动类主要实现主要动作(函数) 鼠标拖拽 删除 关联到规则(增加,删除) 输出活动xml描述 导入xml描述 还有一些主要属性: 活动标示(ID) 活动名称(Name) 所有关联的规则的集合 以及一些主要的事件: 移动 删除 具体代码不再贴出,大家可以下载源代码运行。 一个规则从图形上被分成三个部分,起始端点(白色),中间线段,终结端点(黑色)(在实际环境中,应该整体表现为一个带箭头的线段,为了便于描述,先这样表示,在后面的美化部分将作修改)。 这三个部分都可以被鼠标拖动,当拖动起始端点时,起始端点随着鼠标变化而变化位置,终结端点不动,中间线段根据起始端点和终结端点计算位置。 拖动终结端点类似于拖动起始端点。 当拖动中间线段时,整个规则图形(包括起始端点,中间线段,终结端点)随着鼠标移动而移动。 另外一个需要仔细考虑的是,当拖动规则,并且将端点移动到活动上时,进行规则和活动关联的时机。 有以下几个时机可以考虑: 拖动规则进入活动范围。 (活动的MouseEnter事件) 拖动规则结束后,放开鼠标。 对于第一种情况,当拖动规则并且进入互动范围时,无法触发活动的MouseEnter事件。 暂时无法解决。 (但是在放开鼠标,并且在活动上移动时,此时触发MouseEnter事件。 但是这样做会存在某些特定的bug)。 因此使用第二种方法进行关联,也就是在规则的MouseLeftButtonUp事件中遍历当前所有的活动,检查规则是否处于活动的范围内,如果在,那么就进行关联。 3.2.1xaml 下面的代码描述了规则类的xaml 2 3 4 MouseEnter="UserContro_MouseEnter" 5 MouseLeave="UserContro_MouseLeave" 6 > 7 8 9 Width="10"Height="10"Fil="White" 10 Stroke="Black"StrokeThickness="0" 11 MouseLeftButtonDown="Point_MouseLeftButtonDown" 12 MouseLeftButtonUp="Point_MouseLeftButtonUp" 13 MouseMove="Point_MouseMove" 14 > 15 16 17 X1="5"Y1="5"X2="45"Y2="45" 18 Stroke="#336699" StrokeThickness="5" 19 MouseLeftButtonDown="Line_MouseLeftButtonDown" 20 MouseLeftButtonUp="Line_MouseLeftButtonUp" 21 MouseMove="Line_MouseMove" 22> 23 24 25 MouseLeftButtonDown="Point_MouseLeftButtonDown" 26 MouseLeftButtonUp="Point_MouseLeftButtonUp" 27 MouseMove="Point_MouseMove"> 28 29 30 Width="10"Height="10"Fil="Black" 31 Stroke="Black"StrokeThickness="1" > 32 33 34 35 36 37 3.2.2后台代码 规则类主要实现主要动作(函数) 鼠标拖拽 删除 关联到活动(增加,删除) 输出规则xml描述 导入xml描述 还有一些主要属性: 规则标示(ID) 规则名称(Name) 起始活动 结束活动 以及一些主要的事件: 移动 删除 3.3容器类的设计 容器类主要功能就是用来提供一个设计面板,可以增加,删除工作流元素(活动,规则),导入xml和导出xm。 3.3.1xam 下面的容器的xaml代码 1 Class="design.Page" 4 Name="LayoutRoot" Background="#A0A0A0"ShowGridLines="False"> 5 6 7 8 9 10 11 12 13 14 15 16 17 "Padding="10"> 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 下图是容器的外观 3.3.2后台代码 规则类主要实现主要动作(函数) 增加活动 删除活动 增加规则 删除规则 导入xm 导出xm 还有一些主要属性: 活动集合 规则集合 流程标示(ID) 流程名称(Name) 下面的章节进入导出xml及根据xml文件生成流程图,并且会讨论一些更有意思的话题. Silverlight构建图形化工作流程设计器(三) 新功能调查: 系统到这里已经具备一个设计器的雏形了,当然还有很多需要完善的功能,如果您在这方面有经验,请提出您的宝贵意见,也可以留下您想要实现的功能,在后续版本中,我们将考虑您的意见,非常感谢: )本文继续前文的内容,主要讲述与导入xm,导出xm,xml存储有 新功能调查: 系统到这里已经具备一个设计器的雏形了,当然还有很多需要完善的功能,如果您在这方面有经验,请提出您的宝贵意见,也可以留下您想要实现的功能,在后续版本中,我们将考虑您的意见,非常感谢: ) 本文继续前文的内容,主要讲述与导入xm,导出xm,xml存储有关的一些内容。 包含以下部分: 设计一个流程图的xml描述文件 将流程图导出为xm 根据xml文件呈现流程图 在完成以上内容后,进一步深入思考,既然可以将流程的当前状态保存为xm,那么在每次流程改变的时候将当前状态保存到内存中,在需要的时候再从内存中还原,就可以实现word里面的撤销与前进的功能了,所以功能就加多了两个。 撤销 前进 在进一步,如果将内存保存的xml对象集合按照一定的频率自动播放,是不是就是一个动画了,呵呵,我们可以用这个来做一个简单的动画片了。 四、xml存取 4.1xml内容 就是将流程图保存为xml文件,以及根据xml文件还原流程图的功能。 首先来看一下xml文件的格式。 Xml文件用来描述流程的,在本文中,流程的布局信息主要有几个方面: 流程的属性信息。 例如流程名称等 活动和规则的属性信息,例如活动名称等 活动和规则的位置信息 活动和规则的关联信息 我们设计出一个可以完全描述上面内容的xml文件即可,下面给出这个xml描述的一个实现。 xmversion="1.0"encoding="utf-8"standalone="yes"? > 上面的内容不用多讲了,大家看名字应该可以猜的出来。 我们还可以使用xsd.exe工具(.netframeworksdk里面带有)生成对应的workflow.xsd文件,在根据.xsd文件生成Class,这个class就是操作这个xml文件的,.net真是太方便了。 (这里就先不这么做了,而直接使用LINQToXml来操作上面的xml文件) 如果您不了解xml相关的一些技术,可以参考 4.2导入、导出 有几个生成xml的方法。 一个是将流程对象序列化,使用对象序列化的方法。 另一个是让对象自己生成xml片段,这里采用第二种方法。 首先为了导入导出xm,容器、活
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 项目 Silverlight 工作流 设计