美文网首页activiti工作流IT技术篇前端
【activiti】整合官方编辑器插件

【activiti】整合官方编辑器插件

作者: JerryL_ | 来源:发表于2017-03-03 15:07 被阅读4929次

    1.编辑器界面

    流程编辑器

    2.插件下载

    activiti的explore模块:
    https://github.com/Activiti/Activiti/tree/master/modules/activiti-webapp-explorer2

    3.编辑器前端部分

    仅保留一些静态资源就行了,将这些文件放入项目的web目录下。


    需要的文件

    其中的editor-app就是编辑器,modeler.html是编辑器的入口页面。
    diagram-viewer是流程跟踪插件,虽然这次用不着,但之后会用到。

    还有一个界面组件文件,在resource下,名称叫stencilset.json。本身是英文的,可以通过替换它来达到汉化的效果。但现在还是先把它放到项目中去。


    界面组件

    在editor-app/app-cfg.js中配置一下项目url。这个url是编辑器相关的后台服务的url。

    ACTIVITI.CONFIG = {
        'contextRoot' : '/service',
    };
    

    我去掉了项目名。

    4.后端部分

    先引入两个activiti的模块,因为编辑器会用到这两个模块。

            <dependency>
                <groupId>org.activiti</groupId>
                <artifactId>activiti-modeler</artifactId>
                <version>${activiti.version}</version>
            </dependency>
    
            <dependency>
                <groupId>org.activiti</groupId>
                <artifactId>activiti-diagram-rest</artifactId>
                <version>${activiti.version}</version>
            </dependency>
    

    其中需要将modeler模块的源代码放到src中,因为需要在其中做部分修改,主要是url的映射。

    源码:
    https://github.com/Activiti/Activiti/tree/master/modules/activiti-modeler

    其中有3个类,都是Controller:

    StencilsetRestResource #获取编辑器组件及配置项信息。
    ModelEditorJsonRestResource #根据modelId获取model的节点信息,编辑器根据返回的json进行绘图。
    ModelSaveRestResource #编辑器制图之后,将节点信息以json的形式提交给这个Controller,然后由其进行持久化操作。
    

    需要修改的地方就三个,在每个Controller类上加上@RequestMapping注解,并指定值为"service"(对应前台app-cfg.js中配置的url)。

    ···
    @RequestMapping("service")
    public class StencilsetRestResource {
    ···
    
    ···
    @RequestMapping("service")
    public class ModelEditorJsonRestResource implements ModelDataJsonConstants {
    ···
    
    ···
    @RequestMapping("service")
    public class ModelSaveRestResource implements ModelDataJsonConstants {
    ···
    

    最后别忘了添加包扫描,扫描activiti提供的这些controller。

    @SpringBootApplication
    @ComponentScan({"org.activiti","com.jerryl"})
    public class SpringBootWithActivitiApplication {
    ···
    

    这样整合部分就基本结束了,此时编辑器已经可以使用了。

    至于界面的汉化,界面上各个组件,各个标签上的文字都是在resource下的stencilset.json文件中设置的,可以在网上找一个汉化后的stencilset.json文件替换掉,就能看到中文界面了。

    5.modeler相关方法的封装

    主要需要封装4个方法:1.新建一个空的模型;2.所有模型列表;3.发布模型;4.删除模型;(activiti已提供了保存和获取模型节点信息的方法,就是上面的那3个类)
    由于这里涉及前后端交互,实现方式随意,主要是activiti的api的调用。

    参考代码:

    /**
     * Created by liuruijie on 2017/2/21.
     * 模型管理
     */
    @RestController
    @RequestMapping("models")
    public class ModelerController {
    
        @Autowired
        ProcessEngine processEngine;
        @Autowired
        ObjectMapper objectMapper;
    
        /**
         * 新建一个空模型
         * @return
         * @throws UnsupportedEncodingException
         */
        @PostMapping
        public Object newModel() throws UnsupportedEncodingException {
            RepositoryService repositoryService = processEngine.getRepositoryService();
            //初始化一个空模型
            Model model = repositoryService.newModel();
    
            //设置一些默认信息
            String name = "new-process";
            String description = "";
            int revision = 1;
            String key = "process";
    
            ObjectNode modelNode = objectMapper.createObjectNode();
            modelNode.put(ModelDataJsonConstants.MODEL_NAME, name);
            modelNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION, description);
            modelNode.put(ModelDataJsonConstants.MODEL_REVISION, revision);
    
            model.setName(name);
            model.setKey(key);
            model.setMetaInfo(modelNode.toString());
    
            repositoryService.saveModel(model);
            String id = model.getId();
    
            //完善ModelEditorSource
            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);
            repositoryService.addModelEditorSource(id,editorNode.toString().getBytes("utf-8"));
            return ToWeb.buildResult().redirectUrl("/modeler.html?modelId="+id);
        }
    
        /**
         * 获取所有模型
         * @return
         */
        @GetMapping
        public Object modelList(){
            RepositoryService repositoryService = processEngine.getRepositoryService();
            List<Model> models = repositoryService.createModelQuery().list();
            return ToWeb.buildResult().putData("models", models);
        }
    
        /**
         * 删除模型
         * @param id
         * @return
         */
        @DeleteMapping("{id}")
        public Object deleteModel(@PathVariable("id")String id){
            RepositoryService repositoryService = processEngine.getRepositoryService();
            repositoryService.deleteModel(id);
            return ToWeb.buildResult().refresh();
        }
    
        /**
         * 发布模型为流程定义
         * @param id
         * @return
         * @throws Exception
         */
        @PostMapping("{id}/deployment")
        public Object deploy(@PathVariable("id")String id) throws Exception {
    
            //获取模型
            RepositoryService repositoryService = processEngine.getRepositoryService();
            Model modelData = repositoryService.getModel(id);
            byte[] bytes = repositoryService.getModelEditorSource(modelData.getId());
    
            if (bytes == null) {
                return ToWeb.buildResult().status(Config.FAIL)
                        .msg("模型数据为空,请先设计流程并成功保存,再进行发布。");
            }
    
            JsonNode modelNode = new ObjectMapper().readTree(bytes);
    
            BpmnModel model = new BpmnJsonConverter().convertToBpmnModel(modelNode);
            if(model.getProcesses().size()==0){
                return ToWeb.buildResult().status(Config.FAIL)
                        .msg("数据模型不符要求,请至少设计一条主线流程。");
            }
            byte[] bpmnBytes = new BpmnXMLConverter().convertToXML(model);
    
            //发布流程
            String processName = modelData.getName() + ".bpmn20.xml";
            Deployment deployment = repositoryService.createDeployment()
                    .name(modelData.getName())
                    .addString(processName, new String(bpmnBytes, "UTF-8"))
                    .deploy();
            modelData.setDeploymentId(deployment.getId());
            repositoryService.saveModel(modelData);
    
            return ToWeb.buildResult().refresh();
        }
    }
    

    补上demo代码,供参考。
    https://github.com/DangerousPrayer/spring-boot-with-activiti

    activiti version 5.22.0
    spring boot version 1.5.1

    相关文章

      网友评论

      • 三分之一_a4e7:您好我创建模型后,点击发布 提示数据模型不符要求,请至少设计一条主线流程。是什么原因呢
      • 不易样的:作者您好,请问一下,我直接启动SpringBootWithActivitiApplication,然后在浏览器中输入http://localhost:8080/index.html总是需要登录用户和密码怎么回事?用户名和密码是什么?
        不易样的:已解决
      • metangtang:编辑器代码在哪下载,谢谢
        metangtang:@JerryL_ 你本地有activiti编辑器代码嘛,可以给我一份嘛
        metangtang:@JerryL_ 网页无法打开呀
        JerryL_:github上activiti项目好像迁移了,我这里只有之前搞的编辑器代码
        都在https://github.com/DangerousPrayer/spring-boot-with-activiti里。
        你看看能不能用吧。
      • metangtang:大神,那个编辑器怎么在本地使用
      • wangdege:我项目启动起来了,但是路径是什么呢
      • 飞过苍穹:大哥,那个模型编辑器怎么调用啊
      • 飞过苍穹:大哥,那个模型编辑器怎么调用啊:no_mouth:
      • duyao1222:你好,我下载了你的源代码,项目跑起来之后,进入流程编辑界面,页面元素都是{{item.name}} ,{{selectedItem.title}} {{modelData.name}} ,想请问一下这是什么原因
      • 爱因斯丹:大神,我又来打扰了。Activity升级到6.0.0后,画图这部分怎么整合啊?
        JerryL_:@爱因斯丹 您好,实在不好意思,最近忙着实习,而且工作上没有涉及到activiti,所以暂时没有继续研究。您可以去官网看看文档之类的。
      • 爱因斯丹:感谢你分享的代码。我遇到个问题,希望能得到你的帮助。modeler.html是个静态页面,由于我使用了spring boot+thymeleaf,无法直接返回一个modeler.html静态页面。你有好的办法吗
        爱因斯丹:@JerryL_ 我debug了一下你的代码,发现保存model的时候,前台也会抛错误提示信息:找不到glasspane.png 404,但是你可以正常的保存model。而在我的代码中,紧接着抛出了错误信息:exception
        :
        "Required request body is missing: public void org.activiti.rest.editor.model.ModelSaveRestResource.saveModel(java.lang.String,org.springframework.util.MultiValueMap<java.lang.String, java.lang.String>)"
        message
        :
        "Bad request"
        爱因斯丹:十分感谢你的回答,现在可以进入/models/newModel页面了,显示了Activiti的编辑页面,但是保存model的时候,前台抛错误了,提示信息:Unexpected error: could not save model 打开浏览器调试模式,看到异常信息:angular-animate.min.js:16 GET http://localhost:8081/activiti-demo/images/glasspane.png 404 () 好头疼:sob:
        JerryL_:你可以把modeler.html这个文件放到templates下面,然后直接把它当成模板文件来访问。
        不过需要改下thymeleaf的解析模式,在application.properties中加上```spring.thymeleaf.mode=LEGACYHTML5```,然后引入nekohtml的依赖。这样普通的html文件被thymeleaf解析也不会出错了。
      • 呼呼X南风:大哥!你整合的demo源码呢?
        JerryL_:文章后面已更新,互相交流学习:grin:

      本文标题:【activiti】整合官方编辑器插件

      本文链接:https://www.haomeiwen.com/subject/cazqgttx.html