粗覽Activiti Modeler操作和源代碼

該目錄下的editor.html是Activiti Modeler Editor的主界面HTML代碼 

其中palette區是通過Angular.JS使用stencilsets\bpmn2.0\icons下多個子目錄内的PNG圖像形成的多組清單。其節點層次關系擷取相關代碼為： 

stencil-controller.js

Activiti\modules\activiti-modeler\src\main\java\org\activiti\rest\editor\main\StencilsetRestResource.java

Activiti\modules\activiti-webapp-explorer2\src\main\resources\stencilset.json

editor.html中的視圖與兩個控制器進行了綁定: 

stencil-controller.js：處理對canvas中BPMN元素的操作，很多處理是通過editor目錄下的QRYX庫完成的

toolbar-controller.js：處理對工具欄的操作，很多處理由configuration\toolbar-default-actions.js完成

儲存模型操作，是通過toolbar-default-actions.js中的SaveModel方法完成的，它需要将三部分資訊傳給伺服器： 

模型的中繼資料：例如模型名稱、分類、建立時間、最後一次更新時間等等

模型JSON資料：将canvas内的圖像資料轉換成JSON資料UTF8字元串

模型的SVG圖像資料：将canvas中的SVG圖像資料經過過濾處理而得

伺服器側儲存模型的代碼位于Activiti\modules\activiti-modeler\src\main\java\org\activiti\rest\editor\model\ModelSaveRestResource.java。

通過RepositoryService的saveModel方法将模型的中繼資料存入資料庫的ACT_RE_MODEL表

通過RepositoryService的addModelEditorSource方法将模型JSON資料UTF8字元串存入資料庫的ACT_GE_BYTEARRAY表

對模型的編輯操作是在Activiti Model Editor元件裡實作的，對已儲存模型的其他操作還是在ActivitiExplorer裡基于Vaadin架構實作的。 

用戶端代碼位于：Activiti\modules\activiti-explorer\src\main\java\org\activiti\editor\ui\。 

選擇模型，會調用EditorProcessDefinitionPage類的showProcessDefinitionDetail方法

EditorProcessDefinitionDetailPanel類的initUI方法調用initProcessDefinitionInfo方法，它會加入EditorProcessDefinitionInfoComponent執行個體

在構造EditorProcessDefinitionInfoComponent執行個體時，其initImage方法會被調用，通過RepositoryService的getModelEditorSourceExtra方法獲得PNG格式圖像，最終被顯示到浏覽器界面上。

EditorProcessDefinitionDetailPanel類的deployModel方法處理部署已儲存模型的操作。 

通過RepositoryService的getModelEditorSource方法獲得模型JSON資料的UTF8字元串

通過Activiti\modules\activiti-json-converter\src\main\java\org\activiti\editor\language\json\converter\BpmnJsonConverter.java将模型JSON資料的Java對象樹轉換成BpmnModel執行個體

通過Activiti\modules\activiti-bpmn-converter\src\main\java\org\activiti\bpmn\converter\BpmnXMLConverter.java将BpmnModel執行個體轉成BPMN XML資料

通過RepositoryService的createDeployment方法将BPMN XML資料進行部署

EditorProcessDefinitionDetailPanel類的exportModel方法處理導出已儲存模型的操作。 

通過RepositoryService的getModelEditorSource方法獲得模型資料的JSON字元串

EditorProcessDefinitionDetailPanel類内注冊了EditModelClickListener監聽器用于處理導入BPMN模型操作。 

EditModelClickListener的showModeler會生成通路模型編輯器元件的URL位址，打開指定的模型。 

Activiti\modules\activiti-webapp-explorer2\src\main\webapp\editor-app\app.js中的監聽器處理$includeContentLoaded事件，調用了fetchModel方法

Activiti\modules\activiti-modeler\src\main\java\org\activiti\rest\editor\model\ModelEditorJsonRestResource.java處理該REST請求，傳回由RepositoryService的getModel和getModelEditorSource方法獲得Activiti模型中繼資料和JSON資料

EditorProcessDefinitionDetailPanel類内注冊了ImportModelClickListener監聽器用于處理導入BPMN模型操作。 

ImportPopupWindow界面完成BPMN模型操作後，ImportUploadReceiver類的deployUploadedFile方法處理上傳的BPMNXML資料。 

通過Activiti\modules\activiti-bpmn-converter\src\main\java\org\activiti\bpmn\converter\BpmnXMLConverter.java将BPMN XML資料轉換成BpmnModel執行個體

通過BpmnModel執行個體生成模型的中繼資料，通過RepositoryService的saveModel方法将模型的中繼資料存入資料庫的ACT_RE_MODEL表

通過Activiti\modules\activiti-json-converter\src\main\java\org\activiti\editor\language\json\converter\BpmnJsonConverter.java将BpmnModel執行個體轉換成模型JSON資料的Java對象樹，通過RepositoryService的addModelEditorSource方法将模型JSON資料UTF8字元串存入資料庫的ACT_GE_BYTEARRAY表

一些疑惑和想法： 

這裡BpmnXMLConverter和BpmnJsonConverter用的比較頻繁，而且成對出現。為什麼不跳過中間的BpmnModel？

導入BPMN模型為什麼不生成PNG圖像？

資料庫存儲的模型資料不采用BPMNXML格式而是采用JSON格式，很靈活，可以随意添加Activiti擴充内容。但是如果沒有現成的JSONschema，分析起來夠麻煩。

本文轉自二郎三郎部落格園部落格，原文連結：http://www.cnblogs.com/haore147/p/7161964.html，如需轉載請自行聯系原作者