spring boot（十一） 整合Activiti工作流（三）官方编辑器插件Activiti Model

前言

spring boot:2.0.1
activity:5.22.0
activity
activity 5.22.0官方jira包下载地址:
https://github.com/Activiti/Activiti/releases/tag/activiti-5.22.0
activity:5.22.0源码下载地址,点击下载源码:
https://github.com/Activiti/Activiti/releases/tag/activiti-5.22.0

一、添加依赖

 

     org.activiti
     activiti-spring-boot-starter-basic
     ${activiti.version}
     
         
             org.springframework.boot
             spring-boot-starter-actuator
         
         
             org.springframework.boot
             spring-boot-starter-web
         
         
             org.springframework.boot
             spring-boot-starter-security
         
     
 

 
     org.activiti
     activiti-spring-boot-starter-actuator
     ${activiti.version}
     
         
             org.springframework.boot
             spring-boot-starter-web
         
     
 
 
     org.activiti
     activiti-rest
     ${activiti.version}
     
         
             org.springframework.security
             spring-security-web
         
         
             org.springframework
             spring-web
         
         
             org.springframework
             spring-webmvc
         
     
 

 
     org.activiti
     activiti-explorer
     ${activiti.version}
     
         
             com.vaadin
             vaadin
         
         
             org.vaadin.addons
             dcharts-widget
         
         
             activiti-simple-workflow
             org.activiti
         
     
 
 
     org.activiti
     activiti-diagram-rest
     ${activiti.version}
     
 
 
     org.activiti
     activiti-simple-workflow
     ${activiti.version}
 
 
     org.activiti
     activiti-spring
     ${activiti.version}
 


 
     org.apache.xmlgraphics
     batik-codec
     1.7
 
 
     org.apache.xmlgraphics
     batik-css
     1.7
 
 
     org.apache.xmlgraphics
     batik-svg-dom
     1.7
 
 
     org.apache.xmlgraphics
     batik-svggen
     1.7
 
 
     org.springframework.security
     spring-security-config
     4.1.3.RELEASE

 

 

二、复制项目文件到自己的项目中

1、下载源码文件。解压activity5.22.0的源码zip文件

进入源码文件中的modules\activiti-webapp-explorer2\src\main\webapp目录，复制diagram-viewer、editor-app、modeler.html三个文件到springboot项目中的resources\static目录下。(主要是前端页面，需要放到static目录下，因为这个spring boot默认的静态资源目当)
2、解压jra包activiti-5.22.0.zip，在Activiti-5.22.0的libs中找到activiti-modeler-5.22.0-sources.jar，将其解压，将会找到以下三个类，StencilsetRestResource ModelEditorJsonRestResource ModelSaveRestResource(三个controller，这是activiti设计器初始化资源的3个类) ，复制到自己的项目中
3、将源码路径modules\activiti-webapp-explorer2\src\main\resources\stencilset.json复制到springboot项目中的resources目录下，因为StencilsetRestResource这个类中会读这个文件，不想放到这个目录下，那么你也需要修改相应这个类的读取路径。(这个文件是控制界面的语言的)
4、至此，所有需要的文件都复制完成，接下来，我们开始配置修改。项目结构如下:

####三、修改配置项
1、修改springboot的启动类, 在类上加如下注解，关闭security功能。主要是因为activiti的依赖中含有spring security的jar包，所以springboot会自动配置安全功能，访问时就需要输入密码，添加activiti相应扫描包

@SpringBootApplication(scanBasePackages = {"com.clockbone","org.activiti"} /*,
        exclude={DataSourceAutoConfiguration.class}*/ ,
        exclude = {
                org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration.class,
                org.activiti.spring.boot.SecurityAutoConfiguration.class,
                //org.springframework.boot.actuate.autoconfigure.ManagementWebSecurityAutoConfiguration.class
                PageHelperAutoConfiguration.class,
                }) 

2、修改 resources\editor-app目录下的app-cfg.js, 如下更改(这个是项目的路径，springboot是不需要项目路径的，所以把项目路径删除掉)

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

3、修改activiti初始化资源的3个类
修改我们从源码中复制到项目中的3个类添加注解
在每个类的类名上加上RequestMapping(value = “/service”)注解。(页面会访问这个路径)
4、修改ModelSaveRestResource类
(不修改这个的话，在页面保存流程时会报错)

@RestController
@RequestMapping(value = "/service")
public class ModelSaveRestResource implements ModelDataJsonConstants {
  
  protected static final Logger LOGGER = LoggerFactory.getLogger(ModelSaveRestResource.class);

  @Autowired
  private RepositoryService repositoryService;
  
  @Autowired
  private ObjectMapper objectMapper;
  
  @RequestMapping(value="/model/{modelId}/save", method = RequestMethod.PUT)
  @ResponseStatus(value = HttpStatus.OK)
  public void saveModel(@PathVariable String modelId, @RequestParam("name") String name,
                        @RequestParam("json_xml") String json_xml,
                        @RequestParam("svg_xml") String svg_xml,
                        @RequestParam("description") String description) {//对接收参数修改
    try {
      
      Model model = repositoryService.getModel(modelId);
      
      ObjectNode modelJson = (ObjectNode) objectMapper.readTree(model.getMetaInfo());
      
      modelJson.put(MODEL_NAME, name);
      modelJson.put(MODEL_DESCRIPTION, description);
      model.setMetaInfo(modelJson.toString());
      model.setName(name);
      
      repositoryService.saveModel(model);
      
      repositoryService.addModelEditorSource(model.getId(), json_xml.getBytes("utf-8"));
      
      InputStream svgStream = new ByteArrayInputStream(svg_xml.getBytes("utf-8"));
      TranscoderInput input = new TranscoderInput(svgStream);
      
      PNGTranscoder transcoder = new PNGTranscoder();
      // Setup output
      ByteArrayOutputStream outStream = new ByteArrayOutputStream();
      TranscoderOutput output = new TranscoderOutput(outStream);
      
      // Do the transformation
      transcoder.transcode(input, output);
      final byte[] result = outStream.toByteArray();
      repositoryService.addModelEditorSourceExtra(model.getId(), result);
      outStream.close();
      
    } catch (Exception e) {
      LOGGER.error("Error saving model", e);
      throw new ActivitiException("Error saving model", e);
    }
  }
}

四、添加新建模块，测试模块方法

1、获取所有模块

/**
     * 获取所有模型
     * @return
     */
    @GetMapping
    @RequestMapping("modelist")
    public String modelList(org.springframework.ui.Model model){
        List models = repositoryService.createModelQuery().orderByCreateTime().desc().list();
        model.addAttribute("models",models);
        return "model/list";
    }

model\list 页面：

    

    

        
ID
        
模型名称
        
key
        
版本
        
部署ID
        
创建时间
        
最后更新时间
        
操作
    
    
    

    

        
LeaveBill:1:4
        

            流程名称
        
        
1
        

        

        

            2018-02-25 17:28:35
        
        

            2018-02-25 17:28:35
        
        

            发布流程  
            导出  
            删除
        
    
    

2、跳转到对应模块编辑页面路径

th:href="@{/static/modeler.html(modelId=${data.id})}" 

这里我加了/static 前缀，是因为是集成过程中 spring boot静态资源目录直接访问不了会被dispatchServlet类拦截，我重写的WebMvcConfigurer接口，所以所有引用css、js 的地方我都加上了/static ，如果你不需要可以忽略，重写类如下。如果你也遇到这个问题，可参见我的另一篇文章

@Configuration
@Slf4j
@EnableWebMvc
public class StaticResourceConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }

    /*@Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }*/


}

五、页面效果
流程列表页：

点击模型名称跳转到流程编辑页：

最后，点击流程编辑页’X’关闭流程图时，默认会跳转到http://localhost:8080/static/这个页面是找不到的，此时需要修改一下默认js的跳转路径，我们希望点击关闭后跳转回列表页，找到editor-app——configuration——toolbar-default-actions.js这个js中的下面方法

closeEditor: function(services) {
        	window.location.href = "./";
        },

修改为：

closeEditor: function(services) {
        	window.location.href = "/models/modelist";
        },

这时关闭流程编辑按扭就跳回原来列表页面了。
六、整合过中遇到一些问题，再记录一下
1、报错GlobalAuthenticationConfigurerAdapter类

org.springframework.beans.factory.BeanDefinitionStoreException: Failed to parse configuration class [com.clockbone.web.bootstrap.ApplicationBoot]; nested exception is java.io.FileNotFoundException: class path resource [org/springframework/security/config/annotation/authentication/configurers/GlobalAuthenticationConfigurerAdapter.class] cannot be opened because it does not exist

添加spring-security-config依赖

     org.springframework.security
     spring-security-config
     4.1.3.RELEASE
 

2、弹出输入框

可以暂时，在act_id_user表里加一条记用户名、密码记录

3、将设计好的流程图发布时报错

因为选中流程图的连接线时，需要呈现如下红点 才是连接