activiti自定义流程之整合（三）：整合自定义表单创建模型

标签：

本来在创建了表单之后应该是表单列表和预览功能，但是我看了看整合的代码，和之前没有用angularjs的基本没有什么变化，一些极小的变动也只是基于angularjs的语法，因此完全可以参考之前说些的表单列表展示相关的内容，这里也就直接进入到下一个步骤，创建流程模型了。

在之前的创建流程模型一节里，我讲代码比较多，实际上在这里还有很重要的一个环节没有细说，那就是自定义流程图，画流程图的过程也是有不少需要注意的事项的，在这一节我会适当的以截图加解释进行说明。

而在创建流程模型的过程中，因为之前也是用java、spring、angularjs等，所以在代码上实际上并没有什么变化，不同之处就在流程图制作上，还有就是activiti内部自己实现，我们不用管他，那么这里着重要讲的就是调用activiti-modeler来画流程图。

我们的创建模型首先是在自己制作的页面填好模型的name、key、description等，然后提交到后台，进而跳转到activiti-modeler流程图制作界面。自定义的页面如下图：

填写数据的这个页面代码如下：

[html] view plain copy

 

 

1. <div id="create"style="margin-top:100px;margin-left:290px;background-color:#9cc;height:350px;width:40%;font-size:26px;position:relative;float:left;">   
2.     <p style="font-size:30px">创建模型</p>  
3.     Name   :<input type="text" name="name"ng-model="activiti.name"/>  
4.     </br>   
5.     </br>   
6.     Key    :<input type="text" name="key"ng-model="activiti.key"/>   
7.     </br>   
8.     </br>   
9.     Description:<input type="text" name="description"ng-model="activiti.description"/>   
10.     </br>   
11.     </br>   
12.     <input style="font-size:28px;cursor:pointerborder:1px solid;border-radius:0.5em;" type="button"value="创建模型" ng-click="createTo(activiti);"/>   
13.              
14.     <input style="font-size:28px;cursor:pointer;cursor:pointerborder:1px solid;border-radius:0.5em;" type="button"value="返回"/>   
15. </div>   

在我们填好相关数据以后，点击提交，便会触动createTo方法进入到js代码中，对应的整个js代码如下：

[javascript] view plain copy

 

 

1. angular.module(‘activitiApp‘)   
2. .controller(‘createCtr‘, [‘$rootScope‘,‘$scope‘,‘$http‘,‘$location‘,‘$state‘, function($rootScope,$scope,$http,$location,$state){   
3.     //创建模型  
4.     $http.post("createFlush.do").success(function(result){  
5.        if(result.isLogin==="yes"){  
6.            $rootScope.userName=result.userName;  
7.        }else{  
8.            $location.path("/login");  
9.        }  
10.     });  
11.     $scope.createTo=function(activiti){  
12.         //向后台提交数据  
13.       $http.post("./create.do",activiti,{headers:‘Content-Type:application/json‘}).success(function(createResult){  
14.       console.log(createResult);  
15.       $location.path("/modelList");  
16.     window.open("http://localhost:8080/activitiTest1"+createResult.path+createResult.modelId);  
17.       });  
18.    
19.     }   
20.    
21. }])   

在上述的代码中可以看到createTo方法是直接调用$http向后台发送post请求，然后把页面中的数据对象直接传到后台，并没有多做处理，这里涉及到angularjs的双向数据绑定，如果有不明白的，可以自己去了解以下。

需要注意的是，发送请求并接收后台返回数据后，从返回数据中拿到path和modelid然后跳转到activiti-model流程图设计页面，这里可以先看一下下边的后台代码再返回来看。

经过http请求，操作便运行到后台，相应的后台代码如下：

[java] view plain copy

 

 

1. /** 
2.      * 创建模型 
3.      * 
4.      * @author：tuzongxun 
5.      * @Title: create 
6.      * @param@param activiti 
7.      * @param@param request 
8.      * @param@param response 
9.      * @param@return 
10.      * @return Object 
11.      * @date Mar 17, 201612:30:29 PM 
12.      * @throws 
13.      */  
14.     @RequestMapping(value = "/create.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")  
15.     @ResponseBody  
16.     public Object create(@RequestBody ActivitiModel activiti,  
17.            HttpServletRequest request, HttpServletResponse response) {  
18.        Map<String, String> map = new HashMap<String, String>();  
19.        Boolean isLogin = this.isLogin(request);  
20.        if (isLogin) {  
21.            Model newModel = repositoryService.newModel();  
22.            try {  
23.    
24.               ObjectMapper objectMapper = new ObjectMapper();  
25.               ObjectNode modelObjectNode = objectMapper.createObjectNode();  
26.               modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME,  
27.                      activiti.getName());  
28.               modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);  
29.               modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION,  
30.                      StringUtils.defaultString(activiti.getDescription()));  
31.               newModel.setMetaInfo(modelObjectNode.toString());  
32.               newModel.setName(activiti.getName());  
33.               newModel.setKey(StringUtils.defaultString(activiti.getKey()));  
34.               repositoryService.saveModel(newModel);  
35.               ObjectNode editorNode = objectMapper.createObjectNode();  
36.               editorNode.put("id", "canvas");  
37.               editorNode.put("resourceId", "canvas");  
38.               ObjectNode stencilSetNode = objectMapper.createObjectNode();  
39.               stencilSetNode.put("namespace",  
40.                      "http://b3mn.org/stencilset/bpmn2.0#");  
41.               editorNode.put("stencilset", stencilSetNode);  
42.               repositoryService.addModelEditorSource(newModel.getId(),  
43.                      editorNode.toString().getBytes("utf-8"));  
44.            } catch (Exception e) {  
45.               e.getStackTrace();  
46.            }  
47.            //response.sendRedirect(request.getContextPath() +  
48.            //"/service/editor?id="  
49.            // +newModel.getId());  
50.            map.put("isLogin", "yes");  
51.            map.put("userName",  
52.                   (String) request.getSession().getAttribute("userName"));  
53.            map.put("path", "/service/editor?id=");  
54.            map.put("modelId", newModel.getId());  
55.        } else {  
56.            map.put("isLogin", "no");  
57.        }  
58.        return map;  
59.     }  

这一段代码里涉及到的东西还比较多，有一些我也不是很理解，只是这段代码基本上就是这样不怎么会变了，我也暂时没有深入理解，可以看到这段代码跟之前说列的也是一样，那么这里我要说的是最后走完这段代码返回数据给前台。

可以看到其中有一个path属性和modelId，正是这两个属性返回给前台后，前台angularjs再控制路由跳转到activiti-model流程图设计页面（这个页面完全整合而来，非自己创造）。根据path和modelId跳转后的界面如下：

这个界面是整合而来，在跳转的过程中会自动把之前我们填写的数据带入过来，当然了，还有modelId，这个时候数据库实际上已经有了数据。

进入到这个界面，那么下边就要正式开始设计流程图了，首先如下图所示的创建开始节点，创建方法是找到StartEvent按钮，按住鼠标左键拖拽到右方空白处即可。

然后在这个开始节点后边有许多按钮可以点击，我们选择下图中箭头所指的个人任务，然后便新建了一个任务节点，当然了，如果能学到自定义流程图这一步，我想大家应该已经对流程图的基础有一定了解了，起码在eclipse中画流程图应该已经没有问题，所以这里大家应该不难理解，否则的话，不如先用eclipse中的插件了解一下。

这样的话，依照上边的步骤我们就可以创建出如下图的流程图雏形，包含开始节点、两个任务节点，然后是结束节点：

那么接下来就是比较重要的了，开始进入自定义表单整合的环节。

在上图中可以看到右方我用箭头指了一个地方，attributes，顾名思义，就是属性，这里是可以点开的，假如大家能走到这一步来，就可以看到在不同情况下这里显示的不一样。

首先我们不选中任何节点，可以看到属性如下：

而我们选中开始节点和任务节点是属性又分别如下图1和图2：

图2：

但是不管是开始节点还是任务节点，都有Formkey这个属性，在这里我们就可以指定每个节点需要使用的自定义表单文件的名称，通常是xxx.form的形式。指定好formkey以后就可以点击保存，也可以设置其他的属性，如任务中的assignment和name、key等等。

而这里的整个页面都不是自己写的，保存相关的方法也不是自己写的，只要数据库配置正确，activiti-modeler就会自动把这些数据保存到数据库中，模型创建完毕。

activiti自定义流程之整合（三）：整合自定义表单创建模型

标签：

原文地址：http://www.cnblogs.com/tuzongxun/p/5385098.html