activiti自定义流程之整合(三):整合自定义表单创建模型


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

 

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

 

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

 

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

 


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

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

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

angular.module('activitiApp') 
.controller('createCtr', ['$rootScope','$scope','$http','$location','$state', function($rootScope,$scope,$http,$location,$state){ 
    //创建模型
    $http.post("createFlush.do").success(function(result){
       if(result.isLogin==="yes"){
           $rootScope.userName=result.userName;
       }else{
           $location.path("/login");
       }
    });
    $scope.createTo=function(activiti){
        //向后台提交数据
      $http.post("./create.do",activiti,{headers:'Content-Type:application/json'}).success(function(createResult){
      console.log(createResult);
      $location.path("/modelList");
    window.open("http://localhost:8080/activitiTest1"+createResult.path+createResult.modelId);
      });
 
    } 
 
}]) 

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

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

 

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

/**
     * 创建模型
     *
     * @author:tuzongxun
     * @Title: create
     * @param@param activiti
     * @param@param request
     * @param@param response
     * @param@return
     * @return Object
     * @date Mar 17, 201612:30:29 PM
     * @throws
     */
    @RequestMapping(value = "/create.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
    @ResponseBody
    public Object create(@RequestBody ActivitiModel activiti,
           HttpServletRequest request, HttpServletResponse response) {
       Map<String, String> map = new HashMap<String, String>();
       Boolean isLogin = this.isLogin(request);
       if (isLogin) {
           Model newModel = repositoryService.newModel();
           try {
 
              ObjectMapper objectMapper = new ObjectMapper();
              ObjectNode modelObjectNode = objectMapper.createObjectNode();
              modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME,
                     activiti.getName());
              modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
              modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION,
                     StringUtils.defaultString(activiti.getDescription()));
              newModel.setMetaInfo(modelObjectNode.toString());
              newModel.setName(activiti.getName());
              newModel.setKey(StringUtils.defaultString(activiti.getKey()));
              repositoryService.saveModel(newModel);
              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.put("stencilset", stencilSetNode);
              repositoryService.addModelEditorSource(newModel.getId(),
                     editorNode.toString().getBytes("utf-8"));
           } catch (Exception e) {
              e.getStackTrace();
           }
           //response.sendRedirect(request.getContextPath() +
           //"/service/editor?id="
           // +newModel.getId());
           map.put("isLogin", "yes");
           map.put("userName",
                  (String) request.getSession().getAttribute("userName"));
           map.put("path", "/service/editor?id=");
           map.put("modelId", newModel.getId());
       } else {
           map.put("isLogin", "no");
       }
       return map;
    }


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

 

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

 


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

 

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

 


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

 


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

 


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

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

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

 


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

 

 

图2:



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

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

涂宗勋 CSDN认证博客专家 web安全 系统安全 安全架构
【若想不迷路,记得点关注,动动小手指,点点全是福】

6年java工作经验,现居湖北武汉,有过支付、OA、CA、OAUTH2等工作经验,现从事车联网行业。
爱好分享,个人博客blog.tzxcode.cn,微信tuzongxun,qq1160569243,欢迎来撩。
©️2020 CSDN 皮肤主题: 成长之路 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值