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

首先,我们来看看整体的结构:

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

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流程定制器详解(三)——页面结构(上)的更多相关文章

  1. 【转】基于easyui开发Web版Activiti流程定制器详解(一)——目录结构

    题外话(可略过): 前一段时间(要是没记错的话应该是3个月以前)发布了一个更新版本,很多人说没有文档看着比较困难,所以打算拿点时间出来详细给大家讲解一下,由于本人平时要工作还要陪老婆和孩子而且还经营着 ...

  2. 基于easyui开发Web版Activiti流程定制器详解(五)——Draw2d详解(一)

    背景: 小弟工作已有十年有余,期间接触了不少工作流产品,个人比较喜欢的还是JBPM,因为出自名门Jboss所以备受推崇,但是现在JBPM版本已经与自己当年使用的版本(3.X)大相径庭,想升级也不太容易 ...

  3. 基于easyui开发Web版Activiti流程定制器详解(六)——Draw2d的扩展(三)

    题外话: 最近在忙公司的云项目空闲时间不是很多,所以很久没来更新,今天补上一篇! 回顾: 前几篇介绍了一下设计器的界面和Draw2d基础知识,这篇讲解一下本设计器如何扩展Draw2d. 进入主题: 先 ...

  4. 基于easyui开发Web版Activiti流程定制器详解(四)——页面结构(下)

    题外话: 这两天周末在家陪老婆和儿子没上来更新请大家见谅!上一篇介绍了调色板和画布区的页面结构,这篇讲解一下属性区的结构也是定制器最重要的一个页面. 属性区整体页面结构如图:  在这个区域可以定义工作 ...

  5. 基于easyui开发Web版Activiti流程定制器详解(六)——Draw2d详解(二)

    回顾: 上一篇我们介绍了Draw2d整体结构,展示了组件类关系图,其中比较重要的类有Node.Canvas.Command.Port.Connection等,这篇将进一步介绍Draw2d如何使用以及如 ...

  6. 基于easyui开发Web版Activiti流程定制器详解(二)——文件列表

    上一篇我们介绍了目录结构,这篇给大家整理一个文件列表以及详细说明,方便大家查找文件. 由于设计器文件主要保存在wf/designer和js/designer目录下,所以主要针对这两个目录进行详细说明. ...

  7. SAE上传web应用(包括使用数据库)教程详解及问题解惑

    转自:http://blog.csdn.net/baiyuliang2013/article/details/24725995 SAE上传web应用(包括使用数据库)教程详解及问题解惑: 最近由于工作 ...

  8. Java web 入门知识 及HTTP协议详解

     Java  web  入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...

  9. 转:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法、shiro认证与shiro授权

    原文地址:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法.shiro认证与shiro授权 以下是部分内容,具体见原文. shiro介绍 什么是shiro shiro是Apache ...

随机推荐

  1. c#基础学习(0627)之类型转换、算数运算符++、--

    类型转换 我们要求等号两边参与运算的操作数的类型必须一致,如果不一致,满足下列条件会发生自动类型转换,或者称之为隐式类型转换 例如:int和double兼容(都是数字类型) 目标类型大于源类型 例如: ...

  2. attempt to write a readonly database错误的解决(C#,SQLite)

    今天打包WPF程序,安装后总是打不开,查看监控日志原来是SQLite的问题,报错如图 当向SQLite数据库中存入新纪录时总是显示attempt to write a readonly a datab ...

  3. 使用T4Scaffolding 创建自己的代码生成

    nuget查找引入T4Scaffolding.Core 这个是最低层的,没有其他依赖,当然也没有现成的模板 这个有对EF的依赖,自带了生成DBContext的模板   这个自带了一些mvc的contr ...

  4. shallot夏洛特

    ================================================================= ================================== ...

  5. .NET编译过程

    总结一下.NET的编译过程, 一般的高级编程语言会把代码编译成机器码,也就是我们说的非托管代码,执行在编译它的电脑上. 而.NET编译代码的时候会把高级编程语言编译成中间语言 运行在CLR(公共语言运 ...

  6. LinqProvider系列(三)如何实现自己的Linq Provider?

    这篇文章将在前人的肩上,继续完成实现Linq Provider的任务. 首先,我们列出linq语法的解析过程: linq本质上就是把我们惯用的语法糖,变成了一颗表达式树,然后由不同的linq Prov ...

  7. Jsp&Servlet入门级项目全程实录第7讲

    惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 1.获取搜索条件值 function searchStudent(){ $('#dg').datagrid('load ...

  8. 高并发第十二弹:并发容器J.U.C -- Executor组件FutureTask、ForkJoin

    从本章开始就要说 Executor 的东西了.本次讲的是一个很常用的FutureTask,和一个不是那么常用的ForkJoin,我们现在就来介绍吧 引言 大部分时候创建线程的2种方式,一种是直接继承T ...

  9. macbook usb口突然不能用 解决方法

    1.先按shift+ctrl+opt+开机键,等待10秒,着10秒是没有反应的,屏幕不会亮,系统不会跑起来.2.10秒过后松开所以的键.3.再按opt+cmd+r+p接着按开机键,这时电脑会不断重启, ...

  10. Web 开发者学习路线图

      2017 Web 开发者学习路线图(头图源自谷歌) 本文是源自 Github 上 Kamran Ahmed 建立的一个仓库.在文中,作者为他的老教授分享了一组成为前端与后端开发者以及 Devops ...