web流程设计器再整理

标签: web 流程设计 | 发表时间:2015-08-20 11:47 | 作者:zhyi_12
出处:http://www.iteye.com

 

  引言   

   时隔多年,前端发展实在迅猛,各类框架层出不穷,在优雅,简洁,高效以及维护方面各有千秋,只是回过头来看看,自己还是对jquery最顺手,作为个人的业余爱好玩玩,基于jquery ui体系写代码实在是很舒服的一件事情。

    回到正题,在09年的时候,当时顺手写过一个jbpm4的web流程设计器,非常简单的一个雏形,在当前环境下,web流程设计器也是成堆出现的,轮子这东西,只是享受造的过程,有时间玩一玩,结果什么的,不是追求的重点,对于有同样想法的同学,可以拿着代码去玩一玩,有兴趣的可以深入规范和改造一下,代码这种东西有事情是随性而为,里面不如意的地方很多。

  web流程设计器界面组成

  1. 上方工具栏
  2. 左边模型树
  3. 中间图形编辑区
  4. 右边属性编辑器
  5. 编辑区节点上的浮动面板
  6. 编辑区右键菜单

 

 

  功能介绍

  • 全选
  • 导出图片
  • 增加节点
  • 删除节点
  • 节点文本编辑
  • 区域选择
  • 移动节点
  • 横向对齐
  • 纵向对齐
  • 增加连接线
  • 删除连接线
  • 增加泳道
  • 删除泳道
  • 撤销重做

 

  示例和源码

当前主要在chrome里面测试。

演示地址:http://220.249.113.11/gims/demo/flow-designer.html

github地址:https://github.com/zhyi12/youi-web-demo

 

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [web 流程设计] 推荐:

web流程设计器再整理

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

购物优惠流程设计

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

电子商务网站收银流程设计基本指引

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

差异入微——浅析电商购物流程设计

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

用raphael实现的jbpm4web流程设计器

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

整合activiti在线流程设计器(ACTIVITI-MODELER 5.18.0)

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

整合Acitiviti在线流程设计器(Activiti-Modeler 5.18.0)

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

Web未死

- Sinan - GeekPark 捕风捉影
App的极限已经浮现,而Web则是突破此极限,推动下一个数字时代革命的起点. 距离美国《连线》杂志发表《Web已死,互联网永生》这篇文章还不到一年的时间,业界为Web平反的声音渐起. 2010年1月,苹果发布iPad,紧随其后在6月又发布了iPhone4. 没有人质疑过苹果的iTunes+App的商业模式,App可谓如日中天.

web的演变

- 酿泉 - 前端观察
这是一个基于GAE的项目,有mgmt design、GOOD、Hyperakt和Vizzuality开发,也有Google chrome团队的参与,记录了浏览器与互联网技术的演变. 不多介绍,直接去看看吧:Evolution Of Web. 值得一提的是,这个项目的代码很不错,值得学习一下.