基于easyui开发Web版Activiti流程定制器详解(五)——Draw2d详解(一)
背景:
小弟工作已有十年有余,期间接触了不少工作流产品,个人比较喜欢的还是JBPM,因为出自名门Jboss所以备受推崇,但是现在JBPM版本已经与自己当年使用的版本(3.X)大相径庭,想升级也不太容易,后来得知JBPM的老大转战到了Activiti,处于对JBPM的喜欢所以研究了一下Activiti,发现Activiti不但保留下JBPM优秀的DNA而且还进行了优化,相比之前JBPM设计更简单更清晰更容易掌握。
三年前Activiti开始进入公司的正式项目中并且表现非常良好,但是它的Web版的定制器无法满足我们的需求,可能是由于当初Activiti刚发布不久这方面的成型的产品比较少,所以没有找到合适的替代产品,那该怎么办呢?经过一番的思想斗争,小弟决定先自己做一个Demo,如果可行则自己研发。
经过研究其他工作流引擎的定制器,小弟发现找到一个能够支持多浏览器的绘图脚本库很关键,所以开始在网上疯狂的寻找,俗话说:黄天不负有心人,最后终于发现一个新大陆——Draw2d,但是接下来一个问题来了,这个脚本库是收费的,怎么办?谁叫咱们是做JAVA出身的呢!对免费的开源的情有独钟,后来在网上找到早期的版本是免费的,下载下来研究一番发现功能基本够用,哈哈哈。。。。搞定!
好了罗嗦的这么多,就是想引出本篇的主人公——Draw2d,至于它有多牛可以访问官网了解一下,不过现在都是收费的而且比早期的版本功能强大很多。
下面进入正题,详细讲解一下Draw2d,讲解之前请注意以下内容都是基于Draw2d早期版本而且都是本人通过研读代码获得(由于收费所以没有文档,只能靠自己),如果与现在版本有出入或者理解错误的地方请指正。
Draw2d类图:
以上是Draw2d中各种组件(如:窗口、对话框、菜单、图形、线的起点和终点、注释等等)类图,这些组件在绘图时经常用到,其中带颜色的类是本设计器使用的组件(后面的章节会着重介绍)。
以上是Draw2d中连接线类图,设计器中的连接线就是Connection扩展而来,一个Connection实例一般由三个部分组成:Color、ConnectionDecorator和ConnectionRouter。
Color:定义连接线的颜色(RGB)
ConnectionRouter:定义连接线是折线还是曲线等
ConnectionDecorator:定义连接线是否有箭头
后面会重点介绍,这里不在赘述。
以上是Draw2d中画布类图,绘图时在画布上添加图形(上面提到的类的实例)即可实现相应图形的绘制。Draw2d中已经内置了WorkFlow类型的画布这为定制器的开发带来了很大的方便。
这幅图是Draw2d中指令类图,Draw2d中使用了Command模式响应事件处理,方便实现自定义工具栏功能按钮,如:设置颜色、设置文本功能等等。
除了以上类图中展示的类,Draw2d中还有很多静态工具方法和工具类(如:XML解析、序列化/反序列化、ArrayList、String等),这里不在过多的展开查看源代码很容易理解,有问题的话可以给我留言。
基于easyui开发Web版Activiti流程定制器详解(五)——Draw2d详解(一)的更多相关文章
- 【转】基于easyui开发Web版Activiti流程定制器详解(一)——目录结构
题外话(可略过): 前一段时间(要是没记错的话应该是3个月以前)发布了一个更新版本,很多人说没有文档看着比较困难,所以打算拿点时间出来详细给大家讲解一下,由于本人平时要工作还要陪老婆和孩子而且还经营着 ...
- 基于easyui开发Web版Activiti流程定制器详解(三)——页面结构(上)
上一篇介绍了定制器相关的文件,这篇我们来看看整个定制器的界面部分,了解了页面结构有助于更好的理解定制器的实现,那么现在开始吧! 首先,我们来看看整体的结构: 整体结构比较简单,主要包括三个部分: 1. ...
- 基于easyui开发Web版Activiti流程定制器详解(六)——Draw2d的扩展(三)
题外话: 最近在忙公司的云项目空闲时间不是很多,所以很久没来更新,今天补上一篇! 回顾: 前几篇介绍了一下设计器的界面和Draw2d基础知识,这篇讲解一下本设计器如何扩展Draw2d. 进入主题: 先 ...
- 基于easyui开发Web版Activiti流程定制器详解(四)——页面结构(下)
题外话: 这两天周末在家陪老婆和儿子没上来更新请大家见谅!上一篇介绍了调色板和画布区的页面结构,这篇讲解一下属性区的结构也是定制器最重要的一个页面. 属性区整体页面结构如图: 在这个区域可以定义工作 ...
- 基于easyui开发Web版Activiti流程定制器详解(六)——Draw2d详解(二)
回顾: 上一篇我们介绍了Draw2d整体结构,展示了组件类关系图,其中比较重要的类有Node.Canvas.Command.Port.Connection等,这篇将进一步介绍Draw2d如何使用以及如 ...
- 基于easyui开发Web版Activiti流程定制器详解(二)——文件列表
上一篇我们介绍了目录结构,这篇给大家整理一个文件列表以及详细说明,方便大家查找文件. 由于设计器文件主要保存在wf/designer和js/designer目录下,所以主要针对这两个目录进行详细说明. ...
- 开发Web版一对一远程直播教室只需30分钟 - 使用face2face网络教室
转载自:https://blog.csdn.net/wo_shi_ma_nong/article/details/88110111 在“为网站开发远程直播教室的折腾过程及最终实现”中,介绍了如何使用f ...
- Node学习笔记(三):基于socket.io web版你画我猜(一)
经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法 首先说下思路,在做准备工作的时候,有两个大概的思路: 1.规定一块div,捕捉鼠标事件,动态生成 ...
- 基于canvas和Web Audio的音频播放器
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你能够使用它来制作各种HTML5音频播放器,它能够在各种支持 Web A ...
随机推荐
- Jsp&Servlet入门级项目全程实录第3讲
惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 1.建立数据表及数据(略) 2.装载驱动,建立数据表 <link rel="stylesheet&qu ...
- js如何判断IE浏览器的版本包括IE11
IE浏览器真是个坑:从ie6以及以前IE版本,简直就是垃圾,不按照Mozilla国际组织的标准来,乱搞.搞得兼容性很差: <script type="text/javascript ...
- SQLSERVER查询整个数据库中某个特定值所在的表和字段的方法
这几天有业务部门需要使用一个SAP B1老系统 中的报表,但是由于此报表没有加时间条件,导致一旦开始查询 就会导致B1系统异常退出.由于报表对应的SQL 是存在数据库中,所以想通过查找到这个报表的S ...
- 【基于初学者的SSH】struts2 值栈的详解与struts2标签库+ognl表达式
一:什么是值栈:struts2里面本身提供的一种存储机制,类似于域对象,值栈,可以存值和取值 特点:先进后出,最上面的元素叫做栈顶,也叫压栈. <s:debug></s:debug& ...
- int类型转换byte类型
计算机中,int类型占用4个字节,byte类型占用1个字节: 当int类型强转为byte类型时,计算机会截取最后的八位(1个字节): 由于计算机存储数据时,都是以补码的形式进行存储. 然而,我们通常看 ...
- JVM垃圾回收器之G1(Garbage First)--new
相比CMS收集器有两个显著的改进: (1). G1收集器是基于“标记-整理”算法实现的收集器,不会产生空间碎片 (2). 它可以精确地控制停顿,能让使用者明确指定在一个长度为M毫秒的时间片段内,消耗在 ...
- tr,td高度不生效
功能:表格内容较长,但是页面高度有限,超出显示滚动条 阻碍:给tr或者td加高度都不生效,不显示滚动条 解决方案:td中加div,设置高度和内容溢出时的样式 <table border='1' ...
- 修复IE7浮动元素自动换行的bug
bug重现以及修复后的表现 2. HTML源码 <!doctype html> <html> <head> <meta charset="utf-8 ...
- 移动端实现上拉加载更多(使用dropload.js vs js)
做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...
- HTML5 Boilerplate
time: 2016-10-20 20:00 HTML5 Boilerplate(H5BP)是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Moderni ...