本来在创建了表单之后应该是表单列表和预览功能。可是我看了看整合的代码，和之前没实用angularjs的基本没有什么变化，一些极小的变动也仅仅是基于angularjs的语法，因此全然能够參考之前说些的表单列表展示相关的内容，这里也就直接进入到下一个步骤，创建流程模型了。
在之前的创建流程模型一节里，我讲代码比較多，实际上在这里还有非常重要的一个环节没有细说，那就是自己定义流程图，画流程图的过程也是有不少须要注意的事项的，在这一节我会适当的以截图加解释进行说明。
而在创建流程模型的过程中，由于之前也是用java、spring、angularjs等，所以在代码上实际上并没有什么变化。不同之处就在流程图制作上，还有就是activiti内部自己实现，我们不用管他。那么这里着重要讲的就是调用activiti-modeler来画流程图。
我们的创建模型首先是在自己制作的页面填好模型的name、key、description等。然后提交到后台，进而跳转到activiti-modeler流程图制作界面。
自己定义的页面例如以下图：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >
填写数据的这个页面代码例如以下：
<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
* @[email protected] activiti
* @[email protected] request
* @[email protected] response
* @[email protected]
* @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，这个时候数据库实际上已经有了数据。
进入到这个界面。那么下边就要正式開始设计流程图了，首先例如以下图所看到的的创建開始节点，创建方法是找到StartEventbutton，按住鼠标左键拖拽到右方空白处就可以。
然后在这个開始节点后边有很多button能够点击。我们选择下图中箭头所指的个人任务，然后便新建了一个任务节点，当然了。假设能学到自己定义流程图这一步，我想大家应该已经对流程图的基础有一定了解了，起码在eclipse中画流程图应该已经没有问题，所以这里大家应该不难理解，否则的话。不如先用eclipse中的插件了解一下。
这种话，按照上边的步骤我们就能够创建出例如以下图的流程图雏形，包括開始节点、两个任务节点，然后是结束节点：
那么接下来就是比較重要的了。開始进入自己定义表单整合的环节。
在上图中能够看到右方我用箭头指了一个地方。attributes。顾名思义。就是属性，这里是能够点开的，假如大家能走到这一步来，就能够看到在不同情况下这里显示的不一样。
首先我们不选中不论什么节点，能够看到属性例如以下：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >
而我们选中開始节点和任务节点是属性又分别例如以下图1和图2：
图2：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >
可是无论是開始节点还是任务节点。都有Formkey这个属性，在这里我们就能够指定每一个节点须要使用的自己定义表单文件的名称，一般是xxx.form的形式。指定好formkey以后就能够点击保存。也能够设置其它的属性，如任务中的assignment和name、key等等。
而这里的整个页面都不是自己写的，保存相关的方法也不是自己写的，仅仅要数据库配置正确。activiti-modeler就会自己主动把这些数据保存到数据库中，模型创建完成。