一.web页面整合

编译完成的项目目录中复制除WEB-INF的目录至我们自己的web目录中

复制至web activiti-app目录

复制META-INF/数据库配置至resources目录

web.xml中增加配置

    <!-- All the Servlets and Filters are configured by this ServletContextListener : -->
    <listener>
        <listener-class>org.activiti.app.servlet.WebConfigurer</listener-class>
    </listener>

如果使用了spring的话，注释掉，activit包中已经包含以下部分申明

<!-- 	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
 -->

jar包引入

pom.xml文件引入

<!-- project.version:6.0.0-->

<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-app-conf</artifactId>
			<version>${project.version}</version>			
</dependency>


<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-app-logic</artifactId>
			<version>6.0.1-SNAPSHOT</version>
</dependency>

<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-engine</artifactId>
			<version>${project.version}</version>
		</dependency>




		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-rest</artifactId>
			<version>${project.version}</version>
		</dependency>

		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-spring</artifactId>
			<version>${project.version}</version>
		</dependency>

		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-validator</artifactId>
			<version>5.3.6.Final</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-core -->
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-core</artifactId>
			<version>4.2.16.Final</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-entitymanager -->
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-entitymanager</artifactId>
			<version>4.2.16.Final</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.hibernate.javax.persistence/hibernate-jpa-2.0-api -->
		<dependency>
			<groupId>org.hibernate.javax.persistence</groupId>
			<artifactId>hibernate-jpa-2.0-api</artifactId>
			<version>1.0.1.Final</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.hibernate.common/hibernate-commons-annotations -->
		<dependency>
			<groupId>org.hibernate.common</groupId>
			<artifactId>hibernate-commons-annotations</artifactId>
			<version>4.0.2.Final</version>
		</dependency>

angularJs与spring rest的冲突处理

activiti-ui前端采用angularjs控制页面的请求转发路由，如果spring采用rest ,控制全部路径，会导致angularjs无法正常跳转

处理如下：

activiti-ui目录的全部请求均返回至activiti-ui/index.html根目录转给angularjs全权控制

	/**
	 * activiti-ui界面controller转给前台angularjs Controller控制
	 * @return
	 * @author zj
	 * @date 2018年8月27日
	 */
	@RequestMapping("/activiti-app/*")
	public String activiti_app() {

		return "activiti-app/index";
		

	}

同时修改activiti-app下 app-cfg.js中的请求路径

ACTIVITI.CONFIG = {
		'onPremise' : true,
		'contextRoot' : '/activiti_test',
		'webContextRoot' : '/activiti_test/activiti-app'
	};

这样就可以了。

正常集成访问：

二.提取查看流程页面

后续要是做应用，给用户查看流程的状态，只需要显示流程图及当前状态，将上方图中流程部分提取出来即可.

作为单独页面，可以自定义嵌入任何地方.

复制display文件夹下的displaymodel.html及dispalymodel.js

原页面是嵌入angularJs模块框架中使用，

我们需要能通过html页面独立访问，修改:html中增加相关js包，

<script src="../libs/jquery_1.11.0/jquery.min.js"></script>
<script src="../libs/jquery-ui-1.10.3.custom.min.js"></script>

<script src="../libs/angular_1.3.13/angular.min.js"></script>
<script src="../libs/angular-animate_1.3.13/angular-animate.min.js"></script>
<script src="../libs/bootstrap_3.1.1/js/bootstrap.min.js"></script>
<script src="../libs/angular-resource_1.3.13/angular-resource.min.js"></script>
<script src="../libs/angular-cookies_1.3.13/angular-cookies.min.js"></script>
<script src="../libs/angular-sanitize_1.3.13/angular-sanitize.min.js"></script>
<script src="../libs/angular-route_1.3.13/angular-route.min.js"></script>
<script src="../libs/angular-translate_2.4.2/angular-translate.min.js"></script>
<script src="../libs/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
<script src="../libs/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="../libs/angular-strap_2.1.6/angular-strap.min.js"></script>
<script src="../libs/angular-strap_2.1.6/angular-strap.tpl.min.js"></script>
<script src="../libs/momentjs_2.5.1/momentjs.min.js"></script>
<script src="../libs/bootstrap-tour_0.9.1/bootstrap-tour.min.js"></script>
<script src="../libs/ng-file-upload/ng-file-upload-shim.min.js"></script>
<script src="../libs/ng-file-upload/ng-file-upload.min.js"></script>


<script src="../libs/ui-grid_3.0.0/ui-grid.js" type="text/javascript"></script>
<script src="../libs/angular-dragdrop_1.0.11/angular-dragdrop.min.js" type="text/javascript"></script>


<!-- Configuration -->
<script src="../scripts/app-cfg.js?v=2"></script>

        <!-- build:css display/styles/displaymodel-style.css -->
        <link type="text/css" rel="stylesheet" href="../display/jquery.qtip.min.css" />
        <link type="text/css" rel="stylesheet" href="../display/displaymodel.css" />

js中增加参数的获取，原js中参数是通过 #bpmnModel的attr来传递参数.

var modelDiv = jQuery('#bpmnModel');
var modelId = modelDiv.attr('data-model-id');
var historyModelId = modelDiv.attr('data-history-id');
var processDefinitionId = modelDiv.attr('data-process-definition-id');
var modelType = modelDiv.attr('data-model-type');

我们需要调整为通过链接url获取

var modelId =GetQueryString('id');
var modelType = GetQueryString('type');



function GetQueryString(name) {

	var index = window.location.href.lastIndexOf("/");
	var indexj = window.location.href.lastIndexOf("?");

	// 最后一个/开始 截取#前面的，兼容history.js html4 url
	var searchpath = window.location.search;
	
	
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$|#)", "i");

	var r = searchpath.substr(1).match(reg);

	if (r != null)

		return decodeURI(r[2]);

	return null;
}

完成后：

通过processid，显示流程

通过taskid,获取当前处理进度

增加连线名称显示

github上的默认6.x代码流程中的连线是不会显示名称的，针对 SequenceFlow 类型增加名字显示.

修改\Activiti\modules\activiti-ui\activiti-app-rest\src\main\java\org\activiti\app\rest\runtime\RuntimeDisplayJsonClientResource.java +332

增加流程图显示及运行时的连线名称显示

修改\Activiti\modules\activiti-ui\activiti-app-logic\src\main\java\org\activiti\app\service\editor\BpmnDisplayJsonConverter.java +168

增加流程图设计界面即activit-ui详情显示界面连线名称显示

 protected void processElements(Collection<FlowElement> elementList, BpmnModel model, ArrayNode elementArray, ArrayNode flowArray, GraphicInfo diagramInfo, Set<String> completedElements,
      Set<String> currentElements) {

    for (FlowElement element : elementList) {

      ObjectNode elementNode = objectMapper.createObjectNode();
      if (completedElements != null) {
        elementNode.put("completed", completedElements.contains(element.getId()));
      }

      if (currentElements != null) {
        elementNode.put("current", currentElements.contains(element.getId()));
      }

      if (element instanceof SequenceFlow) {
        SequenceFlow flow = (SequenceFlow) element;
        elementNode.put("id", flow.getId());
      
        
        //add zj 180827-line -name
        elementNode.put("name", flow.getName());
        elementNode.put("test", "cool!");
        
        //add end

jar包引入修改

修改完成，重新编译生成 activiti-app-rest.jar 及 activiti-app-logic.jar 代码，需要修改pom.xml中相关引用，使用本地编译好的jar包.同时需要调整相关依赖

	<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-app-conf</artifactId>
			<version>${project.version}</version>
		</dependency>


		<!-- 修改流程线条name字段返回 -->
		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-app-logic</artifactId>

			<version>6.0.1-SNAPSHOT</version>
			<scope>system</scope>
			<systemPath>${project.basedir}/lib/activiti-app-logic-6.0.1-SNAPSHOT.jar</systemPath>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.liquibase/liquibase-core -->
		<dependency>
			<groupId>org.liquibase</groupId>
			<artifactId>liquibase-core</artifactId>
			<version>3.5.3</version>
		</dependency>

		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-dmn-json-converter</artifactId>
			<version>${project.version}</version>
		</dependency>
		
		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-app-rest</artifactId>
			<version>6.0.1-SNAPSHOT</version>
			<scope>system</scope>
			<systemPath>${project.basedir}/lib/activiti-app-rest-6.0.1-SNAPSHOT.jar</systemPath>

		</dependency>
		
		<!-- 修改流程线条name字段返回 end -->


		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-engine</artifactId>
			<version>${project.version}</version>
		</dependency>