一、引言

Activiti Modeler 離不開spring，因此我們需要建立一個簡單的spring專案。這個專案的名為：bamboo-activiti，bamboo-activiti專案簡單實現了springmvc跳轉的hello world介面。

bamboo-activiti下面下載如下。

bamboo-activiti專案

下載：http://pan.baidu.com/s/1pL8st4Z

Spring版本：4.15（因為在Activiti 5.22.0中用到4.15版本，所以也選擇此版本）

Spring預設配置檔案applicationMVC.xml

配置applicationMVC.xml：此配置檔案主要配置SpringMVC的掃描註解和頁面去向

二、將Activiti Modeler5.22.0整合到bamboo-activiti專案中

整合需要的資源如下：

1.官方下載Activiti 原始碼： https://github.com/Activiti/Activiti ，雲盤下載：http://pan.baidu.com/s/1geVZaoz，如下：

2.下載Activiti 5.22.0：http://pan.baidu.com/s/1eRWHaBw （我已經下載好了的）。官網下載地址：https://www.activiti.org/ 

1、解壓Activiti-master.zip，找到modules\activiti-webapp-explorer2\src\main\webapp下的diagram-viewer、editor-app、modeler.html，將其加到bamboo-activiti專案的webapp中。（這一步主要是Activiti Modeler的前段頁面）

2、解壓activiti-5.22.0.zip，找到wars在的activiti-explorer.war，將其放在tomcat的webapps下，啟動tomcat將其解壓，找activiti-explorer\WEB-INF\lib，拷貝所有jar包到bamboo-activiti的lib下。

3、給Activiti Modeler做配置檔案applicationActiviti.xml：在並bamboo-activiti專案中新增名為，applicationActiviti.xml的配置檔案，並在applicationContext.xml中引入import，

在Activiti-master中找到stencilset.json檔案加到bamboo-activiti專案的配置檔案裡面。

applicationActiviti.xml的主要配置如下：

4、在Activiti 5.22.0的libs中找到activiti-modeler-5.22.0-sources.jar，將其解壓，可以看到如下：

 ， 

在bamboo-activiti專案中建立包名為：com.rest.editor，將上圖3個類加到其中，如下圖示：

回看第3步applicationActiviti.xml配置所指向的路徑就是這3個類，這3個類就是Activiti Modeler的後臺配置類。

5、在editor-app中找到app-cfg.js檔案，將'contextRoot' : '/activiti-explorer/service',修改為本專案的路徑。如下：

6，編寫Activiti Modeler 頁面跳轉程式碼，如下：

 /**
     * 建立模型
     */
    @RequestMapping("create")
    public void create(HttpServletRequest request, HttpServletResponse response) {
        try {
        	ProcessEngine processEngine = ProcessEngines.getDefaultProcessEngine();
        	 
        	RepositoryService repositoryService = processEngine.getRepositoryService();
        	 
            ObjectMapper objectMapper = new ObjectMapper();
            ObjectNode editorNode = objectMapper.createObjectNode();
            editorNode.put("id", "canvas");
            editorNode.put("resourceId", "canvas");
            ObjectNode stencilSetNode = objectMapper.createObjectNode();
            stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");
            editorNode.put("stencilset", stencilSetNode);
            Model modelData = repositoryService.newModel();

            ObjectNode modelObjectNode = objectMapper.createObjectNode();
            modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME, "hello1111");
            modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
            String description = "hello1111";
            modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION, description);
            modelData.setMetaInfo(modelObjectNode.toString());
            modelData.setName("hello1111");
            modelData.setKey("12313123");

            //儲存模型
            repositoryService.saveModel(modelData);
            repositoryService.addModelEditorSource(modelData.getId(), editorNode.toString().getBytes("utf-8"));
            response.sendRedirect(request.getContextPath() + "/modeler.html?modelId=" + modelData.getId());
        } catch (Exception e) {
            System.out.println("建立模型失敗：");
        }
    }

注意：右鍵屬性，將下圖：

改

8、別忘了Activiti 5.22.0資料庫，在Activiti 5.22.0.zip中。

三、整合專案bamboo-activiti

1）整合中文版下載：http://pan.baidu.com/s/1miHRTPY

瀏覽器訪問：http://localhost:8080/bamboo-activiti/

首頁

activiti-modele

2）整合英文版下載：http://pan.baidu.com/s/1eS8AIoa

首頁：

四、Activiti-5.16資料下載

下載地址：http://pan.baidu.com/s/1miHlZBy

五、Activiti5.22.0