A-A+

整合Activiti6.0流程设计器

2019年02月03日 技术, 默认 评论 21 条 阅读 25,004 次

其它相关的文章索引:

  1. 流程设计器整合(含源码)
  2. 整合Activiti6.0流程设计器
  3. Flowable使用Activiti设计器
  4. Flowable6.4 – 整合流程设计器

最近一个多月都在尝试了解Activiti6.0,趁着放假整合编辑器这件事情终于有了些眉目,到此可以总结一下了。


第一步:下载源码

整合的时候肯定要从源码拷贝一些东西,有些问题出现的时候,源码也是非常有效的参考资料,所以要去Github下载源码到本地。


第二步:新建项目

建立个SpringMVC项目,如下图:


第三步:拷贝文件

新建一个文件夹,我这里是“activiti”,然后将Activiti源码中的editor文件夹全部拷贝过来(该文件夹位于\modules\activiti-ui\activiti-app\src\main\webapp内)。如下图:

将所缺失的JS、CSS等静态文件,从Activiti的源工程内拷贝到我们新建的工程,最终的工程如下:


第三步:修改JS

直接运行,我这里的RequestContextRoot为:

localhost:8080/activiti

直接访问地址localhost:8080/activiti/activiti/editor/index.html,在浏览器的调试器内肯定会报一堆错误,解决的步骤如下:

1. 将\activiti\scripts\app-cfg.js内的路径设置为当前值。

ACTIVITI.CONFIG = {
  'onPremise' : true,
  //远程请求根地址
  'contextRoot' : '/activiti',
  //web目录根地址
  'webContextRoot' : '/activiti/activiti'
};

2.  先将app.js里面的“$routeProvider.otherwise”部分注释掉,替换为(为了显示一些隐藏的错误):

$routeProvider.otherwise({
  templateUrl: appResourceRoot + 'editor-app/editor.html',
  controller: 'EditorController'
});

3. 将url-config.js替换为以下内容:

KISBPM.URL = {

    getModel: function(modelId) {
        return ACTIVITI.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/editor/json?version=' + Date.now();
    },

    getStencilSet: function() {
        return ACTIVITI.CONFIG.webContextRoot + '/editor/editor-app/stencilset.json';
    },

    putModel: function(modelId) {
        return ACTIVITI.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/editor/json';
    },

    newModelInfo: function () {
        return ACTIVITI.CONFIG.contextRoot + '/app/rest/models/';
    }
};

4. 找一个stencilset.json文件放到指定的位置。我从"咖啡兔"的开源工程里直接拷贝了一份,其实也可以运行Activiti6的Release War包,然后在开发者工具里面找到对应的地址,然后拷贝一份。

5. 替换oryx.js里面stencilset.json的地址。

6. 在editor-controller.js的fetchModel()内的access方法内增加一行代码:

$rootScope.account = angular.toJson("{\"login\":\"admin\"}");

第四步:增加Controller文件

在工程内新增加一个Controller,我这里的名为“ActivitiAppRest”,主要的代码如下:

@RestController
@RequestMapping("/app/rest/")
public class ActivitiAppRest {

    /**
     * 身份认证
     */

    @RequestMapping("authenticate")
    public Map<String, Object> getAuthenticate() {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("login""admin");
        return map;
    }

    /**
     * 账号信息
     */

    @RequestMapping("account")
    public Map<String, Object> getAccount() {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("email""admin");
        map.put("firstName""My");
        map.put("fullName""Administrator");
        map.put("id""admin");
        map.put("lastName""Administrator");

        Map<String, Object> groupMap = new HashMap<String, Object>();
        map.put("id""ROLE_ADMIN");
        map.put("name""Superusers");
        map.put("type""security-role");

        List<Map<String, Object>> groups = new ArrayList<Map<String, Object>>();
        groups.add(groupMap);

        map.put("groups", groups);

        return map;
    }

    /**
     * 初始化
     */

    @RequestMapping("models")
    public ObjectNode getModels() {
        Map<String, Object> map = new HashMap<String, Object>();
        String jsonStr = "{\"modelId\":\"9dd84f5d-e9ed-44fa-b328-c7646efd766e\",\"name\":\"TEST1\",\"key\":\"TEST\",\"description\":\"\",\"lastUpdated\":\"2019-01-20T15:14:43.200+0000\",\"lastUpdatedBy\":\"admin\",\"model\":{\"id\":\"canvas\",\"resourceId\":\"canvas\",\"stencilset\":{\"namespace\":\"http://b3mn.org/stencilset/bpmn2.0#\"},\"properties\":{\"process_id\":\"TEST\",\"name\":\"TEST1\"},\"childShapes\":[{\"bounds\":{\"lowerRight\":{\"x\":130,\"y\":193},\"upperLeft\":{\"x\":100,\"y\":163}},\"childShapes\":[],\"dockers\":[],\"outgoing\":[],\"resourceId\":\"startEvent1\",\"stencil\":{\"id\":\"StartNoneEvent\"}}],\"modelType\":\"model\"}}";
        JSONObject jsonObject = JSONObject.parseObject(jsonStr);
        return jsonObject;
    }
}

第五步:启动运行

以上都修改完成以后,就可以启动运行了,直接在地址栏输入:

http://localhost:8080/activiti/activiti/editor/index.html#/editor

这只是可以顺利显示静态页面,如果希望能够"创建/修改"流程信息,还需要引入Activiti Jar包,然后修改一下Controller里面的逻辑,稍后会继续讲解。

觉的不错?可以关注我的公众号↑↑↑

21 条留言  访客:1 条  博主:0 条

  1. false

    替换oryx.js里面stencilset.json的地址怎么搞?

    • 哼哼的泰迪熊

      可以去直接下载一份,链接地址:咖啡兔的Github

  2. zz

    博主能在github上开源一下源码吗 我这边一直报jar找不到的错 万分感谢

  3. ....

    你好,请问oryx.js里面要怎么修改stencilset.json的路径

    • 哼哼的泰迪熊

      只需要以stencilset.json为关键字去oryx.js里面去搜索,然后替换就行了。我这里替换成了:
      ACTIVITI.CONFIG.webContextRoot+”/editor/editor-app/stencilset.json”

  4. xiao

    楼主 我的报 这个错误 angular.js:11607 TypeError: Cannot read property ‘namespace’ of undefined
    at a.construct (oryx.js:6662)
    at new a (oryx.js:969)
    at editor-controller.js:49
    at angular.js:9369
    at angular.js:13189
    at l.$eval (angular.js:14401)
    at l.$digest (angular.js:14217)
    at l.$apply (angular.js:14506)
    at l (angular.js:9659)
    at P (angular.js:9849)

    • 哼哼的泰迪熊

      这个错误当时我没遇到,不过你可以打个debugger跟踪一下,在editor-controller第49行开始,看看到底是什么错误,貌似是个对象找不到

  5. michaeldanny

    博主,整合Activiti6.0流程设计器这篇,我用idea导入
    https://gitee.com/blackzs/activiti-demo的项目,调试中遇到“Error 程序包com.alibaba.fastjson不存在”等一大堆报错的问题,估计主要原因类似fastjson依赖问题,POM文件里改了很多都解决不了,请问你有办法吗?

  6. michaeldanny

    哦,更正下,调试用的新的长代码这个版本:https://gitee.com/blackzs/activiti-designer

    • 哼哼的泰迪熊

      可以在Maven面板中Refresh一下或者Reimport一下。

  7. xqt

    咨询一下,源码下载后,没有报错,但不知道怎么使用

  8. xqt

    添加一个启动类,也启动不了,有什么办法试一下嘛

  9. 刘兵

    activiti_designer 这个源码jdk tomcat MySQL 用什么版本的?启动时报数据库链接错误。

    • 哼哼的泰迪熊

      JDK1.8,MySQL5.6/5.7,Tomcat8/9,Activiti已经忘的差不多了,现在主要搞Flowable。

  10. 冯兴凯

    登录到http://localhost:8081/activiti_designer_war/activiti/editor/index.html后,页面正常显示。
    调试模式下:404:
    http://localhost:8081/app/rest/models?filter=myProcesses&modelType=0&sort=modifiedDesc。
    创建新流程的时候,404:http://localhost:8081/app/rest/models。
    也进入不了化流程的页面
    代码是从:https://gitee.com/blackzs/activiti-demo下载的

    • 冯兴凯

      我自己的问题

给我留言

Copyright © 字痕随行 保留所有权利.   Theme  Ality

用户登录

分享到: