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; // 中部畫布窗口的高度，也是左部右部
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，後面其實已經修復了。
oryx 分離&集成