Flowable UI Web应用搭建教程(图解)

简介: Flowable UI Web应用搭建教程(图解)

Flowable UI应用

Flowable提供了几个web应用,用于演示及介绍Flowable项目提供的功能:

  • Flowable IDM: 身份管理应用。为所有Flowable UI应用提供单点登录认证功能,并且为拥有IDM管理员权限的用户提供了管理用户、组与权限的功能。
  • Flowable Modeler: 让具有建模权限的用户可以创建流程模型、表单、选择表与应用定义。
  • Flowable Task: 运行时任务应用。提供了启动流程实例、编辑任务表单、完成任务,以及查询流程实例与任务的功能。
  • Flowable Admin: 管理应用。让具有管理员权限的用户可以查询BPMN、DMN、Form及Content引擎,并提供了许多选项用于修改流程实例、任务、作业等。管理应用通过REST API连接至引擎,并与Flowable Task应用及Flowable REST应用一同部署。

所有其他的应用都需要Flowable IDM提供认证。每个应用的WAR文件可以部署在相同的servlet容器(如Apache Tomcat)中,也可以部署在不同的容器中。由于每个应用使用相同的cookie进行认证,因此应用需要运行在相同的域名下。

1. 下载安装部署

下载Tomcat:https://tomcat.apache.org/download-80.cgi 官网下载后解压缩到非中文目录即可

然后是下载FlowableUI的文件:

  • 在Flowable6.6之前是有四个功能包的,如果只想使用modeler设计器,可以参考我的另一篇博文关于6.4.1的设计器UI使用:
  • 在Flowable6.6之后把FlowableUI中提供的四个功能合并到了一起,这次我们下载6.7.2然后集合UI功能。

进入下载官网:https://www.flowable.com/open-source-download

我们可以不用进行注册,把网页往下拉,可以看到直接到下载页的链接,点进去

比如说我找到6.7.2进行下载:

然后解压进入war目录下,把解压缩后的两个war包拷贝到Tomcat的解压缩的webapps目录下

Tomcat目录如下:

2. 启动服务

启动Tomcat服务,执行startup.bat文件

如果启动中出现乱码,像下面的情况:

修改Tomcat的conf目录下的 logging.properties 文件中的编码

在最后添加这行代码,修改一下显示控制台的字节编码

java.util.logging.ConsoleHandler.encoding = GBK

如果一闪而过则检查jdk的环境变量配置。启动成功后,在浏览器中访问 http://localhost:8080/flowable-ui, 默认的账号密码是 admin/test

3. 用户管理

我们先在 身份管理应用程序 中创建用户并授权

点击身份管理应用程序(IDM)创建用户

填写详细信息

授权管理,给你用的相关应用授权(我懒我都授权了 哈哈哈哈哈hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh)

4. 绘制流程

进入建模器应用程序,创建新的流程

流程图界面

创建流程,分配处理人

继续完成流程图的创建

5. 部署流程

绘制好的流程图,我们只需要一键导出即可

下载下来后拷贝到项目的resource目录下即可

然后就可以在业务代码里使用了


相关文章
|
2月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
2月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
68 7
|
5月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
295 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
人工智能 安全 程序员
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
|
4月前
|
机器学习/深度学习 人工智能 自然语言处理
Deep Research Web UI:开源版Deep Research!接入DeepSeek一键生成深度研究报告,可视化检索过程
Deep Research Web UI 是一款开源的 AI 研究助手工具,通过 AI 驱动的迭代搜索和多语言支持,帮助用户高效进行深度研究,并以树状结构可视化研究过程,支持导出为 Markdown 或 PDF 格式。
972 10
Deep Research Web UI:开源版Deep Research!接入DeepSeek一键生成深度研究报告,可视化检索过程
|
6月前
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
262 68
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
|
7月前
|
流计算 UED
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构,我们将创建一个动态购物车,支持商品的添加、移除以及实时总价计算。
240 69
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
|
3月前
|
JSON 监控 JavaScript
Swagger UI 本地主机教程: 如何在本地使用 Swagger UI?
Swagger UI 提供在线和离线版本,但由于各种原因,你可能需要在本地使用 Swagger UI。 在本文中,我们将向你展示如何在本地使用 Swagger UI。
|
4月前
|
开发框架 缓存 自然语言处理
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
229 3
|
5月前
|
中间件 关系型数据库 数据库
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
143 19