目前activiti提供的Activiti Modeler有兩套，從Activiti5.17后，發(fā)布了新的Activiti Modeler組件。本文主要介紹如何在項目中集成最新的Activiti Modeler.

新版的效果

相比于上一版，個人感覺更加的簡潔,優(yōu)美。并且在Activiti5.20后，完善了很多上版本的bug。
Activiti Modeler內(nèi)部的實現(xiàn)上還是以oryx為圖形組件為內(nèi)核，用angular.js作為界面基本元素的基礎(chǔ)組件以及調(diào)度oryx的API。

Activiti explorer的集成方式

首先，從github下載Activiti源碼.在第一章已經(jīng)列出具體地址:https://github.com/Activiti/Activiti

Activiti Exploer的內(nèi)部結(jié)構(gòu)-Java

├── assembly
├── java
│   └── org
│       └── activiti
├── resources
│   └── org
│       └── activiti
└── webapp
    ├── META-INF
    ├── VAADIN
    │   ├── themes
    │   └── widgetsets
    ├── WEB-INF
    ├── diagram-viewer
    │   ├── images
    │   └── js
    └── editor-app
        ├── configuration
        ├── css
        ├── editor
        ├── fonts
        ├── i18n
        ├── images
        ├── libs
        ├── partials
        ├── popups
        └── stencilsets
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

我們需要關(guān)注的目錄是webapp/editor-app，以及java/org/activiti

新版的Activiti Explorer放棄了XML方式的配置，采用Bean configuration的方式代替。
在org/activiti/explore/conf包中就是各種的配置代碼,在org/activiti/explore/servlet/WebConfigurer類采用Servlet方式配置Servlet映射關(guān)系,映射路徑為/service/*

Activiti Exploer的內(nèi)部結(jié)構(gòu)-Web

新版本Activiti Modeler的Web資源不再像舊版那么散亂，新版本只需要關(guān)注：

• src/main/webapp/editor-app：目錄中包含設(shè)計器里面所有的資源：angular.js、oryx.js以及配套的插件及css
• src/main/webapp/modeler.html：設(shè)計器的主頁面，用來引入各種web資源
• src/main/resources/stencilset.json: bpmn標(biāo)準(zhǔn)里面各種組件的json定義，editor以import使用。

與項目的實際整合

Activiti Rest接口與Spring MVC配置

Maven依賴

Activiti Modeler對后臺服務(wù)的調(diào)用通過Spring MVC方式實現(xiàn)，所有的Rest資源統(tǒng)一使用注解RestController標(biāo)注，所以在整合到自己項目的時候需要依賴Spring MVC，Modeler模塊使用的后臺服務(wù)都存放在activiti-modeler模塊中，在自己的項目中添加依賴：

<dependency>
    <groupId>org.activiti</groupId>
    <artifactId>activiti-modeler</artifactId>
    <version>5.19.0</version>
</dependency>
<dependency>
    <groupId>org.activiti</groupId>
    <artifactId>activiti-diagram-rest</artifactId>
    <version>5.19.0</version>
</dependency>
1
2
3
4
5
6
7
8
9
10

模塊作用：

• activiti-modeler模塊提供模型先關(guān)的操作：創(chuàng)建、保存、轉(zhuǎn)換json與xml格式等
• activiti-diagram-rest模塊用來處理流程圖有關(guān)的功能：流程圖布局（layout）、節(jié)點高亮等

準(zhǔn)備基礎(chǔ)服務(wù)類

復(fù)制文件(hhttps://github.com/whatlookingfor/workfocus/tree/master/src/main/java/org/activiti/explorer) 里面的java文件到自己項目中。(參考咖啡兔的工作流代碼)

Activiti Spring配置

<context:component-scan
            base-package="org.activiti.conf,org.activiti.rest.editor,org.activiti.rest.service">
    <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>

<!-- 單例json對象 -->
<bean id="objectMapper" class="com.fasterxml.jackson.databind.ObjectMapper"/>

<!-- 定義基于Spring引擎配置對象bean -->
<bean id="processEngineConfiguration" class="org.activiti.spring.SpringProcessEngineConfiguration">
    <property name="dataSource" ref="dataSource" />
    <property name="transactionManager" ref="transactionManager" />
    <!--<property name="deploymentResources" value="classpath*:/act/deployments/**/*.bar"/>-->
    <property name="databaseSchemaUpdate" value="true" />
    <property name="jobExecutorActivate" value="true" />
    <property name="history" value="full" />
    <property name="processDefinitionCacheLimit" value="10"/>

    <!-- 生成流程圖的字體 -->
    <property name="activityFontName" value="${activiti.diagram.activityFontName}"/>
    <property name="labelFontName" value="${activiti.diagram.labelFontName}"/>


</bean>


<!--定義引擎工廠bean-->
<bean id="processEngine" class="org.activiti.spring.ProcessEngineFactoryBean">
    <property name="processEngineConfiguration" ref="processEngineConfiguration" />
</bean>

<bean id="repositoryService" factory-bean="processEngine" factory-method="getRepositoryService" />
<bean id="runtimeService" factory-bean="processEngine" factory-method="getRuntimeService" />
<bean id="formService" factory-bean="processEngine" factory-method="getFormService" />
<bean id="identityService" factory-bean="processEngine" factory-method="getIdentityService" />
<bean id="taskService" factory-bean="processEngine" factory-method="getTaskService" />
<bean id="historyService" factory-bean="processEngine" factory-method="getHistoryService" />
<bean id="managementService" factory-bean="processEngine" factory-method="getManagementService" />
<!-- Activiti end -->

<!-- 集成REST服務(wù)需要的bean -->
<bean id="restResponseFactory" class="org.activiti.rest.service.api.RestResponseFactory" />
<bean id="contentTypeResolver" class="org.activiti.rest.common.application.DefaultContentTypeResolver" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

Spring MVC配置

創(chuàng)建文件spring-mvc-rest.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www./schema/beans" xmlns:xsi="http://www./2001/XMLSchema-instance"
    xmlns:context="http://www./schema/context"
    xmlns:mvc="http://www./schema/mvc"
    xsi:schemaLocation="http://www./schema/beans http://www./schema/beans/spring-beans-3.1.xsd
        http://www./schema/context http://www./schema/context/spring-context-3.1.xsd
        http://www./schema/mvc http://www./schema/mvc/spring-mvc-3.1.xsd">

    <!-- 自動掃描且只掃描@Controller -->
    <context:component-scan base-package="org.activiti.rest.editor,org.activiti.rest.diagram">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" />
    </context:component-scan>

    <mvc:annotation-driven />
</beans>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

web.xml配置Servlet服務(wù)

在web.xml中配置下面的Servlet

<servlet>
    <servlet-name>ModelRestServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring-mvc-modeler.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>ModelRestServlet</servlet-name>
    <url-pattern>/service/*</url-pattern>
</servlet-mapping>
1
2
3
4
5
6
7
8
9
10
11
12
13

添加JSONP的過濾器

<filter>
    <filter-name>JSONPFilter</filter-name>
    <filter-class>org.activiti.explorer.JsonpCallbackFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>JSONPFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
1
2
3
4
5
6
7
8

模型設(shè)置器web資源的整合

1. 直接從Activiti Explorer中復(fù)制文件modeler.html文件到src/main/webapp目錄即可，該文件會引入定義基本的布局（div）、引入css以及js文件。

2. 修改editor-app/app-cfg.js文件的contextRoot屬性為自己的應(yīng)用名稱，例如/項目名/service

我個人是在webapp下創(chuàng)建了個activiti的文件夾,然后一股腦把上面的文件全部扔進(jìn)去。不一定需要直接放到webapp下，注意路徑即可。

模型控制器

• create方法中在創(chuàng)建完Model后跳轉(zhuǎn)頁面為modeler.html?modelId=
• 當(dāng)從模型列表編輯某一個模型時也需要把路徑修改為modeler.html?modelId=
  如果像我上面放到activiti文件夾下,此處注意需要修改對應(yīng)的路徑。

整合Activiti Rest

maven依賴

<dependency>
    <groupId>org.activiti</groupId>
    <artifactId>activiti-rest</artifactId>
    <version>5.19.0</version>
</dependency>
1
2
3
4
5

activiti組件包掃描

在activiti的Spring配置文件中增加org.activiti.rest.service包的掃描，具體如下(在上面已經(jīng)加了進(jìn)來，此步驟可以忽略。):

<context:component-scan
            base-package="org.activiti.conf,org.activiti.rest.editor,org.activiti.rest.service">
    <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
1
2
3
4

添加Rest安全認(rèn)證組件

package org.activiti.conf;

import org.activiti.rest.security.BasicAuthenticationProvider;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.AuthenticationProvider;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.annotation.web.servlet.configuration.EnableWebMvcSecurity;
import org.springframework.security.config.http.SessionCreationPolicy;

@Configuration
@EnableWebSecurity
@EnableWebMvcSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {

    @Bean
    public AuthenticationProvider authenticationProvider() {
        return new BasicAuthenticationProvider();
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authenticationProvider(authenticationProvider())
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
            .csrf().disable()
            .authorizeRequests()
            .anyRequest().authenticated()
            .and()
            .httpBasic();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Sping mvc配置文件

創(chuàng)建文件spring-mvc-rest.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www./schema/beans" xmlns:xsi="http://www./2001/XMLSchema-instance"
    xmlns:context="http://www./schema/context"
    xmlns:mvc="http://www./schema/mvc"
    xsi:schemaLocation="http://www./schema/beans http://www./schema/beans/spring-beans-3.1.xsd
        http://www./schema/context http://www./schema/context/spring-context-3.1.xsd
        http://www./schema/mvc http://www./schema/mvc/spring-mvc-3.1.xsd">

    <!-- 自動掃描且只掃描@Controller -->
    <context:component-scan base-package="org.activiti.rest">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" />
    </context:component-scan>

    <mvc:annotation-driven />
</beans>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

配置Servlet映射

<servlet>
    <servlet-name>RestServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring-mvc-rest.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>RestServlet</servlet-name>
    <url-pattern>/rest/*</url-pattern>
</servlet-mapping>
1
2
3
4
5
6
7
8
9
10
11
12
13

訪問Rest接口

現(xiàn)在啟動應(yīng)用可以訪問 http://localhost:8080/your-app/rest/management/properties 以Rest方式查看引擎的屬性列表.

整合過程中的某些優(yōu)化

1. 去掉Activiti Afresco的logo標(biāo)題欄，并且把樣式上的空白欄去掉

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

<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>
1
2
3
4
5
6
7

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

.wrapper.full {
    padding: 40px 0px 0px 0px;
    overflow: hidden;
    max-width: 100%;
    min-width: 100%;
}
1
2
3
4
5
6

1. 在modeler.html中加上CloseWindow的函數(shù),默認(rèn)編輯器關(guān)閉后是加載項目主頁的，以下代碼是直接關(guān)閉該tab頁面。

<script type="text/javascript">
    function CloseWindow(action) {
        if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
        else window.close();
    }
</script>
1
2
3
4
5
6

在editor-app/configuration/toolbar-default-actions.js中,修改以下代碼,注釋為原有代碼

closeEditor: function(services) {
    CloseWindow('ok');
    // window.location.href = "./";
},
1
2
3
4

$scope.saveAndClose = function () {
    $scope.save(function() {
        CloseWindow('ok');
        // window.location.href = "./";
    });
};
1
2
3
4
5
6