oryx 分离&集成

公司需要用到在线的流程编辑器,我研究了下activiti,activiti-explorer 是一个 web流程编辑工具,根据我了解到的情况。 activiti-explorer web流程编辑工具 是和activiti 紧密结合到一起了的。 activiti-explorer 前端使用了 angular , 流程编辑部分底层使用了 oryx。 原本 oryx 后面发展成Signavio。 或者说  Oryx就是Signavio Core Components project开源版和Signavio Process Editor商业版的蓝图。 oryx 本身是一套js 的svg绘图工具。发现oryx 是还不错。 不过里面的代码和后端耦合到了一起,实在有些郁闷了。 后面我研究了几个版本的activiti-explorer,渐渐搞明白了 oryx 是怎么和后台交互的了。其实早期版本activiti-explorer并没有用到angular。没有使用 angular的话,复杂度减少很多。 我很快完成了oryx 和后端代码的分离———— 当然,我是修改了源码。虽然已经完成 oryx 的前后端分离, 但是因为oryx 中存在一些静态资源的请求,故oryx.rar 还是需要解压然后部署到 web 容器中才能 运行。 但是, 它不会涉及任何后端代码。

1. 集成配置

1.1. 简单集成:

oryx.zip 放置到项目中webapp目录下。解压,在项目相关的html 文件中的head部分引入oryx 相关的jscss 如其中 view/new.html所示 同时需要确保这些资源都能够访问 然后在需要oryx的地方嵌

<div id="oryx_canvas" ></div>

oryx_canvas canvasID,不可更改。这样, 我们就已经将oryx嵌入到了我们页面的 div中了。

../explorer/src/img/signavio/smoky/logo2.png 是顶部图标

 

 

// Ext.onReady(Signavio.Helper.ShowMask); 可以控制是否进行加载阶段:

 

其中图标为  ../explorer/src/img/signavio/smoky/logo.png 

 

 

 

 

1.2. 配置:

目前,oryx相关的配置全部写死在oryx.debug.js

 

 

如图所示, 主要的配置有

 

ORYX.CONFIG.PANEL_LEFT_WIDTH = 250; // 左部Panel的宽度

ORYX.CONFIG.PANEL_RIGHT_WIDTH = 300; // 右部Panel的宽度

ORYX.CONFIG.WINDOW_HEIGHT = 700; // 中部画布窗口的高度,也是左部右部Panel的高度

 

ORYX.CONFIG.CANVAS_WIDTH = 1485; // 中部画布的宽度,注意它不同于窗口的宽度

ORYX.CONFIG.CANVAS_HEIGHT = 1050;// 中部画布的高度,注意它不同于窗口的高度

... 还有很多的配置待研究!!

 

左部Panel 的所有菜单都是根据stencilset.js 动态加载的,因此我们需要熟悉stencilset.js的结构。stencilset 的大致结构是:

 

var stencilset_jsonObject = {

  "title" : "Hi ORXY",

  "namespace" : "http://b3mn.org/stencilset/bpmn2.0#",

  "description" : "This is the BPMN 2.0 stencil set specification.",

  "propertyPackages" :[ {“name”:“xx”, “properties”: [{id:xx, type:xx, title:xx, value:xx, description:xx , popular: xx, refToView:xx, items:xx }, ...]} ],

  "stencils" : [ {“type”:“xx”, “id”: xx, “title”: xx, “description”: xx, “view”: xx, “icon”: xx, “groups”: xx, “mayBeRoot”: xx, “propertyPackages”: xx, “roles”: xx} ]

  "rules" : {“ruleName”: [{“role”: roleName, “incomingEdges”: [{“role”: roleName, maximun: num}] }, {“role”: roleName, “outgoingEdges”: [{“role”: roleName, maximun: num}] }]

 

“ruleName2”: [xxx]

}

}

 

 

 

其中:

title, 显示在左部Panel 的菜单顶部

propertyPackages 定义了所有的属性及其数据结构。

stencils定义了所有的图形(也就是画布上的可视元素)及其数据结构。

rules定义了图形之间的所有可能拥有的关系

 

举例来说:

l propertyPackage mailtaskbase

{

    "name" : "mailtaskbase",

    "properties" : [ {

      "id" : "mailtaskto",

      "type" : "Text",

      "title" : "To",

      "value" : "",

      "description" : "The recipients if the e-mail. Multiple recipients are defined in a comma-separated list.",

      "popular" : true

    }, {

      "id" : "mailtaskfrom",

      "type" : "Text",

      "title" : "From",

      "value" : "",

      "description" : "The sender e-mail address. If not provided, the default configured from address is used.",

      "popular" : true

    }, {

      "id" : "mailtasksubject",

      "type" : "Text",

      "title" : "Subject",

      "value" : "",

      "description" : "The subject of the e-mail.",

      "popular" : true

    }, {

....

    } ]

  }

如上:

mailtaskbase 定义了所有邮件任务的基本的共有属性集合,它包含了很多具体的邮件属性:

mailtaskto 收件人,数据类型为 text,页面的展现标题为To,默认值为空,描述为“..

Mailtaskfrom发件人,数据类型为 text,页面的展现标题为From,默认值为空,描述为“..

Mailtasksubject邮件的主题,数据类型为 text,页面的展现标题为Subject,默认值为空,描述为“..

 

 

l stencils之 开始节点

{

    "type" : "node",

    "id" : "StartNoneEvent",

    "title" : "开始",

    "description" : "A start event without a specific trigger",

    "view" : "startevent/none.svg",

    "icon" : "startevent/none.png",

    "propertyPackages" : [ "elementbase", "baseattributes", "formdefinition", "nonestarteventbase", "executionlistenersbase" ],

    "roles" : [ "Startevents_all", "sequence_start", "StartEventsMorph", "all" ]

  }

StartNoneEvent 是开始流程的图形节点,类型是节点,id StartNoneEventtitle 是开始,view startevent/none.svgicon startevent/none.pngpropertyPackages 是其拥有的属性,(在画布中,点击StartNoneEvent 节点, 右边的属性Panel可以查看到其所有的属性)分别是[ "elementbase", "baseattributes", "formdefinition", "nonestarteventbase", "executionlistenersbase" ]

 

roles 是它拥有的角色:["Startevents_all", "sequence_start", "StartEventsMorph", "all"]

 

 

l stencilsManualTask 节点

{

    "type" : "node",

    "id" : "ManualTask",

    "title" : "手工任务",

    "description" : "An automatic task with no logic",

    "view" : "activity/manualtask.svg",

    "icon" : "activity/list/type.manual.png",

    "groups" : [ "业务规范" ],

    "propertyPackages" : [ "elementbase", "baseattributes", "asynchronousbase", "executionlistenersbase", "loopcharacteristics", "activity" ],

    "roles" : [ "sequence_start", "Activity", "sequence_end", "ActivitiesMorph", "all" ]

  }

这是一个手工任务节点,需要注意的是groups字段,它实际表示一个二级菜单:“业务规范”

 

通过groups字段, 我们将我们的业务规则进行分组。 如果没有groups字段,那么,它会显示作为一级菜单。

 

l 4 rules 配置,

rules 表明了图形节点之间的可能的关系, 比如,哪些节点可以发出一根连线, 哪些节点不可以。哪些节点可以通过悬浮菜单创建怎么样的新节点等等。

 

 

2. 使用

Toolbar 提供了很多便利的操作:

 这些操作都提供了键盘、方向键的操作。

 

 

2.1. 保存

 可以将当然画布内容进行保存,保存可以选择xml 或者 json 格式转换。 然后, 发送Ajax 请求到后台, 当前默认的后台请求URL 是:

../service/model/" + params.id + "/save"

 

 

 

2.2. 加载(待完成)

如果要加载之前的jsonxml, 可以在请求当前html时加入名为oryx_modelId query参数,

 window.location.search.indexOf("oryx_modelId=")

那么其值就会被解析成流程图的 model ID,然后发送请求到后台,请求对应的json/xml, 然后解析它, 然后再把它在画布中展现为 流程图 。

"../service/model/" + modelMeta.modelId + "/json"

 

 

注意:

jsonxml 格式必须符合 BPMN2 的流程规范。 也就是说, 我们需要在业务中解析的时候按需提取我们需要的内容, 但是和oryx 交互的时候必须提供BPMN2格式数据。

 

 

2.3. 待完成..

 

当前左部菜单需要按情况定制,其中分组、图标,默认值都需要不断完善:

 

 

 右边的Panel 需要删除无用的属性,展现需要的属性,这个其实可以使用一些汉化包来完成。

 

 

 

双击画布节点,其text 文本框显示位置不对,这个是oryx早期版本的bug,后面其实已经修复了。

 

下载链接: 

https://files.cnblogs.com/files/FlyAway2013/oryx.zip

解压后,放到tomcat下, 访问 view/new.html 即可看到效果。 然后,当然,需要按照实际需求进行定制。

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值