用raphael实现的jbpm4web流程设计器

最近准备自己根据raphael学习和网上查阅到得知识，实现一个jbpm4风格的web流程设计器. 有部分功能参考了CSDN网友 wow4464提供的一个控件连线的实例，下载地址： http://download.csdn.net/detail/wow4464/7549803. 连线的方式使用的是raphael拖拽的特性来实现的，发现在firefox下有问题，其他浏览器正常支持.

Raphael 是一个用于在网页中绘制矢量图形的. 它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作. Raphaël 是跨浏览器的矢量图形库，目前支持的浏览器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+.

摘要：本文要实现一个流程图的绘制，最终的目标是实现流程图的自动绘制，并可进行操作，直接点击流程图上对应的方框就可以让后台跑相应的程序. 1、图形绘制raphael. 其中图形绘制使用了raphael，下载地址： http://raphaeljs.com，它的功能非常强大. 中文帮助教程： http://html5css3webapp.com/raphaelApi.htm#Paper.text.

这是一个很有趣的购物推广案例记录. 我们要推出一个和第三方网站合作的计划，预计在原本的购物网站上面加上一个推广用的“折扣序号”，让顾客可以在 第三方网站上面输入 email 来取得我们的折扣序号，希望顾客可以在收到 email 后，可以来我们的购物网站上面消费并使用折扣序号来打折，并完成消费动作. 一开始的计划像是上面那张照片的上半部分，流程详解如下：.

   时隔多年，前端发展实在迅猛，各类框架层出不穷，在优雅，简洁，高效以及维护方面各有千秋，只是回过头来看看，自己还是对jquery最顺手，作为个人的业余爱好玩玩，基于jquery ui体系写代码实在是很舒服的一件事情.     回到正题，在09年的时候，当时顺手写过一个jbpm4的web流程设计器，非常简单的一个雏形，在当前环境下，web流程设计器也是成堆出现的，轮子这东西，只是享受造的过程，有时间玩一玩，结果什么的，不是追求的重点，对于有同样想法的同学，可以拿着代码去玩一玩，有兴趣的可以深入规范和改造一下，代码这种东西有事情是随性而为，里面不如意的地方很多.

原文作者选取了15个电子商务网站，包括apple，新蛋，沃尔玛，Zappos等，对其收银系统进行考察，总结了11条设计的基本方针. 简单的翻译文章的要点，有删节，详见原文. 如果想要更详细的内容，可以购买原作者的这份收费报告（求分享文档）. 原文链接：Fundamental Guidelines Of E-Commerce Checkout Design.

　　畅游在各大电商网站的你，在网购时不知曾否察觉到有些小不同. 　　排开具体的商品内容、视觉样式，回忆下那些我们熟悉的商品页面… 当然，这里并不是玩大家来找茬游戏的，需要火眼金睛审视于细枝末叶. 我们可以从界面的细节去体验，甚至还可以眯起眼去发现点什么. 　　亲，你有没有想起有哪里不同.  　　好吧，揭晓答案：不同点在于商品详情页面的购买按钮.

一直以来都是从事大量的工作流相关的项目，用过很多商用的工作流产品，包括国内与国外的，尽管商用的工作产品在UI操作上比较人性化，但个人用户觉得，这东西只需要一些初级用户，对于我们一直在为一些高级的客户提供一些专业的数据整合、流程梳理、系统间的数据穿透时，这些系统因为不开源，给项目的实施带来巨大的风险，在一些项目栽过跟头后，我更偏向于使用开源的平台了.

整合Acitiviti在线流程设计器(Activiti-Modeler 5.18.0).         一直以来都是从事大量的工作流相关的项目，用过很多商用的工作流产品，包括国内与国外的，尽管商用的工作产品在UI操作上比较人性化，但个人用户觉得，这东西只需要一些初级用户，对于我们一直在为一些高级的客户提供一些专业的数据整合、流程梳理、系统间的数据穿透时，这些系统因为不开源，给项目的实施带来巨大的风险，在一些项目栽过跟头后，我更偏向于使用开源的平台了.