Activiti6--[3] 整合Activiti6流程设计器

最新推荐文章于 2024-08-18 02:24:12 发布

春风吹又生

最新推荐文章于 2024-08-18 02:24:12 发布

阅读量4.2k

点赞数

分类专栏： activiti

本文链接：https://blog.csdn.net/AnoiaDream/article/details/103262767

版权

1 目的

基于【2】中的项目将流程图设计相关页面拷贝迁移到项目中。

2 准备

2.1 项目结构

activiti-1

2.2. 项目依赖

 	<properties>
		<java.version>1.8</java.version>
		<apache.xmlgraphics.version>1.7</apache.xmlgraphics.version>

	</properties>


	<dependencies>

		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-spring-boot-starter-basic</artifactId>
			<version>6.0.0</version>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-json-converter</artifactId>
			<version>6.0.0</version>
			<exclusions>
				<exclusion>
					<groupId>org.activiti</groupId>
					<artifactId>activiti-bpmn-model</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.apache.xmlgraphics</groupId>
			<artifactId>batik-codec</artifactId>
			<version>${apache.xmlgraphics.version}</version>
		</dependency>
		<dependency>
			<groupId>org.apache.xmlgraphics</groupId>
			<artifactId>batik-css</artifactId>
			<version>${apache.xmlgraphics.version}</version>
		</dependency>
		<dependency>
			<groupId>org.apache.xmlgraphics</groupId>
			<artifactId>batik-svg-dom</artifactId>
			<version>${apache.xmlgraphics.version}</version>
		</dependency>
		<dependency>
			<groupId>org.apache.xmlgraphics</groupId>
			<artifactId>batik-svggen</artifactId>
			<version>${apache.xmlgraphics.version}</version>
		</dependency>
	</dependencies>

3 拷贝资源

路径：activiti-6.0.0 > wars > activiti-app > editor > editor-app
activiti-2

3.1 拷贝静态资源

activiti-3

3.2 拷贝主页

activiti-4
activiti-5

3.3 拷贝libs

将activiti-app中的libs拷贝到项目中静态资源的libs中
activiti-6
activiti-7

3.4 拷贝css和js

【1】将activiti-app下的styles下的资源拷贝到css文件夹中

在这里插入图片描述

【2】拷贝style-editor.css到css文件夹中

在这里插入图片描述

【3】拷贝scripts到editor-app

在这里插入图片描述

activiti-app中editor下的scripts的controllers、services、*.js拷贝到common文件夹下
activiti-app中editor下的scripts的configuration下的文件拷贝到项目中configuration中。

3.5 修改index.html引用路径

<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Activiti Editor</title>
    <link rel="icon" type="image/ico" href="favicon.ico">
    <meta name="description" content="">
    <meta name="viewport"
          content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="Stylesheet" href="editor-app/libs/ui-grid_3.0.0/ui-grid.css" type="text/css"/>

    <!-- build:css styles/3thparty.css -->
    <link rel="stylesheet" href="editor-app/libs/bootstrap_3.1.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="editor-app/libs/bootstrap-tour_0.9.1/bootstrap-tour.min.css"/>
    <link rel="stylesheet" href="editor-app/libs/angular-spectrum-colorpicker_1.0.13/spectrum.css"/>
    <!-- endbuild -->

    <link rel="Stylesheet" media="screen" href="editor-app/editor/css/editor.css?v=2" type="text/css"/>
    <link rel="stylesheet" href="editor-app/css/style.css?v=2" type="text/css"/>

    <!-- build:css styles/style.css -->
    <link href="editor-app/css/common/style.css" rel="stylesheet">
    <link href="editor-app/css/common/style-retina.css" rel="stylesheet">
    <link rel="stylesheet" href="editor-app/css/style-editor.css">
    <!-- endbuild -->

</head>
<body ng-app="activitiModeler" ng-cloak>

    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation" id="main-header">
        <div class="fixed-container">
            <div class="navbar-header">
                <a ng-click="backToLanding()" class="landing-logo" ng-if="account != null && account != undefined" title="{
    {
    'GENERAL.MAIN-TITLE' | translate}}">
                    <img ng-if="account.tenantPictureId && account.tenantId"
                         ng-src="{
    {restRootUrl()}}/app/rest/tenants/{
    {account.tenantId}}/logo">

                    <img ng-if="!account.tenantPictureId" ng-src="{
    {appResourceRoot}}../images/activiti-logo.png">
                </a>
                <ul class="nav navbar-nav" id="main-nav" ng-show="authenticated">
                    <li ng-class="{
    'active' : item.id == mainPage.id}" ng-repeat="item in mainNavigation"
                        ng-show="(authenticated && !item.unauthenticated) || (item.unauthenticated && !authenticated)">
                        <a ng-click="setMainPage(item)">{
  {item.title | translate}}</