基于mxgraph的web流程设计器(bpm)

阅读更多

这段时间由于公司要做一个基于jbpm的服务产品（基于商业原因，产品细节不便透漏），需要一个基于web的流程设计器。外话是我是刚进公司的，当时项目组也正头疼，没得什么思路。我们选择了画图功能比较强大的mxgraph，实现web的流程设计器。很长一段时间，由于又要了解jbpm,又研究mxgraph，感觉压力特别大。特别是mxgraph，国内用的人不多，又没有中文文档，只能硬着头皮干了。有一段比较昏暗的日子，个人感情上的(不提了)，工作上的压力。慢慢的在技术上的小突破，产品也有了思路。现在有点眉目了，产品也见了雏形，算是对自己最大的安慰了。经过这一段，感觉自己长大了很多。在感情上算是从那一段走出来了，明显感觉自己成熟多了，不再是那个一根茎的样子。在技术上也学到了很多东西，对jbpm和mxgraph都有了一定了解。自己的想法在产品中得到验证，从数据中抽象出结构，到产品架构，到代码优化。这两方面的技术，在我都算是新东西，从无到有，也让我更加自信自己的能力吧，哈哈。拉远了，这里主要说说mxgraph吧。

magraph在画图和流程处理方面，真的是不错。浏览器支持比较好，扩展性强，而且是纯js的，给基于web的画图提供了强大的工具。当然如果要用的好，得有一定的文档阅读能力和js等前端开发能力。流程设计器这块主要使用了mxgraph的画图工具，涉及uiconfig、toolbar,port等。实现了自定义工具条，自定义节点，复合节点(graph.xml和引用)。其中的数据结构定义和mxgraph.xml转成jpdl.xml是精华（用到面向对象和数据结构的东西）。还是，上图吧，呵呵。

主流程设计界面：

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

复合节点定义：

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

复合结点在工流程中的表现：

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

由于写东西的水平有限，这里只是介绍了实现的基本思路，当然这一块的使用也在不断完善中。希望能对在这一块迷惘的同志有点帮助;希望有感兴趣的人一讨论; 更加希望得到前辈好的建议。

注：平时不经常在csdn，如果有问题或者有好建议可以给我发邮件：[email protected].