Skip to content

BPMN usage

Jump to bottom
liyuliang5 edited this page Oct 30, 2023 · 5 revisions

Introduction

BPMN module provide BPMN format flow definition ability. The principle is converting BPMN format flow definition to JSON format flow definition, then parsing and running the json flow definition.

This module has two main parts：

  1. Flow definition designer: Providing the ability of visualized designing flow. It is written by html、javascript and css. It can be used directly offline or integrated to front application.
  2. BPMN flow converter: Providing the ability of converting BPMN format to JSON format. It is written by java. It can be used by importing the jar to java project.

Use Steps

The usage of BPMN module has two steps:

  1. Define BPMN flow. Define BPMN flow based on the visualized interface. You can use self-contained BPMN designer offline, or integrate it to your application. Even you can write your own BPMN designer based on JDEasyFlow-BPMN specification.
  2. Java application integration. Import jar to java project, set flowParser of FlowEngine to BpmnFlowParser, set BPMN files path. The other usage is same as JSON format, BpmnFlowParser also support JSON format.

BPMN flow designer usage

BPMN module contains a flow designer. Both BPMN and JSON format are supported. It is written by html、javascript and css. It can be used directly offline or integrated to front application. Even you can write your own BPMN designer based on JDEasyFlow-BPMN specification.

Components introduction

File or directory Name Description
BPMNDesigner.html Flow designer page A page containing flow designer. It can be opened by browser. You also can refer it integrating to front application
flow directory JDEasyFlow flow designer component flow.js: Containing flow visualize function. bpmn.js: JDEasyFlow-BPMN implementation based on bpmnjs
bpmnjs directory Bpmnjs component and changelog Bpmnjs resources and modification description
std-common directory Base script and internationalization message-XX.js: Locale supporting
Other Other third party component Jquery、bootstrap and so on

Component integration

Referring BPMNDesigner.html. Import the js and css, define a div, render by javascript.

new J.FlowControl({$container: $("#flowControl")}).render();

Page function introduction

bpmn-en The most functions of flow designer page are intuitive.

Form at the page top

  • Flow Definition ID: Parse and get from flow definition.

  • Flow Definition Name: Parse and get from flow definition.

  • Flow Definition Type: Can switch flow definition type. Flow definition support three types:

    • FlowEngine-BPMN: BPMN format
    • FlowEngine-EASY: Flow engine JSON format, can additive BPMN format for visualization.
    • Statemachine-EASY: Statemachine JSON format, can additive BPMN format for visualization.

  • Business Type: Only used for flow definition categorize.

BPMN flow definition pannel

This panel is the main function area of flow design. You can drag and drop flow element from left element panel to middle area to design flow. The right panel is flow element property form. It show different items when clicking different element. The element property introduce as bellow. Flow Click blank area can show flow property panel. Items are described bellow：

Name Json element property mapping Description
ID id Flow definition ID
Name name Flow definition name
Documentation none Flow definition description
Properties properties json object format
Flow PreHandler pre {"createExp":"el expression"}, the result of el should be FlowPreHandler object
Flow PostHandler post {"createExp":"el expression"}， the result of el should be FlowPostHandler object
Listeners {"createExp":"el expression"}， the result of el should be FlowEventListener object
Filter filters {"createExp":"el expression"}， the result of el should be Filter object
Node Filters nodeFilters {"createExp":"el expression"}， the result of el should be Filter object
Node PreHandler Filters nodePreHandlerFilters {"createExp":"el expression"}， the result of el should be Filter object
Node Action Filters nodeActionFilters {"createExp":"el expression"}， the result of el should be Filter object
Node PostHandler Filters nodePostHandlerFilters {"createExp":"el expression"}， the result of el should be Filter object
Flow Runner runner {"createExp":"el expression"}， the result of el should be FlowRunner object
Flow Parse Event Listeners parseListeners {"createExp":"el expression"}， the result of el should be FlowParseEventListener object
Log flag logFlag Print flow execution log flag, default to true

Task、Gateway and Event Task、Gateway and Event are all converted to JDEasyFlow Node. You can set customized-NodePreHandler、customized-NodeAction、customized-NodePostHandler to override the default BPMN behavior.

  • Task: Id and node action are often configured.
  • Gateway: Id is often configured.
  • Event: Id is often configured.

Form items are described bellow:

Name Json element property mapping Description
ID id Node ID
Name name Node name
Documentation none Node description
Properties properties json object format
Customize PreHandler pre Two formats:1、{"createExp":"el expression"}:  the result of el should be NodePreHandler object 2、"el expression": el expression is pre handler operation
Customize Action action Two formats:1、{"createExp":"el expression"}:  the result of el should be NodeAction object2、"el expression": el expression is node action operation
Customize Branch post Two formats:1、{"createExp":"el expression"}:  the result of el should be NodePostHandler object2、"el expression": el expression is post handler operaton
Branch Condition Typ post type Default to exclusive.
Start Node start Start node flag, used in task element
Script Format exp or createExp in action exp or createExp
Script exp or createExp value createExp format: the result of el should be NodeAction object; exp format: the result of el is node action operation

Sequence Flow You can set condition in sequence flow. You also can set the sequence flow to default flow in diagram. The form items are described bellow：

Name Json element property mapping Description
ID none sequence flow ID
Name none sequence flow name
Documentation none sequence flow description
Condition Expression condition in post el expression, should be boolean result

Other

  • Pool(Participant)：Multiple participants mapping to multiple flows. JDEasyFlow support multiple flows in one json definition file.
  • DataStoreReference：Data Store is only used to visualization, no execution semantics.
  • Group：Used for element grouping, no execution semantics.
Bottom operations

BPMN Definition：Click “BPMN Definition” can show BPMN xml content. You can also copy BPMN xml content to the area and click "Render Flow Diagram" to render flow. This pop window has "View EasyFlow Definition“ Button, After clicking, you can see JSON format definition.

Notice：When you use 'View EasyFlow Definition' function in offline BPMN designer, you need a http interface invoking BpmnConverter and result json result。The steps are：

1、Http interface develop。The code sample is as bellow(based on spring mvc)：

@Controller
public class Bpmn2JsonController {

    @CrossOrigin(origins = "*")
    @RequestMapping(value = "/public/ajax/bpmn2Json2")
    @ResponseBody
    public Map<String, String> convert2Json2(String bpmnXmlData) {
        Map<String, String> result = new HashMap<>();
        String jsonData = BpmnConverter.convert(bpmnXmlData);
        result.put("resultData", jsonData);
        return result;
    }   
}

2、Configure the http address。Open easyflow-flow-bpmn/BPMNDesigner.html, change window.bpmn2JsonUrl = null; to real address，for example: http://localhost:8080/public/ajax/bpmn2Json2

<script>
window.bpmn2JsonUrl = "http://localhost:8080/public/ajax/bpmn2Json2";
new J.FlowControl({$container: $("#flowControl")}).render();
</script>

Import And Export ：Import and Export BPMN file.

SVG： Export SVG format BPMN file.

- and +：Zoom In and Zoom Out.

Detail Info Type ：Show node and flow detail information. When the layer is shown, you can drop and drag top line to adjust position, or drop and drag right line to adjust width.

Java application integration

1、Import jar，maven GAV is as follow：

        <dependency>
            <groupId>com.jd.easyflow</groupId>
            <artifactId>coffee-service-flow-bpmn</artifactId>
        </dependency>

2、Set flowParser of FlowEngine to com.jd.easyflow.flow.bpmn.BpmnFlowParser

3、Copy flow definition to flow path of FlowEngine.

4、Invoke flow engine，see Flow engine usage。

Suggestion in practice.

1、If you has no other requirement，you can use the self-contained designer. Otherwise, implement yourself following the JDEasyFlow-BPMN specification.

2、The suggested steps of BPMN flow design are as follows：

  • 1、Draw the flow diagram by dropping and dragging.
  • 2、Config flow element properties, id、name、node action、condition and so on.
  • 3、Open "Detail Info Type"，Review detail information and adjust layer position and width。
  • 4、Conform flow definition by JSON format.
  • 5、Copy BPMN flow definition to java project. You also can manage flow definition to database by yourself.
Clone this wiki locally