整合Activiti6.0流程设计器
其它相关的文章索引：
最近一个多月都在尝试了解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里面的逻辑，稍后会继续讲解。
替换oryx.js里面stencilset.json的地址怎么搞？
可以去直接下载一份，链接地址：咖啡兔的Github
博主能在github上开源一下源码吗 我这边一直报jar找不到的错 万分感谢
之后确实会放出代码，不过现在有点乱七八糟的，都是一些示例
https://gitee.com/blackzs/activiti-demo
https://gitee.com/blackzs/activiti-demo下下来的demo好多错误啊
什么错误？
你好，请问oryx.js里面要怎么修改stencilset.json的路径
只需要以stencilset.json为关键字去oryx.js里面去搜索，然后替换就行了。我这里替换成了：
ACTIVITI.CONFIG.webContextRoot+”/editor/editor-app/stencilset.json”
楼主 我的报 这个错误 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行开始，看看到底是什么错误，貌似是个对象找不到
博主，整合Activiti6.0流程设计器这篇，我用idea导入
https://gitee.com/blackzs/activiti-demo的项目，调试中遇到“Error 程序包com.alibaba.fastjson不存在”等一大堆报错的问题，估计主要原因类似fastjson依赖问题，POM文件里改了很多都解决不了，请问你有办法吗？
哦，更正下，调试用的新的长代码这个版本：https://gitee.com/blackzs/activiti-designer
可以在Maven面板中Refresh一下或者Reimport一下。
咨询一下，源码下载后，没有报错，但不知道怎么使用
可以参考这个链接使用：
http://www.blackzs.com/archives/1601
添加一个启动类，也启动不了，有什么办法试一下嘛
activiti_designer 这个源码jdk tomcat MySQL 用什么版本的？启动时报数据库链接错误。
JDK1.8，MySQL5.6/5.7，Tomcat8/9，Activiti已经忘的差不多了，现在主要搞Flowable。
登录到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下载的
我自己的问题