我的了解activiti explorer及其vaadin實作方式博文裡提到activiti explorer使用的是vaadin架構，但是activiti 模型編輯器元件卻沒用使用vaadin架構，而是采用angular.js的mvc模式。activiti
模型編輯器元件的用戶端代碼位于activiti\modules\activiti-webapp-explorer2\src\main\webapp\editor-app\。
該目錄下的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表
通過apache™ batik svg toolkit将模型的svg圖像資料轉換成png格式，通過repositoryservice的addmodeleditorsourceextra方法将png圖像存入資料庫的act_ge_bytearray表
對模型的編輯操作是在activiti model editor元件裡實作的，對已儲存模型的其他操作還是在activiti explorer裡基于vaadin架構實作的。
用戶端代碼位于：activiti\modules\activiti-explorer\src\main\java\org\activiti\editor\ui\。
下圖的html界面由editorprocessdefinitiondetailpanel.java實作。
選擇模型，會調用editorprocessdefinitionpage類的showprocessdefinitiondetail方法
editorprocessdefinitiondetailpanel類的initui方法調用initprocessdefinitioninfo方法，它會加入editorprocessdefinitioninfocomponent執行個體
在構造editorprocessdefinitioninfocomponent執行個體時，其initimage方法會被調用，通過repositoryservice的getmodeleditorsourceextra方法獲得png格式圖像，最終被顯示到浏覽器界面上。
editorprocessdefinitiondetailpanel類的deploymodel方法處理部署已儲存模型的操作。
通過repositoryservice的getmodeleditorsource方法獲得模型json資料的utf8字元串
通過fasterxml/jackson-databind轉換成java對象樹
通過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方法處理上傳的bpmn xml資料。
通過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圖像？
資料庫存儲的模型資料不采用bpmn xml格式而是采用json格式，很靈活，可以随意添加activiti擴充内容。但是如果沒有現成的json schema，分析起來夠麻煩。