mxgraph-based web process designer (bpm)

During this time, because the company wants to make a jbpm -based service product (for business reasons, the details of the product are inconvenient to disclose), a web -based process designer is needed. The foreign language is that I just joined the company. At that time, the project team was also having a headache and had no ideas. We chose mxgraph , which has a relatively powerful drawing function, to implement the process designer of the web . For a long time, because I have to understand jbpm and study mxgraph again , I feel very stressed. Especially mxgraph , there are not many people using it in China, and there is no Chinese document, so I can only bite the bullet. There was a rather dark day, personal emotional ( not to mention ) , work pressure. Slowly, small breakthroughs in technology, products also have ideas. Now I'm a little worried, and the product has seen its prototype, which is the greatest comfort to myself. After this period, I feel like I have grown up a lot. Emotionally, I have come out of that period, and I obviously feel that I am more mature and no longer look like a stalk. I also learned a lot in technology, and have a certain understanding of jbpm and mxgraph . Your own ideas are verified in the product, from data abstraction to product architecture to code optimization. These two aspects of technology are considered new things to me. From scratch, they also make me more confident in my ability, haha. Zoomed out, let’s talk about mxgraph here .

Magraph is really good at drawing and process processing. The browser support is better, the scalability is strong, and it is pure js , which provides a powerful tool for web -based drawing. Of course, if you want to use it well, you must have certain document reading ability and js and other front-end development capabilities. The process designer mainly uses the drawing tools of mxgraph , involving uiconfig , toolbar, port , etc. Implemented custom toolbars, custom nodes, composite nodes (graph.xml and references ) . The definition of the data structure and the conversion of mxgraph.xml into jpdl.xml are the essence (things that use object-oriented and data structures). Still, the picture above, hehe.

Main process design interface:

https://img-my.csdn.net/uploads/201302/02/1359795171_8666.jpg

Compound node definition:

https://img-my.csdn.net/uploads/201302/02/1359795556_7403.jpg

The performance of composite nodes in the workflow:

https://img-my.csdn.net/uploads/201302/02/1359795556_6036.jpg

Due to the limited level of writing, here is only the basic idea of ​​​​implementation. Of course, the use of this piece is also constantly improving. I hope it can be of some help to comrades who are lost in this area ; I hope that those who are interested will discuss it ; I hope to get good advice from seniors.

Note: I don't usually use csdn . If you have any questions or have good suggestions, you can send me an email: [email protected] .

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324154240&siteId=291194637