整合Acitiviti線上流程設計器(Activiti-Modeler )
1.概述前言
一直以來都是從事大量的工作流相關的專案，用過很多商用的工作流產品，包括國內與國外的，儘管商用的工作產品在UI操作上比較人性化，但個人使用者覺得，這東西只需要一些初級使用者，對於我們一直在為一些高階的客戶提供一些專業的資料整合、流程梳理、系統間的資料穿透時，這些系統因為不開源，給專案的實施帶來巨大的風險，在一些專案栽過跟頭後，我更偏向於使用開源的平臺了。但開源平臺最大的難點是在於你是否有足夠的技術人員來學習及掌握它，否則，它也一樣面臨專案實施失敗的風險。後來在一些專案上使用JBPM4，Activiti5，發現Activiti5的流程功能真的很強大，幾乎是無所不能。套用一句廣告語，老闆再也不擔心我的流程實現了。在實施國外的專案時，流程的設計幾乎是交給開發人員來處理的，因此用Activiti的合適的。但在國內，我們的客戶則提出更高的要求，要求普通的人員也可以參與流程的設計要求。Activiti後續的版本也在完善這些功能，特別是Activiti-5.18版本，Activiti-Modeler的建模工具幾乎進行了重寫，看來Activiti的開源團隊也慢慢意識了這點，加大了人力在這方面的投入，以目前的使用，可以達到商用級別，通過功能的擴充套件，可以很好實現線上流程建模。
為了平臺未來的延伸擴充套件，我建議直接使用該團隊的Activiti-Modeler，原因很簡單，可以有效跟著團隊進行產品的升級，當然我們也需要擴充套件自己的特色功能，這塊我在後面不斷把文章寫出來，以供大家學習。
在此，先展示一下我在JSAAS平臺上初步整合Activiti-Modeler的效果：
說實話，雖然這設計器還有一些小小的缺陷，但仍然阻止不了我愛它，因為全新自己開發這東西，那是比較要命的，呵呵，苦逼的程式設計師呀。於是我多麼希望在我的Activiti的流程應用裡，直接就帶這麼一款應用。
現實提美好的， 整合是苦逼的，於是就有本文的出現。
在我的部落格前一篇中，已經有說明如何利用Activiti-Modeler的原始碼跑起來，加至eclipse下執行起來，在本文中即是以該文為基礎，進行本文的說明及整合。
2. 整合Activiti-Modeler的要求
Activiti-Modeler 5.18用了新的WEB框架，其是基於Spring-Mvc 4.0以上的框架，同時用了VAADIN的RIA的UI，特別是後者，這框架帶有太多的jar包，雖然它也是結合了spring來使用，要整合這玩意，幾乎就得把這東西加入我們的專案中，同時還需要整合它的使用者管理，這是要命的。我們的出發點，僅是用它的前端畫圖處理功能，後端的流程邏輯處理即由我們來實現。
於是我研究了一下Activiti-webapp-explorer2專案，發現要實現我以上的目標，原來很簡單。以下假定我的環境要求，以下為我的原專案的環境，是基於Spring 3的，我的平臺可直接轉為Spring4.0,特別是Spring-MVC的環境也轉成4.0
3. 整合步驟
3.1. 把前端的設計器檔案從activiti-webapp-explorer2拷至我平臺上新建的目錄process-editor，如下圖所示：
同時把resources下的stencilset.json檔案拷至我的專案中的resources目錄下。
3.2.在Spring專案中加入Activiti 5.18的依賴引用，注意，不能直接從explorer專案中直接取，那樣會帶有很多無用的jar包，以下為精簡後的pom引用 博文來源：http://www.fhadmin.org/webnewsdetail1.html。
<dependency> <groupId>org.activiti</groupId> <artifactId>activiti-engine</artifactId> <version>5.19.0</version> </dependency> <dependency> <groupId>org.activiti</groupId> <artifactId>activiti-spring</artifactId> <version>5.19.0</version> <exclusions> <exclusion> <artifactId>commons-dbcp</artifactId> <groupId>commons-dbcp</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.activiti</groupId> <artifactId>activiti-diagram-rest</artifactId> <version>5.19.0</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-transcoder</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-dom</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>org.activiti</groupId> <artifactId>activiti-json-converter</artifactId> <version>5.19.0</version> <exclusions> <exclusion> <artifactId>commons-collections</artifactId> <groupId>commons-collections</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-bridge</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-css</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-anim</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-codec</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-ext</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-gvt</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-script</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-parser</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-svg-dom</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-svggen</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-util</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-xml</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>org.apache.xmlgraphics</groupId> <artifactId>batik-js</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>xml-apis</groupId> <artifactId>xml-apis-ext</artifactId> <version>1.3.04</version> </dependency> <dependency> <groupId>xml-apis</groupId> <artifactId>xml-apis</artifactId> <version>1.3.04</version> </dependency> <dependency> <groupId>org.apache.xmlgraphics</groupId> <artifactId>xmlgraphics-commons</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>batik</groupId> <artifactId>batik-awt-util</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2.1</version> </dependency> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.6</version> </dependency>
如不採用common-dbcp的資料來源時，以上配置排除該包的引用，
Batik的包主要是用來解析html中的svg的內容，包比較多，但都不大。
3.3.配置如下的spring-activiti.xml檔案，其格式如下所示（可從activiti-webapp-explorer2下的resources的activiti-custom-context.xml檔案拷出來），把以下的一些用到explorer表單的配置資訊刪除。因為我們不採用其表單的配置資訊。
注意點：
1. 擴充套件實現自身的idGenerator
目的是為了產生唯一的資料主鍵，方法很多，請自行實現，不擴充套件也可以。
2. 配置對應的資料連線資訊及資料來源、事務等
3.4 .在Spring的配置檔案中引入spring-activiti.xml，啟動應用程式即可，可看到其已經把資料庫表創建出來。
3.5. 處理Activiti-Moderler的後臺處理的配置。即建立模型設計、儲存、更新等內容，它需要與後端進行互動處理。我們看了activiti-webapp-explorer2的web.xml就清楚其後臺互動的處理模式。
簡要說明：explorer2這個專案在啟動後，就會spring mvc4進行包掃描，把（請參考org.activiti.explorer.servlet.DispatcherServletConfiguration）,org.activiti.rest.editor、org.activiti.rest.diagram包下的Controller掃描至響應對映中來，為的就是實現編輯器及設計模型的流程展示時，相應有對應的controller服務。
因此，我們比較好的辦法就是重寫這些controller即可，這些controller的實現也很簡單，在這裡，我最簡單的做法就是把這些類直接拷到我的專案中，重新命名了包名。（當然也可以直接把以上兩包通過pom依賴加進來），本人不想自己的專案帶有太多的依賴包，所以不直接引用了。
拷完後，我這裡的包如下所示：
在SpringMVC中載入這些包，注意，SpringMvc需要為4.0以上的，這樣才能比較好支援RestController的註解方式，否則，請用舊的方式來支援這種Rest URL訪問。
<!--加入Spring Activiti-Modeler的執行配置--> <context:component-scan base-package="com.redxun.bpm.rest.diagram"/> <context:component-scan base-package="com.redxun.bpm.rest.editor"/>
在web.xml中配置攔截這些訪問路徑
<servlet-mapping> <servlet-name>springMvc</servlet-name> <url-pattern>/service/*</url-pattern> </servlet-mapping>
3.6. 修改process-editor下的一些配置檔案，以支援我們的線上流程設計
A)去掉Activiti Afresco的logo標題欄，並且把樣式上的空白欄去掉
修改modeler.html中的以下內容，注意不要把該文字刪除，建議加style=”display:none”,刪除後其會造成底層下的一些內容有40個像數的東西顯示不出來。
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation" id="main-header"> <div class="navbar-header"> <a href="" ng-click="backToLanding()" class="navbar-brand" title="{{'GENERAL.MAIN-TITLE' | translate}}"><span class="sr-only">{{'GENERAL.MAIN-TITLE' | translate}}</span></a> </div> </div>
B)在editor-app/css/style-common.css中，把以下樣式的padding-top部分改為0px;
.wrapper.full {
padding: 40px 0px 0px 0px;
overflow: hidden;
max-width: 100%;
min-width: 100%;
}C）在modeler.html中加上CloseWindow的函式
<script type="text/javascript"> function CloseWindow(action) { if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action); else window.close(); } </script>
目的是為了儲存模型時，可以關閉當前的彈出的mini視窗，修改儲存後彈出的視窗的儲存及關閉動作
博文來源：http://www.fhadmin.org/webnewsdetail1.html