activiti搭建(三)整合Modeler
接上一章,工作流引擎虽然运行了起来,但是什么都没有。官方在其安装包中是给了两个war的demo包的,一个是-.war,一个是-rest.war。第一个就是用在web端对工作流引擎的一个展示,可以看到具体内容。第二个是对提供的rest接口的一个demo。这两个war包可以放入的文件夹中,启动即可。项目可以访问:8080/-地址就可以管理工作流引擎了。账号默认有三个:
第二个rest项目是没有界面的,可以写个ajax的工具来完成对的rest接口测试。这两个war包的源代码都是能在在上的开源中找到的,在//--和//--rest2。这两个就是其源代码。
不仅是对工作流的一个展示,可以查看和进行相关的操作,还集成了 。 是一个在线流程设计器,可以让业务人员用画图的方式自己设计定义工作流,并部署到工作流引擎中。 采取的是LGPL 2.1的开源协议。是官方给出的一个管理demo,这个应该是不能商用的, 这个模块是可以的,但是要遵守相关的开源协议要求。下面介绍如何整合 到自己的项目之中:
从中将下载下来,解压,进入//--文件夹。
src/main//-app 将-app文件夹拷贝到自己的项目中的相同位置,这个文件夹放置了在线流程设计器的相关HTML、CSS、JS和图片等资源
src/main//.html 将.html这个文件也拷贝到下,这是在线流程设计器的主页
src/main//.json 将这个json文件拷贝到文件夹下,其定义了bpmn的相关构成组件的信息,之后会介绍
现在运行项目,直接访问地址::端口号/项目名/.html 会发现只有一个布局,各种功能及组件都没有显示出来,F12查看发现访问在线流程编辑器主页的时候会发现其访问了:端口号/-//model//json 这个地址,实际上我现在还没有写后台。这说明了两个问题:一是前台页面应该是写死了url的。二是应该有与之对应的jar包完成 与个人项目的整合。
先查找前台页面会发现在-app文件夹下的app-cfg.js中全局访问路径/-/ 将-改成自己的项目名路径会在web.xml中配置,可以更改。这个:端口号/-//model//json 实际的调用地方在app.js中的一个方法中:
/* Helper method to fetch model from server (always needed) */function fetchModel(modelId) {var modelUrl = KISBPM.URL.getModel(modelId);$http({method: 'GET', url: modelUrl}).success(function (data, status, headers, config) {$rootScope.editor = new ORYX.Editor(data);$rootScope.modelData = angular.fromJson(data);$rootScope.editorFactory.resolve();}).error(function (data, status, headers, config) {console.log('Error loading model with id ' + modelId + ' ' + data);});}
断点截图:
第二个问题实际上 的后台服务官方是给出了的,都放在了-.jar包中,其采用的是-mvc的形式。所以在pom.xml中添加相关依赖:
org.activiti activiti-modeler 5.21.0
查看-源码,发现里面十分简单,一共只有三个类,对应着三个URL,分别是:
// 用来加载并返回.json文件的内容
/model/{}/json 这个就是访问的那个url了,通过部署的模型编辑源
/model/{}/save 这个是用来保存编辑的模型
知道这些之后,我们再在文件夹下创建一个-mvc-.xml用于提供对 后台URL的支持。
在web.xml中配置路径分发:
ModelerServlet org.springframework.web.servlet.DispatcherServlet contextConfigLocation classpath:spring-mvc-modeler.xml 1 ModelerServlet /service/*
配置完成后,启动项目不会报错,但是访问依旧是 found,/项目名//model//json 查看后台,方法没有被执行,这个可能是少了中间的参数,url没有匹配。先看前台url配置。url是配置在了文件夹下的url-中。继续查找源码,看是哪里调用了这个方法,在app.js中发现:
/*** Initialize the Oryx Editor when the content has been loaded*/$rootScope.$on('$includeContentLoaded', function (event) {if (!$rootScope.editorInitialized) {ORYX._loadPlugins();var modelId = EDITOR.UTIL.getParameterByName('modelId');fetchModel(modelId);...}
.UTIL.(''),查找源码在-utils.js中找到这块代码:
getParameterByName: function (name) {name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");var regex = new RegExp("[\\?&]" + name + "=([^]*)"),results = regex.exec(location.search);return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));},
这样就很明显了,在访问这个界面的时候要带上查询参数,必须访问地址:端口号/项目名/.html?=xx。这样查询的url就是/model/xx/json了。但是这样之后还是报错404,这回要看后台是否哪里配置有问题了。
查看后台日志,发现里面的方法是被执行了,这证明URL是匹配上了。日志提示了下面一段话:org..web...(1120) | No found for HTTP with URI [/-//model/1/model/1/json] in with name ''。这就相当于url前面多了model/1/这段。查看源码,断点调试:
@RequestMapping(value="/model/{modelId}/json", method = RequestMethod.GET, produces = "application/json")public ObjectNode getEditorJson(@PathVariable String modelId) {ObjectNode modelNode = null;Model model = repositoryService.getModel(modelId);if (model != null) {try {if (StringUtils.isNotEmpty(model.getMetaInfo())) {modelNode = (ObjectNode) objectMapper.readTree(model.getMetaInfo());} else {modelNode = objectMapper.createObjectNode();modelNode.put(MODEL_NAME, model.getName());}modelNode.put(MODEL_ID, model.getId());ObjectNode editorJsonNode = (ObjectNode) objectMapper.readTree(new String(repositoryService.getModelEditorSource(model.getId()), "utf-8"));modelNode.put("model", editorJsonNode);} catch (Exception e) {LOGGER.error("Error creating model JSON", e);throw new ActivitiException("Error creating model JSON", e);}}return modelNode;}
}
这里看不出什么问题,后来仔细检查,.xml中只配了扫描包,忘记配置。好吧,现在修正了这个问题。至于为什么报了个那么奇怪的错误,暂时没研究。修正之后还是有问题 read '' of 。这个问题是由于我是直接访问的,看上面的代码也很清楚,首先要创建一个model才会拿着创建的,跳转到这个界面,不然返回数据为空,是无法接下去渲染的。
小结一下,将整合到自己的项目中步骤如下:
1.将-app文件夹和.html放在项目的文件下,.json放在文件夹下;
2.maven依赖添加-.jar包
3.-.jar包采用的是的形式编写的,按照一般mvc的配置方式,配置一个xml文件扫描其层,并启用注解驱动。在web.xml中配置其url路径。
注意:如果要使用在线流程编辑器,一定要在url .html后带上参数?=xxx,而这个一定要是先创建了的model,不然查出空数据,页面还是空白。所以一般是在创建模型之后,后台重定向到这个地址,顺便带上创建的Id。上述函数返回的json数据给个例子就是:{"name":"test","":1,"":"test","":"1469","model":{"id":"","":"","":{"":""}}}
参考咖啡兔写的教程:,其还使用了依赖--rest.jar,说是-模块提供模型先关的操作:创建、保存、转换json与xml格式等,而--rest模块用来处理流程图有关的功能:流程图布局()、节点高亮等。其实际项目中还导入了-文件夹。具体是否影响功能,我现在还没有了解,等之后如果有需要,还会添加,目前不需要。rest功能目前是不准备添加的。
至于如何创建一个model,参考咖啡兔的demo,
文件中的方法就是创建model了,至于前端页面,可以随便写写用于测试就行了。