Tiny流程编辑器

流程编辑器是Tiny框架提供了编辑流程的图形化工具。目前支持的流程有逻辑流程和页面流程,未来也许会扩展其他的流程。

        流程编辑器简介

后缀是*.flow或者*.pageflow的流程文件可以直接在Eclipse里面双击,调用相关编辑器打开;新建流程则按“New”-“Other”-“Tiny框架”的顺序,从向导界面选择适当的流程。

  • 逻辑流程。处理具体业务组件的流程,包含的组件是逻辑组件(*.fc.xml),生成的逻辑流程文件(*.flow)。
  • 页面流程。处理控制层的流程,包含的组件是页面组件(*.pagefc.xml),生成的页面流程文件(*.pageflow)。页面流程可以以子流程的形式调用逻辑流程。

向导界面如下图:

QQ%E6%88%AA%E5%9B%BE20141215103247.jpg (36.95 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

        基础组件资源

目前Tiny框架提供如下几种组件库,用户可以根据实际需要配合流程编辑器使用。使用方法很简单,在pom.xml加入相关组件依赖,刷新依赖后,在流程编辑器的控制面板就能看到相关组件。

  • org.tinygroup.flowbasiccomponent          提供了逻辑基本组件,如对象转换组件、调用静态方法和bean组件等。
  • org.tinygroup.flowservicecomponent       提供了逻辑基本服务,如调用服务、调用本地流程、调用页面流程等。
  • org.tinygroup.tinydbflowcomponent         提供了TinyDB数据库组件,如插入组件、更新组件、删除组件、查询记录组件等。
  • org.tinygroup.pageflowbasiccomponent    提供了页面基本组件,如页面重定向、页面转发等。

编写页面流程

接下来我们就讲解如何通过工具快速编写页面流程。

第一步,选择工程,按“New”-“Other”的顺序,打开图形化工具界面,选择“页面流程”,见下图:

QQ%E6%88%AA%E5%9B%BE20141215111636.jpg (40.7 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

点击“next”,输入要定义的页面流程名称,比如输入aaa,那么最后保存的配置文件就是aaa.pageflow,图形工具初始化界面如下图:

QQ%E6%88%AA%E5%9B%BE20141215111836.jpg (38.26 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

QQ%E6%88%AA%E5%9B%BE20141215111950.jpg (23.54 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

面板简介

  • 面板中央是“流程编排”的画板,对流程、流程节点、节点关系的增加、删除、编辑全部在这里完成。默认有“开始”和“结束”两个节点。
  • 面板右侧上方是控件栏:最上方是查询框,在组件很多时,比较有用; 下面三个按钮依次是选择模式、正常分支、异常分支,正常分支就是给节点间添加一条表示正常流转的黑色单箭头,异常分支是给节点间添加一条表示异常时才流转的红色单箭头。
  • 面板右侧下方是组件列表。Tiny框架支持XML配置和类注释两种方式读取组件信息,页面流程加载的页面组件对应的配置名称是*.pagefc.xml,在项目开发中,组件设计者把设计好组件类及相关配置打包,流程开发者只要在工程引入这些jar包,就可以在图形化工具自动找到相关组件。

示例流程图:

QQ%E6%88%AA%E5%9B%BE20141215151144.jpg (23.85 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

面板下方是Properties,用户可以在这里查看、编辑流程、组件、流转的属性,如下图:

QQ%E6%88%AA%E5%9B%BE20141215145854.jpg (21.78 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

QQ%E6%88%AA%E5%9B%BE20141215150049.jpg (22.09 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

QQ%E6%88%AA%E5%9B%BE20141215151014.jpg (17.93 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

属性页说明

  • 流程属性页。包含扩展属性、基本信息、流程参数三个Tab页,点击画板空白处,即可打开。
  • 组件属性页。包含扩展属性、基本信息两个Tab页,点击组件节点,即可打开。
  • 流转属性页。包含扩展属性、基本信息两个Tab页,点击红色或者黑色单箭头,即可打开。

        添加节点

  • 鼠标选中某个组件,然后拖曳到画板上,放开鼠标,自动就添加一个包含刚才选择组件的节点。
  • 因为新增节点的上下游节点是由框架决定的,如果不符合要求,可以删除旧的关联,添加新的关联。

增加组件的效果,如图:

QQ%E6%88%AA%E5%9B%BE20141215151446.jpg (20.3 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

QQ%E6%88%AA%E5%9B%BE20141215151530.jpg (21.05 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

Tiny框架会自动计算组件位置,不仅便利而且非常美观。另外一定有用户问,如何将组件拖到自己想要的位置?很简单,将要添加的组件往目标组件的下方放就可以了。

譬如,本人拖曳一个“sql查询组件”在“开始”节点和“插入组件”中间,那么流程编辑器会自动生成如下效果图:

QQ%E6%88%AA%E5%9B%BE20141215152230.jpg (17.46 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

譬如,将“sql查询组件”拖到“插入组件”右边,那么流程编辑器会生成如下关系:

QQ%E6%88%AA%E5%9B%BE20141215152507.jpg (21.68 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

譬如,将“sql查询组件”拖到“插入组件”下面,那么流程编辑器会生成如下关系:

QQ%E6%88%AA%E5%9B%BE20141215152620.jpg (21.98 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

        删除节点

  • 第一种删除办法,选中要删除的节点,按Eclipse工具栏上的删除按钮。
  • 第二种删除办法,选中要删除的节点,按键盘的Del按钮也可以删除。

编写逻辑流程 

第一步,选择工程,按“New”-“Other”的顺序,打开图形化工具界面,选择“逻辑流程”,见下图:

QQ%E6%88%AA%E5%9B%BE20141215110422.jpg (40.78 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

点击“next”,输入要定义的逻辑流程名称,比如输入bbb,那么最后保存的配置文件就是bbb.flow,图形工具初始化界面如下图:

QQ%E6%88%AA%E5%9B%BE20141215110551.jpg (37.57 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

最后点击“Finish”就完成了创建工作,结果如图:

QQ%E6%88%AA%E5%9B%BE20141215110801.jpg (18.83 KB, 下载次数: 0)

下载附件

2015-5-27 13:41 上传

时间: 2024-07-31 00:00:18

Tiny流程编辑器的相关文章

Tiny界面编辑器

界面编辑器又称UIML设计器,是Tiny框架设计的编辑界面布局的开发工具,设计思路如下:         操作流程 界面设计是多角色,多步骤的一个开发过程: 界面组件设计人员:定义界面组件及布局的元数据文件(*.componenttype和*.layouttype). 界面开发人员:导入相关组件.布局的元数据到业务工程,使用界面编辑器生成布局文件(*.uiml). 一般开发人员:调用代码生成工具,根据布局文件生成对应平台的开发代码. 界面编辑器是所见即所得,支持各种常见的操作. 目前界面编辑器支

Tiny模板编辑器

特性介绍 大纲支持:支持在大纲当中显示一些关键内容,并可以快速定位 语法高亮:支持在编辑器中,根据语法进行着色,使得代码更容易阅读和排错 错误提示:如果模板语言存在错误,则可以在工程导航.错误视图及编辑窗口进行错误提示 代码折叠:支持对代码块进行代码折叠,方便查阅 语法提示:支持Tiny模板引擎语法提示及Html语法提示方便快速录入 快速定位:支持Tiny模板中开始语句与结束语句间快速切换 变量快速提示:点鼠标点击某变量时,会高亮显示文件中的所有同名变量 宏定义对应位置显示:在tiny块处理的标

基于canvas的流程编辑器

今年由于项目上需要给客户的流程管理系统进行升级,其中包含流程的可视化.于是在网上找一些可以用的轮子,考察了D3,js.GooFlow.js.G6-Editor等工具后,发现D3,js学习成本太高,G6-Editor功能基本够用,但是不能放大缩小图形和移动连接线是硬伤,而且GooFlow.js和G6-Editor目前已经闭源,于是就决定自己试着写一个流程编辑器. 由于之前画流程图基本使用的都是Visio,所以编辑器的操作风格基本和Visio一致,也吸收了一些G6-Editor的操作风格. HTML

Tiny服务编辑器

Service开发 注解方式.开发人员采用注解元素直接在服务的java类里面配置服务的输入参数.结果以及跳转页面的信息,好处是无需任何配置文件,但是会侵入代码,不是所有程序员都喜欢这种方式. XML配置方式.开发人员配置*.service.xml和*.servicemapping.xml来描述服务的输入参数.结果以及跳转页面,无需侵入代码.如果采用人工方式写XML,既麻烦又容易出错,因此Tiny小组提供了服务编辑器方便开发人员编辑配置. 想使用服务编辑器很简单,在Eclipse的IDE找到对应的

Activiti流程引擎学习0——解决idea中编辑器的中文乱码问题

我使用的是idea2017+activiti6.0版本. 这个第0篇主要是为了解决安装activiti插件后创建的流程模板中文乱码的问题. 1.安装Activiti流程编辑器插件. 1.1网上资料很多,这里简要说一下:File->Settings->Plugins,然后输入actiBPM,双击搜索结果或点击Install plugin安装即可. 但是!我每次都安装失败0.x 所以和我一样运气超棒的同学可以使用下面这种方法. 1.2File->Settings->Plugins,然后

Tiny框架2.0版火热推出

方法论 方法论决定了可以达到的高度 方法论,就是人们认识世界.改造世界的根本方法. 它是人们用什么样的方式.方法来观察事物和处理问题.概括地说,世界观主要解决世界"是什么"的问题,方法论主要解决"怎么办"的问题. 方法论是一种以解决问题为目标的体系或系统,通常涉及对问题阶段.任务.工具.方法技巧的论述.方法论会对一系列具体的方法进行分析研究.系统总结并最终提出较为一般性的原则. 方法论也是一个哲学概念.人们关于"世界是什么.怎么样"的根本观点是世

从应用示例来认识Tiny框架

呵呵,Tiny框架神龙见首不见尾已经许多时间了,里面只看到一些几个孤零零的子框架.今天就通过Tiny开发示例的方式来重点展示一下利用Tiny框架是如何开发的.HelloWorld首先从这个神一样的示例写起.服务开发:方式1:注解方式 [AppleScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 @ServiceComponent() public class HelloWorldAnnotationService{     @Ser

如何在流程管理软件中加强业务数据串联

免费版下载地址:http://pan.baidu.com/share/home?uk=2485372310#category/type=0 1.表单排序功能 表单现在可以设置排序序号,以便使它们在办公页面按照设定的顺序排列,如下图: 2.增加短信.邮件发送设置 流程编辑器环节属性里增加了新的手机短信和电子邮件发送设置:可选发送.必须发送.禁止发送: 3.表单隐藏功能 现在可设置在某个环节隐藏掉表单设计器设计的表单: 4.更多的业务流程定制功能 业务信息增加了若干属性: 现在可给环节设置运行状态标

org.tinygroup.tinydbflowcomponent-数据库流程组件

基础的数据库操作流程组件,提供了简单的数据库封装.<快速入门>的数据库例子就是采用该组件完成.用户将依赖添加到相应的工程,就可以在流程编辑器的右侧的面板看到相关控件: 英文名                                  中文名                                    控件说明                                  tinydbAddService 插入组件