综合前几篇博文内容。我想在整合这一部分中应该会有非常多模块会跳过不讲，就如自己定义表单的表单列表那一块，由于这些模块在整合的过程中都差点儿没有什么修改，再多讲也是反复无用功。

正由于如此，在创建了流程模型之后。模型列表的展示也是和之前的没有什么差别。并且都是非常easy的后台查询以及前台展示。这一部分也就只是多的讲了。

模型列表页面例如以下：

至于当中的改动和删除也没什么多讲的，删除非常easy，而改动也是activiti-modeler实现的主要功能。我们仅仅须要跳转过去即可。

重要的部分在于部署，由于点击部署到达后台以后。activiti就要和自己定义的form表单打赏关系。

以上页面的html代码例如以下：

<div id="logdiv1" ng-init="init();">

    <p style="font-size:24px;margin:3px">模型列表</p>

    <center>

   <table border="1px" style="margin-top:1px;width:87%;font-size:18px;text-align:center;margin-left:2px;margin-top:auto;position:relative;float:left;" cellSpacing="0px" cellPadding="0px">

      <tr style="background-color:#ccc">

         <td>ID</td>

         <td>NAME</td>

         <td>KEY</td>

         <td>描 述</td>

         <td>版本号</td>

         <td>创建时间</td>

         <td>改动时间</td>

         <td>操 作</td>

      </tr>

      <tr ng-repeat="model in modelList | orderBy:'id'" >

         <td>{{model.id}}</td>

         <td>{{model.name}}</td>

         <td>{{model.key}}</td>

         <td>{{model.metaInfo}}</td>

         <td>{{model.version}}</td>

         <td>{{model.createTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>

         <td>{{model.lastUpdateTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>

         <td><a href="script:;" ng-click="deploye(model)">部署</a> 

         <a href="script:;" ng-click="delete(model)">删除</a> 

         <a href="script:;" ng-click="update(model.id)">改动</a>

         </td>

      </tr>

   </table>

   </center>

</div>

点击部署要走到后台，前台就须要js控制，对应的js代码例如以下：

angular.module('activitiApp')

.controller('modelCtr', ['$rootScope','$scope','$http','$location', function($rootScope,$scope,$http,$location){

$scope.init=function(){

        $http.post("./modelList.do").success(function(result) {

        	if(result.isLogin==="yes"){

        		$rootScope.userName=result.userName;

        	    console.log(result.data);

    	        $scope.modelList=result.data;

        	}else{

        		$location.path("/login");

        	}

        });

}

        $scope.deploye=function(model){

        	console.log(model);

        	$http.post("./deploye.do",model).success(function(deployResult){

        		$location.path("/processList");

        	});

        }

        $scope.update=function(modelId){

        	window.open("http://localhost:8080/activitiTest1/service/editor?

id="+modelId);

        }

}])

而后程序到达后台，后台代码例如以下：

/**

	 * 依据模型id部署流程定义

	 *

	 * @author：tuzongxun

	 * @Title: deploye

	 * @param @param activitiModel

	 * @param @param redirectAttributes

	 * @param @return

	 * @return Object

	 * @date Mar 17, 2016 12:30:05 PM

	 * @throws

	 */

	@RequestMapping(value = "/deploye.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")

	@ResponseBody

	public Object deploye(@RequestBody ActivitiModel activitiModel,

			HttpServletRequest req) {

		Map<String, Object> map = new HashMap<String, Object>();

		boolean isLogin = this.isLogin(req);

		if (isLogin) {

			String modelId = activitiModel.getId();

			try {

				// 获取forms拿到formname

				Model modelData = repositoryService.getModel(modelId);

				ObjectNode modelNode = (ObjectNode) new ObjectMapper()

						.readTree(repositoryService

								.getModelEditorSource(modelData.getId()));

				byte[] bpmnBytes = null;

				BpmnModel model = new BpmnJsonConverter()

						.convertToBpmnModel(modelNode);

				bpmnBytes = new BpmnXMLConverter().convertToXML(model);

				DeploymentBuilder db = repositoryService.createDeployment()

						.name(modelData.getName());

                 //差别在这里

				List<JsonNode> forms = modelNode

						.findValues("formkeydefinition");

				for (JsonNode node : forms) {

					// aaa.form

					String formName = node.textValue();

					if (!"".equals(formName)) {

						// 就是页面的html代码依据formName找到

						String formContent = myFormService

								.findFormByFormName(formName);

						ByteArrayInputStream bi = new ByteArrayInputStream(

								formContent.getBytes());

						db.addInputStream(formName, bi);

						break;

					}

				}

				Deployment deployment = db.addString(

						modelData.getName() + ".bpmn20.xml",

						new String(bpmnBytes)).deploy();

				if (deployment != null && deployment.getId() != null) {

					map.put("isLogin", "yes");

					map.put("userName",

							(String) req.getSession().getAttribute("userName"));

					map.put("result", "success");

				}

			} catch (Exception e) {

				e.printStackTrace();

			}

		} else {

			map.put("isLogin", "no");

		}

		return map;

	}

拿这段代码和之前单独的activiti流程部署的代码相比，就能够看到这里多出了查询form的操作以及部署时新的inputStream的设置。

在这段代码中。须要我们自己依据formKey（即自己定义的表单的文件名称）从数据中查询出对应的html表单代码，这段代码也是自己写的。例如以下：

public Connection getDb() {

		Connection connection = null;

		try {

			Class.forName("com.mysql.jdbc.Driver");

			connection = DriverManager.getConnection(

					"jdbc:mysql://localhost:3306/testtu", "root", "123456");

		} catch (Exception e) {

			e.printStackTrace();

		}

		return connection;

	}

public String findFormByFormName(String formName) {

		String formString = null;

		Connection connection = this.getDb();

		Statement statement;

		try {

			statement = connection.createStatement();

			PreparedStatement ps = connection

					.prepareStatement("select * from formtest where formType=?

");

			ps.setString(1, formName);

			ResultSet resultSet = ps.executeQuery();

			while (resultSet.next()) {

				formString = resultSet.getString(3);

			}

			;

		} catch (Exception e) {

			e.printStackTrace();

		}

		return formString;

	}

实现这个表单设置的目的实际上是为了之后启动流程时的操作，由于部署之后就有了流程定义列表，在流程定义列表中就能够启动流程，仅仅有在这里设置了。那么点击启动流程时才干调用activitiService的相关方法获取相应节点的表单。

有了这个操作，在我们部署成功之后。能够看到与之前的部署相比，在数据库ac_ge_bytearray表中会再多出一条表单相关的数据。如图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

那么至此，整合自己定义表单部署流程结束。