基于Flex的Web流程设计器开发第一季---Kick off

最近大家都较有兴趣的讨论关于jbpm的web流程设计器，气氛热烈，并有想大干一场的劲头，俺骚动的心也被感染了。曾在08年4月份开发过一个Web流程设计器，下面把开发过程与经验和大家分享一下。首先来张插图，看看Web流程设计器样式：


原来的流程设计器与jbpm的流程设计器一样是基于Eclipse的GEF实现的，eclipse流程设计器如下图所示：


Web流程设计器产生的背景
   看过了Web流程设计器的样式后，再说说Web流程设计器产生的背景。公司原来的工作流产品的流程设计器是eclipse插件形式的，流程设计器的定位是给开发人员和客户的IT人员使用的。但在实施一个项目的过程中，客户希望部门秘书也可以自定义流程。这样问题出现了，部门秘书通常都没有IT背景，别说使用eclipse这样复杂的工具，估计安装JDK也要搞半天。客户原来系统中的Web流程设计器是列表式的，列表式的无法展现选择和并发等复杂的结构，而且也不如图形化的形象直观。Web流程设计器就是在这样的背景下产生的。

Web流程设计器技术路线选择
   当时主要的可选择的技术路线有两种：一是AJAX+SVG，二是Flex。两种技术对比，AJAX+SVG方案的优势，公司的工作流产品中的流程监控是采用AJAX+SVG实现的，有一定的技术积累，熟悉AJAX和SVG的开发人员比较多。AJAX+SVG方案的劣势，Java Script的代码调试困难，没有太好的2D图形框架。Flex的优势，首先Flex是开源的，业界当时已有很多成功的案例可以参考，Flex的交互和互动可以做出更炫更酷的效果，执行效率也比较高。再加上出了问题，Java Scipt的调试实在是让人头疼。恰逢Flex 3刚刚发布，当时我也是跃跃欲试啊，最终决定采用Flex来开发Web流程设计器。

Web流程设计器架构设计
    Web 流程设计器的架构约束是很多的，当时必须完成的目标和遵守的约束是Web流程设计器的流程样式风格必须与Eclipse流程设计器一致。Web流程设计器与Eclipse流程设计器可以互相读写流程。也就是说用Web流程设计器和Eclipse流程设计器可以打开同一个流程，而且流程样式是完全一样的。后来看这个约束是耗时最多的，比如在Web流程设计器中两个节点对齐后，再用Eclipse流程设计器打开，发现在eclipse流程设计器中两个节点没有对齐。
    因为有Eclipse平台GEF的开发经验，所以当时Web流程设计器是参考GEF框架来设计的，这样也体现了MVC的思想。提到MVC大家估计耳朵已经磨出茧子了，但真正做起来并不容易。M层对应的是流程定义模型，流程定义模型包括：Process（流程）、Node（节点）和Transation（连接线）等对象。V层对应流程元素的展现，包括：ProcessRender、NodeRender和TransationRender等对象。这些对象的职责是决定流程展现的样式，也就是大家在上面的图中看到流程的样式。C层即控制层，包括：添加节点、删除节点、更改节点名称、移动、选择等操作。C层将M层和V层有机的联系在一起，举个例子具体说明一下。当更改节点名称时，M层对象的变化，可以被V层的对象监听到，那么V层对象的名称就会随着M层的对象自动改变。
    再说说GEF框架，熟悉Eclipse平台开发的人，大概对GEF都有所了解。GEF是2D图形编辑框架，个人认为这个框架最大的优点就是良好的扩展性。在GEF框架下，可以方便定义图形的样式和风格、也可以自定义连接线的路由方式。EditPart是GEF框架中重要的对象，在Web流程设计器中的Render对象是与EditPart相对应的。当然Web流程设计器没能做到像GEF功能那么全，灵活的扩展性。这样的不足，也让我有了继续奋斗的动力。但参照GEF的设计使得像增加节点的类型，更改节点样式和改变连接线路由的方式等扩展变的很容易。
    前面说的都是Web流程设计器的前端是如何设计的，可能有人更关心Web流程设计器的流程是如何持久化的？Web流程设计器的前端是采用Flex开发的，后台是采用Java开发的，当保存流程时，Flex向Java发送HttpService请求，把流程以xml格式字符流的形式传递给Java程序，由Java来完成流程的持久化，保存流程定义到数据库中。

Web流程设计器的特性
    Web流程设计器有哪些功能，这个话题是我羞于提的，因为没有什么创新，Web流程设计器的功能与Eclipse流程设计器的功能是对等的。Web流程设计器的主要功能包括：新建流程、发布流程（存储到数据库中）、导出流程（以文件形式导出到本地）、导出流程图片、流程打印、增加删除节点、增加删除传输线、拖拽节点、拖拽传输线、复杂结构的展开与折叠、复制与粘贴、对齐和放大缩小等功能。

一些经验和体会
1、采用Flex开发Web流程设计器这个路线选择是正确的。有Java的基础，AS语言很容易上手。随着Adobe Flash Player的升级，Flash的执行效率已经很高了，比Applet快很多，尤其是首次加载。调试也比Java Script方便很多，与Java的调试一样。
2、Flex可以通过CSS配置样式与风格，非常方便易用。
3、Flex与Java的通信，在某些环境下有Bug，需要多做各种兼容性测试，等到客户现场实施时，才发现问题，乱子就大了。
4、在项目中，因为特殊的需求，Web流程设计器的流程元素的属性编辑页是采用JSP开发的。如果大家没有特殊的需求，属性编辑建议也采用Flex来开发。用JSP做属性页，不但样式很难统一，并且数据在Flex和JSP之间传来传去也非常麻烦。
5、Web流程设计器的样式和风格与Eclipse流程设计器一致。因为公司的工作流产品有Eclipse版本和Web两个版本的设计器，并且要保证两个设计器对流程的展现一模一样。其间最麻烦的问题就是节点的位置，因为在Eclipse流程设计器中，节点采用的是相对座标；而Web流程设计器，节点采用的是绝对座标。相对座标与绝对座标的相互转换是件很麻烦的事。希望大家在开发过程中，可以尽量回避这个问题。

参考资料
   有很多人向我咨询，开发Flex有哪些资料，我无一例外的向他们推荐了Adobe的Flex开发中心。http://www.adobe.com/devnet/flex/



the end.

评论

17 楼 wind2154 2012-07-10  

这是我做的流程设计器
http://wind2154.iteye.com/blog/1464359

16 楼 damoqiongqiu 2011-09-03  

不错，Mark之后学习

15 楼 liuhaoyi490 2011-03-22  

liuhaoyi490 写道

感觉很不错.
这是我做的玩的
http://liuhaoyi490.iteye.com/admin/blogs/941550多提宝贵意见

14 楼 liuhaoyi490 2011-03-22  

感觉很不错.
这是我做的玩的
http://liuhaoyi490.iteye.com/admin/blogs/941550
多提宝贵意见

13 楼 escape_2007 2010-05-11  

哥们，你好，请问你这里面有鹰眼功能么？有的话，可否大概介绍一下，多谢。

12 楼 jprobe 2009-03-05  

对你做的东东很感兴趣，能交流一下吗，qq：4548288，[e-mail]

11 楼 whiller 2008-12-26  

你好edi：
    我也想用flex做web流程设计器，分成三部分：
左边流程元素列：select+start+end+node+...，中间绘流程图，下面的properties部分。
这三部分分别采用什么组件啊？现在我只选择了左边的组件是ToggleButtonBar

10 楼 edi 2008-11-27  

yangsheng 写道

请问flex生成的xml如何转换成jbpm能实别的流程定义文件

flex生成的xml格式和内容要符合jBPM流程定义的schema，这样jBPM就能够识别了。不知道我回答的是不是，你期望知道的。

9 楼 yangsheng 2008-11-27  

请问flex生成的xml如何转换成jbpm能实别的流程定义文件

8 楼 天机老人 2008-11-21  

谢谢你最后给出的网站，最近公司需要，我也在研究flex!

7 楼 laozhou 2008-11-21  

能不能发个具体的实例出来，我最近也在做这个东西，一头雾水

6 楼 whaosoft 2008-11-21  

jbpm 听说挺好的 可一直没时间学
现在的项目ui 我们也改flex了

5 楼 edi 2008-11-20  

china8jie 写道

請教一下： ActionScript4 和 FlexBuilder 4 出了嗎？

Flex 4 发布了，但现在还是preview版本，正式版09年初会释放。Flex Builder 3 可以兼容 Flex 4。Flex 4 在编译性能上好像有提高，个人还是很期待的。

4 楼 04023129 2008-11-20  

厉害，学习中。。。

3 楼 王者之剑 2008-11-20  

牛人 ，估计很多人的大部分是想问开发Flex有哪些中文的资料

2 楼 china8jie 2008-11-20  

請教一下：

ActionScript4 和 FlexBuilder 4 出了嗎？

1 楼 yuanye218 2008-11-20  

我们也做了一个流程设计器(Flex+java)也晒一晒，呵呵。
本来也行贴个图，但是不知道怎么放链接，呵呵。