整合Acitiviti在線流程設計器(Activiti-Modeler 5.18.0)

整合Acitiviti在線流程設計器(Activiti-Modeler 5.18.0)

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引用。

Xml代碼  

1. <dependency>  

2.             <groupId>org.activiti</groupId>  

3.             <artifactId>activiti-engine</artifactId>  

4.             <version>5.18.0</version>  

5.         </dependency>  

6.         <dependency>  

7.             <groupId>org.activiti</groupId>  

8.             <artifactId>activiti-spring</artifactId>  

9.             <version>5.18.0</version>  

10.             <exclusions>  

11.                 <exclusion>  

12.                     <artifactId>commons-dbcp</artifactId>  

13.                     <groupId>commons-dbcp</groupId>  

14.                 </exclusion>  

15.             </exclusions>  

16.         </dependency>  

17.         <dependency>  

18.             <groupId>org.activiti</groupId>  

19.             <artifactId>activiti-diagram-rest</artifactId>  

20.             <version>5.18.0</version>  

21.         </dependency>  

22.         <dependency>  

23.             <groupId>batik</groupId>  

24.             <artifactId>batik-transcoder</artifactId>  

25.             <version>1.7</version>  

26.         </dependency>  

27.         <dependency>  

28.             <groupId>batik</groupId>  

29.             <artifactId>batik-dom</artifactId>  

30.             <version>1.7</version>  

31.         </dependency>  

32.         <dependency>  

33.             <groupId>org.activiti</groupId>  

34.             <artifactId>activiti-json-converter</artifactId>  

35.             <version>5.18.0</version>  

36.             <exclusions>  

37.                 <exclusion>  

38.                     <artifactId>commons-collections</artifactId>  

39.                     <groupId>commons-collections</groupId>  

40.                 </exclusion>  

41.             </exclusions>  

42.         </dependency>  

43.         <dependency>  

44.             <groupId>batik</groupId>  

45.             <artifactId>batik-bridge</artifactId>  

46.             <version>1.7</version>  

47.         </dependency>  

48.         <dependency>  

49.             <groupId>batik</groupId>  

50.             <artifactId>batik-css</artifactId>  

51.             <version>1.7</version>  

52.         </dependency>  

53.         <dependency>  

54.             <groupId>batik</groupId>  

55.             <artifactId>batik-anim</artifactId>  

56.             <version>1.7</version>  

57.         </dependency>  

58.         <dependency>  

59.             <groupId>batik</groupId>  

60.             <artifactId>batik-codec</artifactId>  

61.             <version>1.7</version>  

62.         </dependency>  

63.         <dependency>  

64.             <groupId>batik</groupId>  

65.             <artifactId>batik-ext</artifactId>  

66.             <version>1.7</version>  

67.         </dependency>  

68.         <dependency>  

69.             <groupId>batik</groupId>  

70.             <artifactId>batik-gvt</artifactId>  

71.             <version>1.7</version>  

72.         </dependency>  

73.         <dependency>  

74.             <groupId>batik</groupId>  

75.             <artifactId>batik-script</artifactId>  

76.             <version>1.7</version>  

77.         </dependency>  

78.         <dependency>  

79.             <groupId>batik</groupId>  

80.             <artifactId>batik-parser</artifactId>  

81.             <version>1.7</version>  

82.         </dependency>  

83.         <dependency>  

84.             <groupId>batik</groupId>  

85.             <artifactId>batik-svg-dom</artifactId>  

86.             <version>1.7</version>  

87.         </dependency>  

88.         <dependency>  

89.             <groupId>batik</groupId>  

90.             <artifactId>batik-svggen</artifactId>  

91.             <version>1.7</version>  

92.         </dependency>  

93.         <dependency>  

94.             <groupId>batik</groupId>  

95.             <artifactId>batik-util</artifactId>  

96.             <version>1.7</version>  

97.         </dependency>  

98.         <dependency>  

99.             <groupId>batik</groupId>  

100.             <artifactId>batik-xml</artifactId>  

101.             <version>1.7</version>  

102.         </dependency>  

103.         <dependency>  

104.             <groupId>org.apache.xmlgraphics</groupId>  

105.             <artifactId>batik-js</artifactId>  

106.             <version>1.7</version>  

107.         </dependency>  

108.         <dependency>  

109.             <groupId>xml-apis</groupId>  

110.             <artifactId>xml-apis-ext</artifactId>  

111.             <version>1.3.04</version>  

112.         </dependency>  

113.         <dependency>  

114.             <groupId>xml-apis</groupId>  

115.             <artifactId>xml-apis</artifactId>  

116.             <version>1.3.04</version>  

117.         </dependency>  

118.         <dependency>  

119.             <groupId>org.apache.xmlgraphics</groupId>  

120.             <artifactId>xmlgraphics-commons</artifactId>  

121.             <version>1.2</version>  

122.         </dependency>  

123.         <dependency>  

124.             <groupId>batik</groupId>  

125.             <artifactId>batik-awt-util</artifactId>  

126.             <version>1.7</version>  

127.         </dependency>  

128.         <dependency>  

129.             <groupId>commons-collections</groupId>  

130.             <artifactId>commons-collections</artifactId>  

131.             <version>3.2.1</version>  

132.         </dependency>  

133.         <dependency>  

134.             <groupId>commons-lang</groupId>  

135.             <artifactId>commons-lang</artifactId>  

136.             <version>2.6</version>  

137.         </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訪問。

Java代碼  

1. <!--加入Spring Activiti-Modeler的運行配置-->  

2.     <context:component-scan base-package="com.redxun.bpm.rest.diagram"/>  

3.     <context:component-scan base-package="com.redxun.bpm.rest.editor"/>  

在web.xml中配置攔截這些訪問路徑

Java代碼  

1. <servlet-mapping>  

2.     <servlet-name>springMvc</servlet-name>  

3.     <url-pattern>/service/*</url-pattern>  

4. ;/servlet-mapping>  

3.6. 修改process-editor下的一些配置文件，以支持我們的在線流程設計

A)去掉Activiti Afresco的logo標題欄，并且把樣式上的空白欄去掉

修改modeler.html中的以下內容，注意不要把該文本刪除，建議加style=”display:none”,刪除后其會造成底層下的一些內容有40個像數的東西顯示不出來。

Java代碼  

1. <div class="navbar navbar-fixed-top navbar-inverse" role="navigation" id="main-header">  

2.         <div class="navbar-header">  

3.             <a href="" ng-click="backToLanding()" class="navbar-brand"  

4.                title="{{'GENERAL.MAIN-TITLE' | translate}}"><span  

5.                     class="sr-only">{{'GENERAL.MAIN-TITLE' | translate}}</span></a>  

6.         </div>  

7.     </div>  

 B)在editor-app/css/style-common.css中，把以下樣式的padding-top部分改為0px;

Java代碼  

1. .wrapper.full {  

2.     padding: 40px 0px 0px 0px;  

3.     overflow: hidden;  

4.     max-width: 100%;  

5.     min-width: 100%;  

6. }  

 C）在modeler.html中加上CloseWindow的函數

Js代碼  

1. <script type="text/javascript">  

2.         function CloseWindow(action) {  

3.             if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);  

4.             else window.close();              

5.         }  

6.     </script>  

 目的是為了保存模型時，可以關閉當前的彈出的mini窗口，修改保存后彈出的窗口的保存及關閉動作，如下所示，把editor-app/configuration/toolbar-default-action.js的以下函數：

Java代碼  

1.    $scope.saveAndClose = function () {  

2.         $scope.save(function() {  

3.             window.location.href = "./";  

4.         });  

5. };  

 改成以下：

Java代碼  

1. $scope.saveAndClose = function () {  

2.         $scope.save(function() {  

3.             CloseWindow('ok');  

4.         });  

5.     };  

 D） 修改editor-app編輯器的根目錄，如app-cfg.jsJava代碼  

1. ACTIVITI.CONFIG = {  

2.         'contextRoot' : '/activiti-explorer/service',  

3. };  

 改成自己的根目錄：Java代碼  

1. ACTIVITI.CONFIG = {  

2.     'contextRoot' : '/redxun_web/service',  

3. };  

 在實際的項目中，可以把這些ContextRoot改成動態的獲值方式   至此，重啟你的應用后，可直接進入目錄訪問modeler.html頁面。直接訪問該頁面時，框架會出現，但是沒有出現你想要的內容。這是因為后臺出錯了，這個頁面要能正常訪問要求必須傳入Activiti的設計Model的Id，即act_re_model表中的主鍵，訪問路徑如：Myroot/process-editor/modeler.html?modelId=12312312。但這個表的記錄怎么產生，這里需要調用一下Acitiviti的API來創建，如下代碼片段可以實現該功能。Java代碼  

1. String descp=request.getParameter("description");  

2.             ObjectMapper objectMapper = new ObjectMapper();  

3.             ObjectNode editorNode = objectMapper.createObjectNode();  

4.             editorNode.put("id", "canvas");  

5.             editorNode.put("resourceId", "canvas");  

6.             ObjectNode stencilSetNode = objectMapper.createObjectNode();  

7.             stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");  

8.             editorNode.set("stencilset", stencilSetNode);  

9.             Model modelData = repositoryService.newModel();  

10.               

11.             ObjectNode modelObjectNode = objectMapper.createObjectNode();  

12.             modelObjectNode.put(MODEL_NAME, actReModel.getName());  

13.             modelObjectNode.put(MODEL_REVISION, 1);  

14.             //String description = null;  

15.              

16.             modelObjectNode.put(MODEL_DESCRIPTION, descp);  

17.             modelData.setMetaInfo(modelObjectNode.toString());  

18.             modelData.setName(actReModel.getName());  

19.               

20.             repositoryService.saveModel(modelData);  

21.             repositoryService.addModelEditorSource(modelData.getId(), editorNode.toString().getBytes("utf-8"));  

 至此，整合創建完成，后續我們會基于Activiti上進行擴展，以實現流程在線定義，流程人員掛接、表單關聯、×××事項、代理、轉辦、歸檔等復雜的中國特色流程的需求。在線訪問整合效果，如：

查看整合的視頻效果如下：

在線整合的效果如登錄后的流程管理--流程定義設計--添加流程

了解咨詢:1361783075