65.9K
CodeProject 正在变化。 阅读更多。
Home

Slickflow 编码图形模型用户手册

besley
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.20/5 (6投票s)

2019 年 12 月 1 日

CPOL

6分钟阅读

viewsIcon

9524

流程图可以由 C# 代码而不是 GUI 界面生成。

引言

业务人员在绘制流程时，通常使用 GUI 界面交互操作来完成。然而，对于需要频繁操作或管理较多流程的系统管理用户来说，他们需要一个辅助工具来帮助他们快速完成流程的创建、编辑和更新。Slickflow.graph 图形编码建模工具通过命令行直接编写代码来创建图形，实现了快速提升绘制流程图形的效率。

背景

开源项目 slickflow.engine 可从 http://github.com/besley/slickflow 下载。

代码文本 HTML 页面可从 http://demo.slickflow.com/sfd/model 访问。

Using the Code

1. 图形创建代码文本

首先，通过一段代码片段进行说明，它创建了一个简单的顺序流。代码如下：

using Slickflow.Graph;
using Slickflow.Engine.Common;

//firstly, create a process model builder
var pmb = ProcessModelBuilder.CreateProcess("BookSellerProcess", "BookSellerProcessCode", "3");
var process = pmb.Start("Start")
    .Task("Package Books", "003") //task name, code
    .Task("Deliver Books", "005") //task name, code
    .End("End")
    .Store();

截图如下：

sequence flow chart

1.1 流程创建命令

示例命令：

var pmb = ProcessModelBuilder.CreateProcess("BookSellerProcess", "BookSellerProcessCode", "3");

参数：(processname, processcode, processversion)

1.2 活动节点创建命令

1.2.1 开始节点创建：Start()

示例命令：

pmb.Start("Start")

参数：(activityname, activitycode)

1.2.2 结束节点创建：End()

示例命令：

pmb.End("End")

参数：(activityname, activitycode)

1.2.3 任务节点创建：Task()

1.2.3.1 基本方法

示例命令：

pmb.Task("Package Books", "003")

参数：(activityname, activitycode)

1.2.3.2 扩展方法

示例命令：

Pmb.Task(
    VertexBuilder.CreateTask("Task-001", "task001")
      .SetUrl("http://www.slickflow.com")
      .AddRole("TestRole")
      .AddAction(
    VertexBuilder.CreateAction(ActionTypeEnum.Event,
            FireTypeEnum.Before,
            "Slickflow.Module.External.OrderSubmitService"
     )
)
  1. CreateTask()：创建任务节点
    参数：(task) task 是一个顶点对象
  2. SetUrl()：设置节点 URL 页面属性
    参数：(pageurl) 页面地址字符串
  3. AddRole()：设置节点绑定的角色数据
    参数：(rolecode) 角色代码
  4. AddAction()：添加动作操作详情
    参数：(action) 对象
  5. CreateAction()：创建动作操作详情对象
    参数：(actiontype, firetype, methodname)

1.2.4 分支节点创建：Split()

分支和合并通常作为一个整体的代码片段来创建，如下图所示。创建了一个包含两个分支的流程图，每个分支有两个任务节点。一个完整的代码片段示例如下：

pmb.Split("split")
    .Parallels(
      ()=>pmb.Branch(
      ()=>pmb.Task("task-010", "task010"),
      ()=>pmb.Task("task-011", "task011")
     )
     ,() => pmb.Branch(
      () => pmb.Task("task-020", "task020"),
      () => pmb.Task("task-021", "task021")
     )
     )
     .Join("join")

截图如下：

parallel flow chart

  1. Split()：创建分支节点
    参数：(activityname, activitycode)
  2. Parallels()：创建多个分支的外部方法
    参数
    (params Func<ProcessModelBuilder>[] branches)

    说明：参数 branches 指的是分支列表的组合。一个并行模式可以由多个分支组成。Params 指的是可变参数列表的关键字。

  3. Branch()：分支具体的创建方法
    参数
    (params Func<ProcessModelBuilder>[] nodes)

    说明：参数 nodes 指的是节点列表的组合。一个分支可以由多个节点组成。Params 指的是可变参数列表的关键字。

  4. Join()：创建合并节点

    参数：(activityname, activitycode)

    注意：合并和分支通常成对出现，以表达决策类型的分支选择模式。

1.3 图形存储命令

示例命令：

Pmb.Store();

存储命令会将上述图形序列化为 XML，并作为一条记录存储在数据库中。

2. 图形维护命令

2.1 流程加载命令

  1. 命令
    var pmb = ProcessModelBuilder.LoadProcess("BookSellerProcessCode", "3");

    参数：(processcode, processversion)

    说明：由流程代码和版本组成的唯一键标识符，用于唯一确定流程记录。

2.2 图形节点编辑代码

  1. 命令
    using Slickflow.Graph;
using Slickflow.Engine.Common;

//firstly load a process model builder
var pmb = ProcessModelBuilder.LoadProcess("BookSellerProcessCode", "3");
//execute different task operation once together
pmb.Add("003", ActivityTypeEnum.TaskNode, "zzz", "zzz-code")
   .Insert("003", ActivityTypeEnum.TaskNode, "task004", "004")
   .Set("003", (a) => pmb.GetBuilder(a).SetUrl("slickflow.com").SetName("mer-sss-ryxmas"))
   .Replace("004", ActivityTypeEnum.TaskNode, "task222", "222")
   .Exchange("222", "zzz-code")
   .Fork("zzz-code", ActivityTypeEnum.TaskNode, "yyy", "555")
   .Remove("222", true)
   .Update ();

    注意：所有更新操作，如添加、插入、交换、替换、分支、编辑和删除图形节点元素，都可以通过链式服务接口一次性完成。

2.3 节点编辑命令详情

2.3.1 添加节点：Add()

  1. 命令
    //add a new task node zzz after task with code 003(Package Books)
pmb.Add("003", ActivityTypeEnum.TaskNode, "zzz", "zzz-code")

    参数：(currentactivitycode, addactivitytype, addactivityname, addactivitycode)

    注意：add() 方法是在当前节点之后添加一个新节点，并保持新添加的节点在流程连接线上。

  2. 命令执行后的图例：

    add new activity

2.3.2 插入节点：Insert()

  1. 命令
    //insert a new task node named task004 before task 003(Package Books)
pmb.Insert("003", ActivityTypeEnum.TaskNode, "task004", "004")

    参数：(currentactivitycode, addactivitytype, addactivityname, addactivitycode)

    注意：insert() 方法是在当前节点之前添加一个新节点，并保持新添加的节点在流程连接线上。

  2. 命令执行后的图例：

    insert new activity

2.3.3 更新节点属性：Set()

  1. 命令
    //set task 003(Package Books) property url and name
pmb.Set("003", (a) => pmb.GetBuilder(a).SetUrl("slickflow.com").SetName("mer-sss-ryxmas"))

    参数：(currentactivitycode, vertexbuilder)

    说明：根据当前节点的代码表示，获取当前节点对象，然后更新 URL 属性和名称属性。

  2. 命令执行后的图例：

2.3.4 替换节点：Replace()

  1. 命令
    //replace task 004(task004) by the new task named task222
pmb.Replace("004", ActivityTypeEnum.TaskNode, "task222", "222")

    参数：(currentactivitycode, replacedbyactivitytype, replacedbyactivityname, replacedbyactivitycode)

    注意：您可以用一个新节点替换当前节点。新节点是 replacedbyactivity，这相当于先执行移除操作，再执行添加操作。节点替换后，原始连接线的唯一 ID Guid 也会改变。

  2. 命令执行后的图例：

    replace an activity using a new activity

2.3.5 交换节点：Exchange()

  1. 命令
    //exchange task 222 to zzz
pmb.Exchange("222", "zzz-code")

    参数：(firstactivitycode, secondactivitycode)

    注意：此方法改变了两个节点的位置，其他节点的属性保持不变。更重要的是，交换后，节点之间的连接线会重新获得一个唯一的 ID guid，因为连接的节点已更改，所以连接 ID guid 的值需要更改。

  2. 命令执行后的图例：

    exchange two activity

2.3.6 分支节点：Fork()

  1. 命令
    //fork a new Task 555 from task zzz
pmb.Fork("zzz-code", ActivityTypeEnum.TaskNode, "yyy", "555")

    参数：(currentactivitycode, forkactivitytype, forkactivityname, forkactivitycode)

    注意：此方法是为当前节点添加一个分支路径。如果当前节点没有后续节点，则与添加 add 方法相同。如果当前节点已有后续节点，则在相邻位置添加一个新节点。

  2. 命令执行后的图例：

    for a new branch

2.3.7 删除节点：Remove()

  1. 命令
    //remove the task 222, and afterward nodes will be caught up
pmb.Remove("222", true)

    参数：(currentactivitycode, iscaughtup)

    注意：删除当前节点。如果当前节点已有后续节点，您需要将后续节点前移到当前删除节点的位置，包括添加新的连接。

  2. 命令执行后的图例：

    remove an activity

2.3.8 添加分支/合并：Cover()

  1. 命令
    //cover a split/join pattern into canvas
pmb.Cover("003", "005",
      VertexBuilder.CreateSplit(GatewayDirectionEnum.AndSplit,"AndSplit", 
      "AndSplicCode"), VertexBuilder.CreateJoin(GatewayDirectionEnum.AndJoin, 
      "AndJoin", "AndJoinCode"), VertexBuilder.CreateTask("branchTask001", "b001"),
      VertexBuilder.CreateTask("branchTask002", "b002")
   )
   .Update();
  2. 命令执行后的图例：

    Cover a split/join block

2.3.9 删除分支/合并：Uncover()

  1. 命令
    //uncover a split/join pattern from canvas
pmb.Uncover("003", "005")
   .Update ();
  2. 命令执行后的图例：

    uncover a split/join block

2.3.10 连接节点：Connect()

  1. 命令
    //connect two task node
pmb.Connect("003", "005")
   .Update ();
  2. 命令执行后的图例：

    connect two activity

2.3.11 断开节点连接：Disconnect()

  1. 命令
    //disconnect two task node
pmb.Disconnect("003", "005")
   .Update ();
  2. 命令执行后的图例：

    disconnect two activity

2.4 流程更新命令 Update()

  1. 命令
    pmb.Update();

    注意：流程节点和连接数据将再次进行 XML 序列化，并将数据保存到数据库中。

3. 编程环境

目前，代码编程建模工具已提供在线使用体验工具，左侧是纯文本代码输入区，右侧是更新后的图形显示区。每次执行代码文本，右侧的图形显示都会更新。

code editor

4. 在线地址

为了方便流程爱好者学习和掌握 slickflow 流程图形语言模型，我们特别提供了一个在线代码编写的示例环境。请根据以下地址访问：

5. 总结

代码编程建模工具的实现方便了用户快速创建和更新图形，且代码命令易于学习。建议流程技术人员、流程管理用户和系统分析师投入时间学习和掌握，从而提高流程开发的效率。

关注点

建议初学者阅读本手册，并在在线编辑器页面上练习编程。然后，您就可以掌握一些高级的流程图管理功能。最终，您会喜欢上用代码创建和更新图表。但这取决于您喜欢选择哪种方式。感谢您在此提出的建议。

历史

  • 01: slickflow.graph 项目的准教程。2019/12/01
  • 02: 修复了图片链接丢失问题
© . All rights reserved.