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

 

接着之前的内容，在开始之前有几点说明：

1、我无法使用博客圆的上传图片功能，因此许多图片就省略了。

2、代码下载：http://www.shareidea.net/opensource.htm

3、在线演示：http://www.shareidea.net/workflow.htm

 

技术支持QQ群：85444465

本文系列索引：

使用silverlight构建一个工作流设计器(一)

使用silverlight构建一个工作流设计器(二)

使用silverlight构建一个工作流设计器(三)

使用silverlight构建一个工作流设计器(四)

使用silverlight构建一个工作流设计器(五)

 使用silverlight构建一个工作流设计器(六)

使用silverlight构建一个工作流设计器(七)

使用silverlight构建一个工作流设计器(八)

 使用silverlight构建一个工作流设计器(九)

使用silverlight构建一个工作流设计器(十)  

使用silverlight构建一个工作流设计器(十一)  

三、类的设计

 

在进行类设计之前，先说一下silverlight中使用怎么表示上面描述的类。在silverlight可以使用 用户控件（ silverlight user control）来描述各种具有用户界面的类，如上文所讲的活动类，规则类。操作很简单，在vs.net 2008中增加一个新的 silverlight user control 就可以了。其实是一个xaml文件。在xaml文件中布局用户界面，在对应的xaml.cs文件中编写后台方法即可。 

 

需要说一下的是,在进行鼠标拖动活动或者规则移动时，规则和活动的动态定位使用的是相对于容器来的相对位置，也就是使用Canvas.Top和Canvas.Left属性进行定位。

  

还有一点需要说明的就是，对于活动和规则的关联有几点需要注意。

l         一个规则可以关联到两个不同的活动，一个为起始活动（起始端点关联）。一个为终结活动（终结端点关联）

l         规则的起始活动和终结活动不能为同一个活动。

l         任何两个规则，他们的起始活动和终结活动不能相同，也就是说在不同的两个活动之间，不能有重复的规则关联。

 

3.1 活动类的设计(Activity)

 

活动代表工作流中的一个活动节点，在流程图上表现为一个方框图，可以被拖拽，可以关联到一个规则的开始或者结束。

3.1.1 Xaml

下面的代码表示了活动类的外观

 

 1<UserControl x:Class="Shareidea.Web.UI.Control.Workflow.Designer.Activity"
 2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 4             MouseLeftButtonDown="UserControl_MouseLeftButtonDown" 
 5             MouseLeftButtonUp="UserControl_MouseLeftButtonUp" 
 6             MouseMove="UserControl_MouseMove"
 7             MouseEnter="UserControl_MouseEnter"  
 8             MouseLeave="UserControl_MouseLeave"
 9             Width="100" Height="60" >
10    <Canvas Name="container"    >
11        <Rectangle  HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Fill="Green" />
12        <Border  CornerRadius="10"   Background="Green" Opacity="0.9" Width="100" Height="60" >
13            <TextBox Name="Title" Text="新建活动" BorderBrush="Green" FontSize="12"  Background="Green" 
14                     Height="30"   Width="60" MouseEnter="TextBox_MouseEnter" ></TextBox>
15        </Border> 
16        <HyperlinkButton Canvas.ZIndex="10000"  Padding="10 5 5 5" MouseLeave="HyperlinkButton_MouseLeave"  Foreground="Red"     Width="65" Height="25"  Canvas.Top="50" Canvas.Left="100" Background="Yellow" Name="btnDelete"  Click="HyperlinkButton_Click"  ClickMode="Release" Content="删除活动"     ></HyperlinkButton>
17   </Canvas> 
18</UserControl>
19

 

从上面代码可以看出，活动类主要包含一个矩形的图形，还有一个删除按钮。图形显示如下：

 

3.12 后台代码

活动类主要实现主要动作（函数）

l         鼠标拖拽

l         删除

l         关联到规则(增加，删除)

l         输出活动xml描述

l         导入xml描述

还有一些主要属性：

l         活动标示（ID）

l         活动名称（Name）

l         所有关联的规则的集合

以及一些主要的事件：

l         移动

l         删除 

具体代码不再贴出，大家可以下载源代码运行。

3.2 规则类的设计

 

规则类的实现比较有意思，主要是它的拖拽方式和活动类的拖拽方式不一样。对于活动类，拖动方式为整个活动随着鼠标进行移动。而对于规则类却不是这样。下面的图形表示了一规则类的外观。

一个规则从图形上被分成三个部分，起始端点（白色），中间线段，终结端点（黑色）（在实际环境中，应该整体表现为一个带箭头的线段，为了便于描述，先这样表示，在后面的美化部分将作修改）。这三个部分都可以被鼠标拖动，当拖动起始端点时，起始端点随着鼠标变化而变化位置，终结端点不动，中间线段根据起始端点和终结端点计算位置。拖动终结端点类似于拖动起始端点。当拖动中间线段时，整个规则图形（包括起始端点，中间线段，终结端点）随着鼠标移动而移动。

 

另外一个需要仔细考虑的是，当拖动规则，并且将端点移动到活动上时，进行规则和活动关联的时机。有以下几个时机可以考虑：

l         拖动规则进入活动范围。（活动的MouseEnter事件）

l         拖动规则结束后，放开鼠标。

 

对于第一种情况，当拖动规则并且进入互动范围时，无法触发活动的MouseEnter事件。暂时无法解决。（但是在放开鼠标，并且在活动上移动时，此时触发MouseEnter事件。但是这样做会存在某些特定的bug）。因此使用第二种方法进行关联，也就是在规则的MouseLeftButtonUp事件中遍历当前所有的活动，检查规则是否处于活动的范围内，如果在，那么就进行关联。

3.2.1 xaml

下面的代码描述了规则类的xaml

 

 1<UserControl x:Class="Shareidea.Web.UI.Control.Workflow.Designer.Rule"
 2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
 4             MouseEnter="UserControl_MouseEnter"   
 5             MouseLeave="UserControl_MouseLeave"
 6    >
 7    <Canvas    Canvas.ZIndex="100"   >
 8        <Ellipse  Name="begin" Canvas.Top="0" Canvas.Left="0" Canvas.ZIndex="100"
 9             Width="10" Height="10" Fill="White"
10             Stroke="Black" StrokeThickness="0"
11             MouseLeftButtonDown="Point_MouseLeftButtonDown"  
12             MouseLeftButtonUp="Point_MouseLeftButtonUp"
13             MouseMove="Point_MouseMove"
14                >
15        </Ellipse>
16        <Line  Name="line" Canvas.ZIndex="50"
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        </Line> 
24        <Canvas Canvas.Top="40" Canvas.Left="40"  Name="end"   Canvas.ZIndex="100"
25                 MouseLeftButtonDown="Point_MouseLeftButtonDown"  
26             MouseLeftButtonUp="Point_MouseLeftButtonUp"
27             MouseMove="Point_MouseMove">
28            
29            <Ellipse 
30             Width="10" Height="10" Fill="Black"
31             Stroke="Black" StrokeThickness="1"  >
32            </Ellipse>
33        </Canvas>
34        <HyperlinkButton  Canvas.ZIndex="1000" MouseLeave="HyperlinkButton_MouseLeave" Foreground="Red" Padding="10 5 5 5" Width="65"  Height="25"  Canvas.Left="50" Background="Yellow" Name="btnDelete"  Click="HyperlinkButton_Click"  ClickMode="Release" Content="删除规则"  ></HyperlinkButton>
35    </Canvas>
36</UserControl>
37

 

3.2.2 后台代码

规则类主要实现主要动作（函数）

l         鼠标拖拽

l         删除

l         关联到活动(增加，删除)

l         输出规则xml描述

l         导入xml描述

还有一些主要属性：

l         规则标示（ID）

l         规则名称(Name)

l         起始活动

l         结束活动

以及一些主要的事件：

l         移动

l         删除 

3.3 容器类的设计

 

容器类主要功能就是用来提供一个设计面板，可以增加，删除工作流元素（活动，规则），导入xml和导出xml。

3.3.1 xaml

下面的容器的xaml代码

 1<UserControl x:Class="design.Page"
 2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
 4    <Grid x:Name="LayoutRoot"  Background="#A0A0A0" ShowGridLines="False" >
 5        <Grid.RowDefinitions >
 6            <RowDefinition Height="35"   />
 7            <RowDefinition Height="*"/>
 8        </Grid.RowDefinitions>
 9        <Grid.ColumnDefinitions>
10            <ColumnDefinition Width="150" />
11            <ColumnDefinition Width="*"/>
12        </Grid.ColumnDefinitions>
13        <Canvas Grid.ColumnSpan="2"  Grid.Row="0"  Width="1150"    HorizontalAlignment="Left" Grid.Column="0" Background="#0054e3" >
14            <TextBlock    Margin="10 5 0 0"   FontSize="16" Foreground="White" Text="流程设计器" ></TextBlock>
15        </Canvas>
16        <StackPanel  Background="#e5eff8"     Width="150" Height="600" Grid.Row="1" Grid.Column="0"  >
17            <TextBlock Text="流程名称：" Padding="10"></TextBlock>
18            <TextBox Name="WorkFlowName" Width="130"  HorizontalAlignment="Left" Margin="10 0 0 10"  ></TextBox>
19            <Button VerticalAlignment="Top" Margin="5 5 10 5" HorizontalAlignment="Right" Width="60" Height="30"  Background="Red"  Click="AddActivity_Click" Content="添加活动" />
20            <Button  VerticalAlignment="Top"  Margin="5 5 10 5" HorizontalAlignment="Right" Width="60" Height="30"  Background="Red"  Click="AddRule_Click" Content="添加规则" />
21
22        </StackPanel>
23        <Canvas  Grid.Row="1" Grid.Column="1"    HorizontalAlignment="Left" Name="cnsDesignerContainer"   Width="1000" Height="600" Background="#dcdcdc">
24        </Canvas>
25        <Canvas Name="MessageBody"  >
26            <Rectangle   HorizontalAlignment="Center" VerticalAlignment="Center"     Fill="#FF8A8A8A" ></Rectangle>
27            <Border   Canvas.Top="200" Canvas.Left="300" CornerRadius="30"  Background="#FF5C7590" Width="400"    Height="200"> 
28                <StackPanel VerticalAlignment="Center" Margin="20"  >
29                    <TextBlock Name="MessageTitle" Text="消息内容" FontSize="18" HorizontalAlignment="Center" Margin="10"></TextBlock>
30                    <Button Content="关闭"  Width="100"  Height="50" FontSize="18" Click="Button_Click" ></Button>
31                </StackPanel>
32            </Border>
33        </Canvas>
34    </Grid>
35</UserControl>
36

 

下图是容器的外观 

 

3.3.2 后台代码

规则类主要实现主要动作（函数）

l         增加活动

l         删除活动

l         增加规则

l         删除规则

l         导入xml

l         导出xml

还有一些主要属性：

l         活动集合

l         规则集合

l         流程标示(ID)

l         流程名称（Name） 

好了，其实也没有说什么，大家还是看代码吧，因为比较仓促，有些写得比较乱，有些也没有注释，以后会慢慢完善，既然是第一个版本，就叫做workflowDesigner.SL 0.1版吧。 

下面的章节进入导出xml及根据xml文件生成流程图,并且会讨论一些更有意思的话题。