最近大家都较有兴趣的讨论关于jbpm的web流程设计器，气氛热烈，并有想大干一场的劲头，俺骚动的心也被感染了。曾在08年4月份开发过一个Web流程设计器，下面把开发过程与经验和大家分享一下。首先来张插图，看看Web流程设计器样式：
[img]http://edi.iteye.com/upload/attachment/51146/1ac5522b-c19f-37f2-b77c-cf328827687f.png[/img]
原来的流程设计器与jbpm的流程设计器一样是基于Eclipse的GEF实现的，eclipse流程设计器如下图所示：
[img]http://edi.iteye.com/upload/attachment/51144/27044260-2d82-31ac-9af2-f7772e093df2.png[/img]
[b]Web流程设计器产生的背景[/b]
看过了Web流程设计器的样式后，再说说Web流程设计器产生的背景。公司原来的工作流产品的流程设计器是eclipse插件形式的，流程设计器的定位是给开发人员和客户的IT人员使用的。但在实施一个项目的过程中，客户希望部门秘书也可以自定义流程。这样问题出现了，部门秘书通常都没有IT背景，别说使用eclipse这样复杂的工具，估计安装JDK也要搞半天。客户原来系统中的Web流程设计器是列表式的，列表式的无法展现选择和并发等复杂的结构，而且也不如图形化的形象直观。Web流程设计器就是在这样的背景下产生的。
[b]Web流程设计器技术路线选择[/b]
当时主要的可选择的技术路线有两种：一是AJAX+SVG，二是Flex。两种技术对比，AJAX+SVG方案的优势，公司的工作流产品中的流程监控是采用AJAX+SVG实现的，有一定的技术积累，熟悉AJAX和SVG的开发人员比较多。AJAX+SVG方案的劣势，Java Script的代码调试困难，没有太好的2D图形框架。Flex的优势，首先Flex是开源的，业界当时已有很多成功的案例可以参考，Flex的交互和互动可以做出更炫更酷的效果，执行效率也比较高。再加上出了问题，Java Scipt的调试实在是让人头疼。恰逢Flex 3刚刚发布，当时我也是跃跃欲试啊，最终决定采用Flex来开发Web流程设计器。
[b]Web流程设计器架构设计[/b]
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来完成流程的持久化，保存流程定义到数据库中。
[b]Web流程设计器的特性[/b]
Web流程设计器有哪些功能，这个话题是我羞于提的，因为没有什么创新，Web流程设计器的功能与Eclipse流程设计器的功能是对等的。Web流程设计器的主要功能包括：新建流程、发布流程（存储到数据库中）、导出流程（以文件形式导出到本地）、导出流程图片、流程打印、增加删除节点、增加删除传输线、拖拽节点、拖拽传输线、复杂结构的展开与折叠、复制与粘贴、对齐和放大缩小等功能。
[b]一些经验和体会[/b]
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流程设计器，节点采用的是绝对座标。相对座标与绝对座标的相互转换是件很麻烦的事。希望大家在开发过程中，可以尽量回避这个问题。
[b]参考资料[/b]
有很多人向我咨询，开发Flex有哪些资料，我无一例外的向他们推荐了Adobe的Flex开发中心。http://www.adobe.com/devnet/flex/
the end.
[img]http://edi.iteye.com/upload/attachment/51146/1ac5522b-c19f-37f2-b77c-cf328827687f.png[/img]
原来的流程设计器与jbpm的流程设计器一样是基于Eclipse的GEF实现的，eclipse流程设计器如下图所示：
[img]http://edi.iteye.com/upload/attachment/51144/27044260-2d82-31ac-9af2-f7772e093df2.png[/img]
[b]Web流程设计器产生的背景[/b]
看过了Web流程设计器的样式后，再说说Web流程设计器产生的背景。公司原来的工作流产品的流程设计器是eclipse插件形式的，流程设计器的定位是给开发人员和客户的IT人员使用的。但在实施一个项目的过程中，客户希望部门秘书也可以自定义流程。这样问题出现了，部门秘书通常都没有IT背景，别说使用eclipse这样复杂的工具，估计安装JDK也要搞半天。客户原来系统中的Web流程设计器是列表式的，列表式的无法展现选择和并发等复杂的结构，而且也不如图形化的形象直观。Web流程设计器就是在这样的背景下产生的。
[b]Web流程设计器技术路线选择[/b]
当时主要的可选择的技术路线有两种：一是AJAX+SVG，二是Flex。两种技术对比，AJAX+SVG方案的优势，公司的工作流产品中的流程监控是采用AJAX+SVG实现的，有一定的技术积累，熟悉AJAX和SVG的开发人员比较多。AJAX+SVG方案的劣势，Java Script的代码调试困难，没有太好的2D图形框架。Flex的优势，首先Flex是开源的，业界当时已有很多成功的案例可以参考，Flex的交互和互动可以做出更炫更酷的效果，执行效率也比较高。再加上出了问题，Java Scipt的调试实在是让人头疼。恰逢Flex 3刚刚发布，当时我也是跃跃欲试啊，最终决定采用Flex来开发Web流程设计器。
[b]Web流程设计器架构设计[/b]
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来完成流程的持久化，保存流程定义到数据库中。
[b]Web流程设计器的特性[/b]
Web流程设计器有哪些功能，这个话题是我羞于提的，因为没有什么创新，Web流程设计器的功能与Eclipse流程设计器的功能是对等的。Web流程设计器的主要功能包括：新建流程、发布流程（存储到数据库中）、导出流程（以文件形式导出到本地）、导出流程图片、流程打印、增加删除节点、增加删除传输线、拖拽节点、拖拽传输线、复杂结构的展开与折叠、复制与粘贴、对齐和放大缩小等功能。
[b]一些经验和体会[/b]
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流程设计器，节点采用的是绝对座标。相对座标与绝对座标的相互转换是件很麻烦的事。希望大家在开发过程中，可以尽量回避这个问题。
[b]参考资料[/b]
有很多人向我咨询，开发Flex有哪些资料，我无一例外的向他们推荐了Adobe的Flex开发中心。http://www.adobe.com/devnet/flex/
the end.
3746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
