基于jQuery和Raphaël 的web流程设计器

最近一直在学习activiti流程引擎,随着学习的深入,越来越觉得Tom Baeyens的流程思想的成熟与强大,完全的面向对象让很多操作越来越简单,越来越便于理解。建议JBPM的使用者逐步转向activiti。

由于水平有限,具体activit的优势我无法表达,大家可百度或google搜索相关文章。虽然现在关于activit的中文资料非常稀少,但是介绍activiti的文章却有很多。其实也不用太过于担心文档过少而带来的学习困难,毕竟activiti和JBPM都处于同一人之手,思想和实现思路有60%左右的相似。

另外,国外的流程思想与国内还是有很大差别的,尤其是在回退流程方面。经过一周左右的源码研究和查找资料,终于完成了activiti的流程回退,等资料和代码整理完毕再发布出来。

废话不多说了,今天主要说一下web可视化流程设计器。首先声明,此文的设计思路和代码都是来源与一位大神,我仅仅做了一下JS代码的反编译和注释整理,便于为大家提供思路。由于水平有限,时间仓促,其中难免会理解有误,请各位大神们不吝指教,便于我改正,以免更多的人出现理解偏差,谢谢。

原文地址:http://lihongyang66.iteye.com/blog/771106

效果图和源码请看原地址。

反编译代码下载:http://download.csdn.net/detail/aochuanguying/4179157

如果侵犯了原作者的版权,请联系我删除。

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
 跨浏览,可兼容IE7--IE10, FireFox, Chrome, Opera等几大内核的浏览,且不需要浏览再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上,流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的服务语言建立的后台上.  跨领域:流程设计不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.  以下从纯技术实现层面具体描述:  页面顶部栏、左边侧边栏均可自定义;  当左边的侧边栏设为不显示时,为只读状态,此时的视图区可当作是一个查看而非编辑。  侧边工具栏除了基本和一些流程节点按钮外,还自定义新的节点按钮,自定义节点都可以有自有的图标、类型名称,定义后在使用可可在工作区内增加这些自定义节点。  顶部栏可显示流程图数据组的标题,也可提供一些常用操作按钮。  顶部栏的按钮,除了撤销、重做按钮外,其余按钮均可自定义点击事件。  可画直线、折线;折线还可以左右/上下移动其中段。  具有区域划分功能,能让用户更直观地了解哪些节点及其相互间的转换,是属于何种自定义区域内的。  具有标注功能,用橙红色标注某个结点或者转换线,一般用在展示流程进度时。  能直接双击结点、连线、分组区域中的文字进行编辑  在对结点、连线、分组区域的各种编辑操作,如新增/删除/修改名称/重设样式或大小/移动/标注时,均可捕捉到事件,并触发自定义事件,如果自定义事件执行的方法返回FALSE,则会阻止操作。  具有操作事务序列控制功能,在工作区内的各种有效操作都能记录到一个栈中,然后可以进行撤销(undo())或重做(redo()),像典型的C/S软件一样。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值