基于easyui开发Web版Activiti流程定制器详解（三）—

上一篇介绍了定制器相关的文件，这篇我们来看看整个定制器的界面部分，了解了页面结构有助于更好的理解定制器的实现，那么现在开始吧！

首先，我们来看看整体的结构：

整体结构比较简单，主要包括三个部分：

1.调色板：放置工作流各种模型（节点、分支、开始、结束等等），使用时用鼠标拖动放到画布上即可，比较简单不再赘述；

2.画布：绘制工作流区域，这里是定制器的主要工作区，它有两个Tab页：Diagram和XML；其中Diagram可以展现工作流的流程图，XML用来展现工作流生成的XML文件；这两个功能后面会着重的介绍。

3.属性设置：定义和现实流程中所有模型对应的属性区域，不同的模型显示会不同。

以上是整体结构的介绍，这个看起来比较简单与Activiti提供的Eclipse的插件界面类似，其实也是借鉴了它的界面，这样比较容易不用再设计。

下面详细讲解一下每一个部分：

第一部分、调色板区域：

调色版区域包括：Event、Task、Gateway、Boundary event四个文件夹，每个文件夹与Activiti官方的模型分类一一对应，具体意义可以参照官方文档，本文主要是讲解定制器所以有关Activiti的内容这里不再赘述，有兴趣可以看看官方文档，很好很全面也很好理解。

Event文件夹如图：

Event文件夹放置工作流的开始和结束节点。

Task文件夹如图：

Task文件夹放置工作流中各种类型的任务节点，每种类型节点意义请参照官方文档，其中SubProcess（子流程）目前版本没有实现。

Gataway文件夹如图：

Gateway文件夹放置分支节点，包括：ParallelGateway（并行分支）和ExclusiveGateway（选择分支），具体意义请参照官方文档。

Boundary event文件下的节点目前还未实现，所以这里先略过。

第二部分、画布

画布区域比较简单，只有两个Tab页：

Diagram页面如图：

Diagram页面主要用来绘制工作流程图。

XML页面如图：

XML页面可以显示流程图产生的XML，可以将这个XML字符串提交到服务端进行流程部署。

基于easyui开发Web版Activiti流程定制器详解（三）——页面结构（上）相关推荐

基于easyui开发Web版Activiti流程定制器详解（一）——目录结构
题外话(可略过): 前一段时间(要是没记错的话应该是3个月以前)发布了一个更新版本,很多人说没有文档看着比较困难,所以打算拿点时间出来详细给大家讲解一下,由于本人平时要工作还要陪老婆和孩子而且还 ...
【转】基于easyui开发Web版Activiti流程定制器详解（一）——目录结构
题外话(可略过): 前一段时间(要是没记错的话应该是3个月以前)发布了一个更新版本,很多人说没有文档看着比较困难,所以打算拿点时间出来详细给大家讲解一下,由于本人平时要工作还要陪老婆和孩子而且还经营着 ...
基于easyui开发Web版Activiti流程定制器详解（五）——Draw2d详解（一）
背景: 小弟工作已有十年有余,期间接触了不少工作流产品,个人比较喜欢的还是JBPM,因为出自名门Jboss所以备受推崇,但是现在JBPM版本已经与自己当年使用的版本(3.X)大相径庭,想升级也不太容易 ...
基于easyui开发Web版Activiti流程定制器详解（四）——页面结构（下）
题外话: 这两天周末在家陪老婆和儿子没上来更新请大家见谅!上一篇介绍了调色板和画布区的页面结构,这篇讲解一下属性区的结构也是定制器最重要的一个页面. 属性区整体页面结构如图: 在这个区域可以定义工作 ...
基于easyui开发Web版Activiti流程定制器详解（六）——Draw2d的扩展（三）
题外话: 最近在忙公司的云项目空闲时间不是很多,所以很久没来更新,今天补上一篇! 回顾: 前几篇介绍了一下设计器的界面和Draw2d基础知识,这篇讲解一下本设计器如何扩展Draw2d. 进入主题: 先 ...
基于easyui开发Web版Activiti流程定制器详解（六）——Draw2d的扩展（一）
题外话: 最近在忙公司的云项目空闲时间不是很多,所以很久没来更新,今天补上一篇! 回顾: 前几篇介绍了一下设计器的界面和Draw2d基础知识,这篇讲解一下本设计器如何扩展Draw2d. 进入主题 ...
基于easyui开发Web版Activiti流程定制器详解（二）——文件列表
上一篇我们介绍了目录结构,这篇给大家整理一个文件列表以及详细说明,方便大家查找文件. 由于设计器文件主要保存在wf/designer和js/designer目录下,所以主要针对这两个目录进行详细 ...
基于easyui开发Web版Activiti流程定制器详解（六）——Draw2d详解（二）
上一篇我们介绍了Draw2d整体结构,展示了组件类关系图,其中比较重要的类有Node.Canvas.Command.Port.Connection等,这篇将进一步介绍Draw2d如何使用以及如何 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十一) —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

基于easyui开发Web版Activiti流程定制器详解（三）——页面结构（上）

基于easyui开发Web版Activiti流程定制器详解（三）——页面结构（上）相关推荐

最新文章

热门文章