我们来学Activiti - BPMN xml

题记

  • 前文bpmn中,咱提到了规范的力量
  • 有了BPMN2.0规范提供的图形化元素,想画出什么流程图
  • 可劲的造就是
  • 巧了,领导他爸正在为高度仿真的军事沙盘游戏没有规范的指挥决策审批流发愁
    • 一看,这机会不来了吗
    • 自荐绘图,大笔一拿,A4输出
      在这里插入图片描述
    • 领导他爸一看,小张,还有这方面研究,可以呀
    • 咱谦(得)虚(意)地说(翘)多亏(起)领导栽培(嘴角)
    • 领导他爸略作思考,得再给加个军团审批
    • 小事一桩,咱拿出A4纸重新画图,这下留了心眼,改用铅笔
      在这里插入图片描述
    • 领导他爸略作思考,得再给加个师部审批
    • 很快到了下班时间,老板他爸是意犹未尽
    • 很快到了加班时间,老板他爸甚是满意
    • 很快到了加班宵夜时间,老板他爸得意洋洋发了盆友圈,
      • 上了年纪画图就是不比当年呀
    • 沃尼…,心里暗骂,要脸不
  • 故事会这样简单结束了?那可不能…
    • 接着,老板他爸把咱拉入了<老友军事爱好群>
    • 接着,沙漠之鹰作战指挥系统审批
    • 接着, 近海防御演练指挥系统审批
    • 接着,…
  • 世界给我以痛,我却必要回报以歌
    • 咱这饭碗不能丢
    • 呜呜…,咋办呀

BPMN2.0 xml

  • 仿佛一道晨光照入黑暗的室内

  • 犹如一股温暖的春风吹进了心房

  • BPMN2.0 xml骑着白马驱赶了内心的阴霾

  • BPMN2.0 xml是啥

    • BPMN2.0 可不只是定义了流程图元素
    • BPMN2.0还从编程角度定义了,如何用xml结构表示流程图
    • 这样流程可以被序列化为XML格式,使得流程定义可以被存储、传输和编辑
  • 说干就干,输出

    <?xml version="1.0" encoding="UTF-8"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.activiti.org/test"><process id="myProcess" name="My process" isExecutable="true"><startEvent id="startevent1" name="Start"></startEvent><userTask id="usertask1" name="创建请假单"></userTask><sequenceFlow id="flow1" sourceRef="startevent1" targetRef="usertask1"></sequenceFlow><userTask id="usertask2" name="部门经理审核"></userTask><sequenceFlow id="flow2" sourceRef="usertask1" targetRef="usertask2"></sequenceFlow><userTask id="usertask3" name="人事复核"></userTask><sequenceFlow id="flow3" sourceRef="usertask2" targetRef="usertask3"></sequenceFlow><endEvent id="endevent1" name="End"></endEvent><sequenceFlow id="flow4" sourceRef="usertask3" targetRef="endevent1"></sequenceFlow></process><bpmndi:BPMNDiagram id="BPMNDiagram_myProcess"><bpmndi:BPMNPlane bpmnElement="myProcess" id="BPMNPlane_myProcess"><bpmndi:BPMNShape bpmnElement="startevent1" id="BPMNShape_startevent1"><omgdc:Bounds height="35.0" width="35.0" x="130.0" y="160.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement="usertask1" id="BPMNShape_usertask1"><omgdc:Bounds height="55.0" width="105.0" x="210.0" y="150.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement="usertask2" id="BPMNShape_usertask2"><omgdc:Bounds height="55.0" width="105.0" x="360.0" y="150.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement="usertask3" id="BPMNShape_usertask3"><omgdc:Bounds height="55.0" width="105.0" x="510.0" y="150.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement="endevent1" id="BPMNShape_endevent1"><omgdc:Bounds height="35.0" width="35.0" x="660.0" y="160.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNEdge bpmnElement="flow1" id="BPMNEdge_flow1"><omgdi:waypoint x="165.0" y="177.0"></omgdi:waypoint><omgdi:waypoint x="210.0" y="177.0"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement="flow2" id="BPMNEdge_flow2"><omgdi:waypoint x="315.0" y="177.0"></omgdi:waypoint><omgdi:waypoint x="360.0" y="177.0"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement="flow3" id="BPMNEdge_flow3"><omgdi:waypoint x="465.0" y="177.0"></omgdi:waypoint><omgdi:waypoint x="510.0" y="177.0"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement="flow4" id="BPMNEdge_flow4"><omgdi:waypoint x="615.0" y="177.0"></omgdi:waypoint><omgdi:waypoint x="660.0" y="177.0"></omgdi:waypoint></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></definitions>
    
  • 难道要把这拿给领导爸爸

  • 难道要写xml,还不如铅笔画了

  • 当然不是了,有比咱们更操心的,他们实现了bpmn-js

  • bpmn-js直接画直接改,提高效率,好不快活

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <title>UCoding - BPMNJS</title>
      <!-- 引入BPMN-JS的CSS文件 -->
      <link rel="stylesheet" href="https://unpkg.com/bpmn-js@7.3.0/dist/assets/diagram-js.css" />
      <link rel="stylesheet" href="https://unpkg.com/bpmn-js@7.3.0/dist/assets/bpmn-font/css/bpmn.css" />
    </head>
    <body>
      <div id="canvas" style="height:80vh;"></div>
      <!-- 引入BPMN-JS的JS文件 -->
      <script src="https://unpkg.com/bpmn-js@7.3.0/dist/bpmn-modeler.development.js"></script>
      <script>
        var diagramXML = `<?xml version="1.0" encoding="UTF-8"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.activiti.org/test"><process id="myProcess" name="My process" isExecutable="true"><startEvent id="startevent1" name="Start"></startEvent><userTask id="usertask1" name="创建请假单"></userTask><sequenceFlow id="flow1" sourceRef="startevent1" targetRef="usertask1"></sequenceFlow><userTask id="usertask2" name="部门经理审核"></userTask><sequenceFlow id="flow2" sourceRef="usertask1" targetRef="usertask2"></sequenceFlow><userTask id="usertask3" name="人事复核"></userTask><sequenceFlow id="flow3" sourceRef="usertask2" targetRef="usertask3"></sequenceFlow><endEvent id="endevent1" name="End"></endEvent><sequenceFlow id="flow4" sourceRef="usertask3" targetRef="endevent1"></sequenceFlow></process><bpmndi:BPMNDiagram id="BPMNDiagram_myProcess"><bpmndi:BPMNPlane bpmnElement="myProcess" id="BPMNPlane_myProcess"><bpmndi:BPMNShape bpmnElement="startevent1" id="BPMNShape_startevent1"><omgdc:Bounds height="35.0" width="35.0" x="130.0" y="160.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement="usertask1" id="BPMNShape_usertask1"><omgdc:Bounds height="55.0" width="105.0" x="210.0" y="150.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement="usertask2" id="BPMNShape_usertask2"><omgdc:Bounds height="55.0" width="105.0" x="360.0" y="150.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement="usertask3" id="BPMNShape_usertask3"><omgdc:Bounds height="55.0" width="105.0" x="510.0" y="150.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement="endevent1" id="BPMNShape_endevent1"><omgdc:Bounds height="35.0" width="35.0" x="660.0" y="160.0"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNEdge bpmnElement="flow1" id="BPMNEdge_flow1"><omgdi:waypoint x="165.0" y="177.0"></omgdi:waypoint><omgdi:waypoint x="210.0" y="177.0"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement="flow2" id="BPMNEdge_flow2"><omgdi:waypoint x="315.0" y="177.0"></omgdi:waypoint><omgdi:waypoint x="360.0" y="177.0"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement="flow3" id="BPMNEdge_flow3"><omgdi:waypoint x="465.0" y="177.0"></omgdi:waypoint><omgdi:waypoint x="510.0" y="177.0"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement="flow4" id="BPMNEdge_flow4"><omgdi:waypoint x="615.0" y="177.0"></omgdi:waypoint><omgdi:waypoint x="660.0" y="177.0"></omgdi:waypoint></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></definitions>`
    
        var bpmnModeler = new BpmnJS({
          container: '#canvas'
        });
    
        bpmnModeler.importXML(diagramXML, function(err) {
          if (err) {
            return console.error('failed to load diagram', err);
          }
        });
      </script>
    </body>
    </html>
    

    在这里插入图片描述

  • 得到<老友军事爱好群>积极反馈,老李推荐的小张可以呀

  • 领导他爸乐了,周末一天领导去看他爸,他爸叮嘱,小张要好好培养呀

后记

  • 小张笑嘻嘻醒来
  • 趴着的工位上流了一摊口水

在这里插入图片描述

这是 activiti-bpmn-layout-5.22.0 的 pom.xml 文件内容: ``` <project> <modelVersion>4.0.0</modelVersion> <groupId>org.activiti</groupId> <artifactId>activiti-bpmn-layout</artifactId> <version>5.22.0</version> <packaging>jar</packaging> <name>Activiti BPMN Layout</name> <description>Layout algorithms for BPMN 2.0 diagrams</description> <dependencies> <dependency> <groupId>org.activiti</groupId> <artifactId>activiti-bpmn-model</artifactId> <version>${project.version}</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.4</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.5</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.3</version> <configuration> <source>1.6</source> <target>1.6</target> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-plugin</artifactId> <version>2.4</version> <configuration> <archive> <manifest> <addClasspath>true</addClasspath> <mainClass>${main.class}</mainClass> </manifest> </archive> </configuration> </plugin> </plugins> </build> </project> ``` 该 pom.xml 文件定义了项目的基本信息,包括: - 项目的 groupId、artifactId 和 version; - 项目的名称和描述; - 项目依赖的其他库(activiti-bpmn-model、commons-lang3 和 slf4j-api); - 项目的构建配置,包括编译器版本、打包方式和插件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

UCoding

说话好听~~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值