1. Brief introduction
In the previous chapter, we have explained how to obtain the activiti table. Now let's integrate the online process editor.
Springboot2.0+gradle7.0+activiti6.0 build a back-end online process editor-table generation
2. Integration
1. The jar package that needs to be integrated is also explained in the build.gradle file in the previous chapter. I only post the main one here. The jar package:
//项目中需要的依赖
dependencies {
implementation ('org.springframework.boot:spring-boot-starter-web'){
exclude group:'org.springframework.security',module:'spring-security-config'
}
implementation ('org.activiti:activiti-spring-boot-starter-basic:6.0.0'){
exclude group:'org.springframework.boot',module:'spring-boot-starter-actuator'
exclude group:'org.springframework.boot',module:'spring-boot-starter-web'
exclude group:'org.springframework.security',module:'spring-security-config'
}
implementation ('org.activiti:activiti-json-converter:6.0.0'){
exclude group:'org.activiti',module:'activiti-bpmn-model'
exclude group:'org.springframework.security',module:'spring-security-config'
}
implementation 'commons-io:commons-io:2.5'
implementation ('org.activiti:activiti-modeler:5.23.0'){
exclude group:'org.springframework.security',module:'spring-security-config'
}
implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:1.3.2'
implementation 'mysql:mysql-connector-java:8.0.17'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
testImplementation group: 'junit', name: 'junit', version: '4.11'
testImplementation 'org.junit.jupiter:junit-jupiter-api:5.6.0'
testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine'
}
2. Configure activiti in the application.yml file
#activiti 配置
activiti:
#自动部署验证设置:true-开启（默认）、false-关闭
check-process-definitions: false
# true activiti会对数据库中所有表进行更新操作。如果表不存在，则自动创建。（开发时常用）
#flase 默认值。activiti在启动时，会对比数据库表中保存的版本，如果没有表或者版本不匹配，将抛出异常。（生产环境常用）
#可以在创建好表后，将其设置为false
database-schema-update: true
#保存历史数据级别设置为full最高级别，便于历史数据的追溯
history-level: full
3. Unzip the activiti-6/war/activiti-explorer.war in the source package, and start adding the files needed by the editor and the back-end code:
copy the diagram-viewer, editor-app, and modeler.html files to your project At the same time, find the stencilset.json file in the class folder, and copy it to the resources of your project to be at the same level as application.yml.
4. Unzip the jar package named activiti-6\libs\activiti-modeler-6-sources.jar, we also need to support the three java classes ModelEditorJsonRestResource, ModelSaveRestResource, StencilsetRestResource, and
put them in our project. The position of the package name is determined by yourself.
5. This step has not been completed yet, we still need to modify the activiti file, modify its own configuration path to our own
1) modify the path in the app-cfg.js file:
2) view the three copied in Whether the path of the java class needs to be modified and the annotations of @Controller of the ModelSaveRestResource class and @RequestParam of obtaining parameters (ps: If you can access the editing page when you start the project, but the save is unsuccessful, you need to see if these two places need to be modified. )
6. At this step, we also need a Controller to enter the editing page, that is, we need to create a new process model and redirect it to the modeler.html page:
@Controller
@RequestMapping("/myAct")
public class MyActController {
@Resource
private RepositoryService repositoryService;
@Resource
private ObjectMapper objectMapper;
@Resource
private RuntimeService runtimeService;
/**
* 新创建model
* @param request
* @param response
* @throws UnsupportedEncodingException
*/
@RequestMapping("/create")
public void newModel(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
try {
//创建一个新的model
Model model = repositoryService.newModel();
//设置默认参数
String name = "new-process";
String description="";
Integer revision = 1;
String key = "process";
//设置model 基本配置参数
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());
//设置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.set("stencilset",stencilSetNode);
//执行新增和创建编辑模型
repositoryService.saveModel(model);
repositoryService.addModelEditorSource(model.getId(),editorNode.toString().getBytes("utf-8"));
response.sendRedirect(request.getContextPath() + "/view/modeler.html?modelId=" + model.getId());
} catch (Exception e) {
e.printStackTrace();
}
}
7. Start the project and you can enter the edit page:
http://localhost:8080/act/myAct/create
8. After we create the process and save it, we need to publish and start it. The published (deployed) process can only be used after it is started. When starting, we can bind our own form for data approval, etc. This can be written according to our own situation.
/**
* 部署（发布）流程
* @param modelId
* @return
*/
@RequestMapping(value = "deploy/{modelId}")
@ResponseBody
public String deploy(@PathVariable("modelId") String modelId){
try {
//获取model
Model modelData= repositoryService.getModel(modelId);
//获取模型编辑后的数据信息
ObjectNode objectNode = (ObjectNode) new ObjectMapper().readTree(repositoryService.getModelEditorSource(modelData.getId()));
//根据编辑后的数据信息创建bpmn文件模板
BpmnModel bpmnModel = new BpmnJsonConverter().convertToBpmnModel(objectNode);
byte[] bpmnBytes = new BpmnXMLConverter().convertToXML(bpmnModel);
String processName = modelData.getName()+".bpmn20.xml";
//部署
Deployment deployment = repositoryService.createDeployment().name(modelData.getName())
.addString(processName,new String(bpmnBytes,"UTF-8"))
.deploy();
return "流程部署成功，部署ID= " + deployment.getId();
} catch (IOException e) {
e.printStackTrace();
return "部署流程失败！流程图错误";
}
}
/**
* 启动流程
*/
@RequestMapping(value = "start/{modelId}")
@ResponseBody
public String start(@PathVariable("modelId") String modelId){
try {
runtimeService.startProcessInstanceById(modelId);
Long count = runtimeService.createProcessInstanceQuery().count();
System.out.println("流程实例数量为：" + count);
} catch (Exception e) {
e.printStackTrace();
System.out.println("流程启动失败");
}
return "流程启动成功";
}
This is basically done. You can see that my editor page has been Chineseized. If you want to Chineseize, please click: activiti online editor Chineseized