Shulou(Shulou.com)06/03 Report--

Integrate Acitiviti online process designer (Activiti-Modeler 5.18.0) 1. Overview of the preface

We have been engaged in a large number of workflow-related projects, and have used many commercial workflow products, including domestic and foreign ones. Although commercial work products are humanized in UI operation, individual users feel that this thing only needs some beginner users. When we have been providing some senior customers with professional data integration, process carding, and data penetration between systems. Because these systems are not open source, they bring great risks to the implementation of the project. After some projects have stumbled, I prefer to use open source platforms. But the biggest difficulty of the open source platform is whether you have enough technicians to learn and master it, otherwise, it also faces the risk of project implementation failure. Later, when I used JBPM4,Activiti5 on some projects, I found that the process function of Activiti5 is really powerful and almost omnipotent. To paraphrase an advertisement, the boss is no longer worried about the realization of my process. When implementing foreign projects, the design of the process is almost left to the developer, so it is appropriate to use Activiti. But in China, our customers put forward higher requirements, requiring ordinary personnel can also participate in the design requirements of the process. Subsequent versions of Activiti are also improving these features, especially the Activiti-5.18 version, where the modeling tools of Activiti-Modeler have almost been rewritten. It seems that the open source team of Activiti has gradually realized this and increased its manpower investment in this area. With the current use, it can reach the commercial level, and online process modeling can be well realized through functional expansion.

In order to extend the platform in the future, I suggest using the team's Activiti-Modeler directly. The reason is very simple. We can effectively upgrade the product with the team. Of course, we also need to expand our own features. I will continue to write articles in the back for you to learn.

Here, I first show the effect of my initial integration of Activiti-Modeler on the JSAAS platform:

To tell you the truth, although this designer still has some small defects, but still can not stop me from loving it, because the new development of this thing, it is more deadly, ha ha, bitter programmer ah. So I wish I could bring such an app directly into my Activiti process app.

Reality is good, integration is bitter, so there is the emergence of this article.

In the previous post of my blog, it has been explained how to use the source code of Activiti-Modeler to run and run under eclipse. In this article, it is based on this article to explain and integrate this article.

2. Requirements for integrating Activiti-Modeler

Activiti-Modeler 5.18 uses the new WEB framework, which is based on the framework of Spring-Mvc 4.0 and above, while using VAADIN's RIA UI, especially the latter, this framework has too many jar packages, although it is also combined with spring to use, to integrate this thing, it is almost necessary to add this thing to our project, but also need to integrate its user management, which is fatal. Our starting point is only to use its front-end drawing processing function, and the back-end process logic processing is realized by us.

So I studied the Activiti-webapp-explorer2 project and found that it was easy to achieve my above goals. The following assumptions are my environmental requirements, the following is the environment of my original project, is based on Spring 3, my platform can be directly converted to Spring4.0, especially the Spring-MVC environment is also converted to 4.0

3. Integration steps

3.1. Copy the front-end designer file from activiti-webapp-explorer2 to the newly created directory process-editor on my platform, as shown below:

At the same time, copy the stencilset.json file under resources to the resources directory in my project.

3.2. Add the Activiti 5.18 dependency reference to the Spring project, note that it cannot be taken directly from the explorer project, as it will have a lot of useless jar packages, the following is a simplified pom reference.

Xml code

Org.activiti

Activiti-engine

5.18.0

Org.activiti

Activiti-spring

5.18.0

Commons-dbcp

Commons-dbcp

Org.activiti

Activiti-diagram-rest

5.18.0

Batik

Batik-transcoder

1.7

Batik

Batik-dom

1.7

Org.activiti

Activiti-json-converter

5.18.0

Commons-collections

Commons-collections

Batik

Batik-bridge

1.7

Batik

Batik-css

1.7

Batik

Batik-anim

1.7

Batik

Batik-codec

1.7

Batik

Batik-ext

1.7

Batik

Batik-gvt

1.7

Batik

Batik-script

1.7

Batik

Batik-parser

1.7

Batik

Batik-svg-dom

1.7

Batik

Batik-svggen

1.7

Batik

Batik-util

1.7

Batik

Batik-xml

1.7

Org.apache.xmlgraphics

Batik-js

1.7

Xml-apis

Xml-apis-ext

1.3.04

Xml-apis

Xml-apis

1.3.04

Org.apache.xmlgraphics

Xmlgraphics-commons

1.2

Batik

Batik-awt-util

1.7

Commons-collections

Commons-collections

3.2.1

Commons-lang

Commons-lang

2.6

If the data source of common-dbcp is not used, the above configuration excludes the reference to the package

The package of Batik is mainly used to parse the content of svg in html. There are many packages, but none of them is big.

3.3. Configure the following spring-activiti.xml file in the following format (which can be copied from the activiti-custom-context.xml file of resources under activiti-webapp-explorer2), and delete some of the configuration information used in the explorer form below. Because we do not use the configuration information of its form.

Note:

1. Extend and implement your own idGenerator

The purpose is to generate a unique data primary key, there are many ways, please implement it yourself, you can do it without extension.

2. Configure the corresponding data connection information, data sources, transactions, etc.

3.4. Introduce spring-activiti.xml into the configuration file of Spring, start the application, and you can see that it has created the database table.

3.5. The configuration that handles the background processing of Activiti-Moderler. That is, to create model design, save, update and other content, it needs to interact with the back end. When we look at activiti-webapp-explorer2 's web.xml, we know the processing mode of its background interaction.

Brief description: after the launch of the explorer2 project, spring mvc4 will scan the package and scan the Controller under the org.activiti.explorer.servlet.DispatcherServletConfiguration, org.activiti.rest.editor and org.activiti.rest.diagram packages into the response mapping, so that when the flow of the editor and design model is displayed, there are corresponding controller services.

Therefore, our better way is to rewrite these controller, and the implementation of these controller is also very simple. Here, my easiest thing to do is to copy these classes directly into my project and rename the package name. (of course, you can add the above two packages directly through pom dependencies.) I don't want my project to have too many dependency packages, so I won't quote them directly.

After the handcuff, my bag here is as follows:

Load these packages in SpringMVC. Note that SpringMvc needs to be above 4.0 in order to better support the annotation mode of RestController, otherwise, please support this kind of Rest URL access in the old way.

Java code

Configure to block these access paths in web.xml

Java code

SpringMvc

/ service/*

; / servlet-mapping >

3.6. Modify some configuration files under process-editor to support our online process design

A) remove the logo title bar from Activiti Afresco and remove the blank column from the style

Modify the following content in modeler.html, be careful not to delete the text, it is recommended to add style= "display:none", after deletion, it will cause some of the underlying content with 40 figures can not be displayed.

Java code

{{'GENERAL.MAIN-TITLE' | translate}}

B) in editor-app/css/style-common.css, change the padding-top part of the following style to 0px

Java code

.wrapper.full {

Padding: 40px 0px 0px 0px

Overflow: hidden

Max-width: 100%

Min-width: 100%

}

C) add the function of CloseWindow to modeler.html

Js code

Function CloseWindow (action) {

If (window.CloseOwnerWindow) return window.CloseOwnerWindow (action)

Else window.close ()

}

In order to save the model, you can close the current pop-up mini window and modify the save and close actions of the pop-up window after saving, as shown below, put the following function of editor-app/configuration/toolbar-default-action.js:

Java code

$scope.saveAndClose = function () {

$scope.save (function () {

_ window.location.href = ". /"

});

}

Change to the following:

Java code

$scope.saveAndClose = function () {

$scope.save (function () {

CloseWindow ('ok')

});

}

D) modify the root directory of the editor-app editor, such as app-cfg.jsJava code

ACTIVITI.CONFIG = {

'contextRoot':'/ activiti-explorer/service'

}

Change to your own root directory: Java code

ACTIVITI.CONFIG = {

'contextRoot':'/ redxun_web/service'

}

In a real project, you can change these ContextRoot to get values dynamically. After restarting your application, you can go directly to the directory to visit the modeler.html page. When you visit the page directly, the frame appears, but not what you want. This is because there is a mistake in the background. For this page to be accessed properly, you must input the Id of Activiti's design Model, that is, the primary key in the act_re_ model table, and the access path such as: Myroot/process-editor/modeler.html?modelId=12312312. But how to generate the record of this table, you need to call the API of Acitiviti to create it. The following code snippet can achieve this function. Java code

String descp=request.getParameter ("description")

ObjectMapper objectMapper = new ObjectMapper ()

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.set ("stencilset", stencilSetNode)

Model modelData = repositoryService.newModel ()

ObjectNode modelObjectNode = objectMapper.createObjectNode ()

ModelObjectNode.put (MODEL_NAME, actReModel.getName ())

ModelObjectNode.put (MODEL_REVISION, 1)

/ / String description = null

ModelObjectNode.put (MODEL_DESCRIPTION, descp)

ModelData.setMetaInfo (modelObjectNode.toString ())

ModelData.setName (actReModel.getName ())

RepositoryService.saveModel (modelData)

RepositoryService.addModelEditorSource (modelData.getId (), editorNode.toString () .getBytes ("utf-8"))

At this point, the integration has been created, and we will expand it based on Activiti to meet the needs of complex processes with Chinese characteristics, such as process online definition, process personnel connection, form association, × × transaction, agency, transfer, archiving, and so on. Online access integration effects, such as:

View the integrated video as follows:

The effect of online integration, such as process management after login-process definition design-add process

Understanding and consultation: 1361783075

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.