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 相關的js、css等。 如其中 view/new.html所示， 同時須要確保這些資源都可以訪問。 而後在須要oryx的地方嵌入：

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

oryx_canvas 是canvas的ID，不可更改。這樣， 咱們就已經將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 是StartNoneEvent， title 是開始，view 是startevent/none.svg， icon 是 startevent/none.png， propertyPackages 是其擁有的屬性，（在畫布中，點擊StartNoneEvent 節點， 右邊的屬性Panel能夠查看到其全部的屬性）分別是[ "elementbase", "baseattributes", "formdefinition", "nonestarteventbase", "executionlistenersbase" ]

 

，roles 是它擁有的角色：["Startevents_all", "sequence_start", "StartEventsMorph", "all"]

 

 

l stencils之 ManualTask 節點

{

    "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. 加載（待完成）

若是要加載以前的json或xml， 能夠在請求當前html時加入名爲oryx_modelId 的query參數，

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

那麼其值就會被解析成流程圖的 model ID，而後發送請求到後臺，請求對應的json/xml, 而後解析它， 而後再把它在畫布中展示爲 流程圖 。

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

 

 

注意：

json或xml 格式必須符合 BPMN2 的流程規範。 也就是說， 咱們須要在業務中解析的時候按需提取咱們須要的內容， 可是和oryx 交互的時候必須提供BPMN2格式數據。

 

 

2.3. 待完成..

 

當前左部菜單須要按狀況定製，其中分組、圖標，默認值都須要不斷完善：

 

 

 右邊的Panel 須要刪除無用的屬性，展示須要的屬性，這個其實可使用一些漢化包來完成。

 

 

 

雙擊畫布節點，其text 文本框顯示位置不對，這個是oryx早期版本的bug，後面其實已經修復了。

 

下載連接： 

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

解壓後，放到tomcat下， 訪問 view/new.html 便可看到效果。 而後，固然，須要按照實際需求進行定製。