上一篇:使用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. 1<UserControl x:Class="Shareidea.Web.UI.Control.Workflow.Designer.Activity"
  2. 2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. 3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. 4            MouseLeftButtonDown="UserControl_MouseLeftButtonDown"
  5. 5            MouseLeftButtonUp="UserControl_MouseLeftButtonUp"
  6. 6            MouseMove="UserControl_MouseMove"
  7. 7            MouseEnter="UserControl_MouseEnter" 
  8. 8            MouseLeave="UserControl_MouseLeave"
  9. 9            Width="100" Height="60" >
  10. 10    <Canvas Name="container"    >
  11. 11        <Rectangle  HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Fill="Green" />
  12. 12        <Border  CornerRadius="10"  Background="Green" Opacity="0.9" Width="100" Height="60" >
  13. 13            <TextBox Name="Title" Text="新建活动" BorderBrush="Green" FontSize="12"  Background="Green"
  14. 14                    Height="30"  Width="60" MouseEnter="TextBox_MouseEnter" ></TextBox>
  15. 15        </Border>
  16. 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. 17  </Canvas>
  18. 18</UserControl>
  19. 19
复制代码
从上面代码可以看出,活动类主要包含一个矩形的图形,还有一个删除按钮。图形显示如下:

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

3.12 后台代码

活动类主要实现主要动作(函数)

l        鼠标拖拽

l        删除

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

l        输出活动xml描述

l        导入xml描述

还有一些主要属性:

l        活动标示(ID)

l        活动名称(Name)

l        所有关联的规则的集合

以及一些主要的事件:

l        移动

l        删除

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

3.2 规则类的设计

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

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

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


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

l        拖动规则进入活动范围。(活动的MouseEnter事件)

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

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

3.2.1 xaml

下面的代码描述了规则类的xaml
  1. 1<UserControl x:Class="Shareidea.Web.UI.Control.Workflow.Designer.Rule"
  2. 2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. 3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4. 4            MouseEnter="UserControl_MouseEnter" 
  5. 5            MouseLeave="UserControl_MouseLeave"
  6. 6    >
  7. 7    <Canvas    Canvas.ZIndex="100"  >
  8. 8        <Ellipse  Name="begin" Canvas.Top="0" Canvas.Left="0" Canvas.ZIndex="100"
  9. 9            Width="10" Height="10" Fill="White"
  10. 10            Stroke="Black" StrokeThickness="0"
  11. 11            MouseLeftButtonDown="Point_MouseLeftButtonDown" 
  12. 12            MouseLeftButtonUp="Point_MouseLeftButtonUp"
  13. 13            MouseMove="Point_MouseMove"
  14. 14                >
  15. 15        </Ellipse>
  16. 16        <Line  Name="line" Canvas.ZIndex="50"
  17. 17          X1="5" Y1="5" X2="45" Y2="45"
  18. 18          Stroke="#336699"  StrokeThickness="5"
  19. 19              MouseLeftButtonDown="Line_MouseLeftButtonDown"
  20. 20              MouseLeftButtonUp="Line_MouseLeftButtonUp"
  21. 21              MouseMove="Line_MouseMove" 
  22. 22              >
  23. 23        </Line>
  24. 24        <Canvas Canvas.Top="40" Canvas.Left="40"  Name="end"  Canvas.ZIndex="100"
  25. 25                MouseLeftButtonDown="Point_MouseLeftButtonDown" 
  26. 26            MouseLeftButtonUp="Point_MouseLeftButtonUp"
  27. 27            MouseMove="Point_MouseMove">
  28. 28           
  29. 29            <Ellipse
  30. 30            Width="10" Height="10" Fill="Black"
  31. 31            Stroke="Black" StrokeThickness="1"  >
  32. 32            </Ellipse>
  33. 33        </Canvas>
  34. 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. 35    </Canvas>
  36. 36</UserControl>
  37. 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. 1<UserControl x:Class="design.Page"
  2. 2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. 3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  4. 4    <Grid x:Name="LayoutRoot"  Background="#A0A0A0" ShowGridLines="False" >
  5. 5        <Grid.RowDefinitions >
  6. 6            <RowDefinition Height="35"  />
  7. 7            <RowDefinition Height="*"/>
  8. 8        </Grid.RowDefinitions>
  9. 9        <Grid.ColumnDefinitions>
  10. 10            <ColumnDefinition Width="150" />
  11. 11            <ColumnDefinition Width="*"/>
  12. 12        </Grid.ColumnDefinitions>
  13. 13        <Canvas Grid.ColumnSpan="2"  Grid.Row="0"  Width="1150"    HorizontalAlignment="Left" Grid.Column="0" Background="#0054e3" >
  14. 14            <TextBlock    Margin="10 5 0 0"  FontSize="16" Foreground="White" Text="流程设计器" ></TextBlock>
  15. 15        </Canvas>
  16. 16        <StackPanel  Background="#e5eff8"    Width="150" Height="600" Grid.Row="1" Grid.Column="0"  >
  17. 17            <TextBlock Text="流程名称:" Padding="10"></TextBlock>
  18. 18            <TextBox Name="WorkFlowName" Width="130"  HorizontalAlignment="Left" Margin="10 0 0 10"  ></TextBox>
  19. 19            <Button VerticalAlignment="Top" Margin="5 5 10 5" HorizontalAlignment="Right" Width="60" Height="30"  Background="Red"  Click="AddActivity_Click" Content="添加活动" />
  20. 20            <Button  VerticalAlignment="Top"  Margin="5 5 10 5" HorizontalAlignment="Right" Width="60" Height="30"  Background="Red"  Click="AddRule_Click" Content="添加规则" />
  21. 21
  22. 22        </StackPanel>
  23. 23        <Canvas  Grid.Row="1" Grid.Column="1"    HorizontalAlignment="Left" Name="cnsDesignerContainer"  Width="1000" Height="600" Background="#dcdcdc">
  24. 24        </Canvas>
  25. 25        <Canvas Name="MessageBody"  >
  26. 26            <Rectangle  HorizontalAlignment="Center" VerticalAlignment="Center"    Fill="#FF8A8A8A" ></Rectangle>
  27. 27            <Border  Canvas.Top="200" Canvas.Left="300" CornerRadius="30"  Background="#FF5C7590" Width="400"    Height="200">
  28. 28                <StackPanel VerticalAlignment="Center" Margin="20"  >
  29. 29                    <TextBlock Name="MessageTitle" Text="消息内容" FontSize="18" HorizontalAlignment="Center" Margin="10"></TextBlock>
  30. 30                    <Button Content="关闭"  Width="100"  Height="50" FontSize="18" Click="Button_Click" ></Button>
  31. 31                </StackPanel>
  32. 32            </Border>
  33. 33        </Canvas>
  34. 34    </Grid>
  35. 35</UserControl>
  36. 36
复制代码
下图是容器的外观 

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

3.3.2 后台代码

规则类主要实现主要动作(函数)

l        增加活动

l        删除活动

l        增加规则

l        删除规则

l        导入xml

l        导出xml

还有一些主要属性:

l        活动集合

l        规则集合

l        流程标示(ID)

l        流程名称(Name)

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

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

下一篇:使用Silverlight构建一个工作流设计器(三)

源码下载:
附件: 亲,您没有权限下载或查看附件喔:-) 试试登录注册吧!
TOP

很不错, 学习

很不错, 学习
TOP

学习学习!!!!!!!!!!!!!!!!!
TOP

谢谢大哥的教育!
TOP

回复 1# cobra 的帖子

很有用,不错。
TOP

good

很好 值得学习
TOP

很好 值得学习
TOP

不错

很不错啊
TOP

深情顶帖,楼主加油!
TOP

深情顶帖,楼主加油!
TOP