尧图网页设计 
camunda-commons-ui 的 util 工具集Notifications、Uri Provider 与 uri 过滤器源码级解析【免费下载链接】camunda-bpm-platformCamunda 7 CE is End of Life (EoL). Please check out Camunda 8 instead (https://github.com/camunda/camunda) or read about Camunda 7 Enterprise End of Life (https://camunda.com/blog/2025/02/camunda-7-enterprise-end-of-life-extension/) – Camunda 7 CE was a flexible framework for workflow and decision automation using BPMN and DMN.项目地址: https://gitcode.com/GitHub_Trending/ca/camunda-bpm-platform导读本文围绕 Camunda 7 Webapps 前端公共库 camunda-commons-ui 中lib/util目录展开该模块是 Cockpit、Tasklist、Admin、Welcome 四大应用共用的工具集合。文章以README.md列出的三大核心组件为主线Notifications服务用户消息通知、UriProvider应用 URI 替换与重写以及uri过滤器模板层 URI 转换并结合同目录下的其他工具与仓库真实使用场景给出可直接复用的实现原理与实战说明。读完本文你将掌握如何在 Camunda Webapps 中注册 URI 替换规则、如何在页面中发布与消费通知以及这些工具在源码中的底层实现机制。模块总览一个 AngularJS 工具模块lib/util目录以index.js为模块入口对外暴露一个名为cam.commons.util的 AngularJS 模块module.exports angular .module(cam.commons.util, []) .filter(uri, uriFilter) .provider(Uri, uriProvider) .service(Notifications, notifications);从入口源码index.js可以清楚看到该模块一共注册了三类组件uri过滤器Filter由 uriFilter.js 提供UriProvider由 uriProvider.js 提供Notifications服务Service由 notifications.js 提供。此外同目录下还包含moduleLoader.js、viewer.js、change-dmn-namespace.js等辅助工具以及test/目录下的 DMN 测试资源共同服务于 Camunda Webapps 前端。Notifications 服务面向用户的通知总线用途与定位README 中明确指出Notifications服务需要与notifications-panel指令配合使用用于向用户展示消息。在 Camunda Webapps 中几乎所有需要反馈操作结果的页面都会用到它例如 Cockpit 的流程实例页面、管理员后台的授权管理页面、用户创建/编辑页面等。你可以把它理解为一个发布-订阅式的通知总线业务代码发布通知页面上的通知面板负责订阅并渲染。消息对象结构在 notifications.js 的add()方法注释中定义了完整的通知对象字段这是使用该服务最重要的参考字段类型说明typestring通知类型info、warning、danger、success默认由addMessage/addError自动设置statusstring主状态行文本messagestring详细消息文本可选unsafeboolean若为true则status与message不做 HTML 转义durationnumber通知展示的时长毫秒超过后自动清除exclusiveboolean 或 string 数组排他规则布尔值true清空全部通知数组则按指定的属性名过滤并清除同属性值的通知scopeAngular scope指定后该 scope 被销毁时自动清除对应通知核心 API 与调用链服务返回的对象提供以下方法addError(error)添加错误通知自动将type置为dangeraddMessage(message)添加普通消息自动将type置为infoadd(notification)通用添加方法内部完成转义、排他处理、推送与消费者分发、定时清除等全部逻辑clear(notification)/clearAll()按条件清除或清空通知registerConsumer(consumer)/unregisterConsumer(consumer)注册/注销通知消费者。add()的执行流程notifications.js可以归纳为以下步骤HTML 转义当unsafe不为真时用escapeHtml对status与message进行转义防止 XSS排他处理exclusive为true时调用clearAll()为数组时按数组中的属性名构造过滤条件并调用clear(filter)入队与分发将通知推入notifications数组然后遍历consumers只将通知交给第一个接收它的消费者c.add(notification)返回true则停止定时清除若设置了duration通过$timeout在指定毫秒后自动clear作用域绑定若指定了scope监听其$destroy事件在 scope 销毁时清除通知并删除对 scope 的引用以避免循环依赖。通知面板notifications-panel 指令通知的渲染端是notificationsPanel.js指令。它的工作方式是在link函数中构造一个consumer对象通过Notifications.registerConsumer(consumer)注册为消费者当Notifications.add()分发通知时该消费者用可选的notifications-filter属性过滤后将命中项推入自身作用域的notifications数组模板即通过ng-repeat渲染为 Bootstrap 风格的 alert 面板。div notifications-panel notifications-filter{type: error}/div渲染时根据通知的type映射为alert-danger、alert-success、alert-warning、alert-info等 CSS 类notificationsPanel.js并支持点击关闭按钮手动移除单条通知。指令销毁时调用unregisterConsumer完成清理避免内存泄漏。实战示例Cockpit 中的真实用法以 Cockpit 流程实例页为例processInstance.js操作成功后发布一条 5 秒后自动消失的成功消息失败则发布错误通知并且两类通知都通过exclusive: [http]实现同类型互斥后发通知自动顶掉先前未消失的同组通知Notifications.addMessage({ status: status, message: message, http: true, exclusive: [http], duration: 5000 }); Notifications.addError({ status: $translate.instant(PROCESS_INSTANCE_STATUS_FAILED_RUNNING_PROCESS), message: $translate.instant(PROCESS_INSTANCE_MESSAGE_5, {id: id}), http: true, exclusive: [http] });管理员后台中同样大量使用了该模式例如 authorizationCreate.js、userCreate.js 等页面都会在增删改操作成功后用addMessage提示、失败时用addError反馈。Uri Provider可配置的应用 URI 重写引擎设计动机Camunda Webapps 在部署到不同容器Tomcat、WildFly、JBoss或不同上下文路径时前端代码中的资源与 API 地址是动态变化的。UriProvider正是为了解决这一问题它允许在应用启动时集中注册占位符 - 实际值的替换规则之后所有应用内 URI 都通过统一的appUri()方法完成重写。两种占位符模式在 uriProvider.js 中占位符的匹配使用正则TEMPLATES_PATTERN /[\w]:\/\/|:[\w]/g支持两种语法路径参数式:foo如:appRoot、:engine路径前缀式foo://如app://、engine://、admin://。注册方法为UriProvider.replace(pattern, replacement)其中replacement既可以是普通字符串也可以是一个函数或依赖数组Angular DI 风格例如module.config(function(UriProvider, $routeParams) { UriProvider.replace(:foo, bar); UriProvider.replace(asdf://, function() { return $routeParams.bar; }); });使用函数的好处是替换值可以在运行时按需计算比如从当前 URL 中解析。appUri()执行替换Provider 暴露的$get返回一个带有appUri(str)方法的对象uriProvider.js。其核心逻辑是对输入字符串按TEMPLATES_PATTERN做全局替换每个命中的占位符若在replacements中注册过则被替换为对应值函数/数组类型的 replacement 会通过$injector.invoke求值未注册的占位符原样保留。var uri Uri.appUri(app://#/process-definition/:engine); // 例如 tasklist://#/process-definition/camunda实战示例Tasklist 的完整注册表Tasklist 的 URI 配置uris.js集中演示了 Provider 的典型用法——在ngModule.config阶段一次性注册全部占位符UriProvider.replace(:appRoot, config[app-root]); UriProvider.replace(:appName, tasklist); UriProvider.replace(app://, config.href); UriProvider.replace(adminbase://, config[app-root] /app/admin/); UriProvider.replace(tasklistbase://, config[app-root] /app/tasklist/); UriProvider.replace(cockpitbase://, config[app-root] /app/cockpit/); UriProvider.replace(admin://, config[admin-api]); UriProvider.replace(plugin://, config[tasklist-api] plugin/); UriProvider.replace(engine://, config[engine-api]); // :engine 使用函数动态解析 UriProvider.replace(:engine, [ $window, function($window) { var uri $window.location.href; var match uri.match(/\/app\/tasklist\/([\w-])(|\/)/); if (match) { return match[1]; } else { throw new Error(no process engine selected); } } ]);从源码结构看adminbase://、tasklistbase://、cockpitbase://等前缀规则使得不同应用之间可以互相引用对方的基础路径而:engine采用从当前浏览器地址解析引擎名的函数式替换一旦地址中无法匹配引擎则抛出明确异常。同样地Cockpitcamunda-cockpit-ui.js、Admincamunda-admin-ui.js、Welcomecamunda-welcome-ui.js也各自维护着相似的注册表只是:appName等取值不同。uri 过滤器模板中的一行式 URI 转换uri过滤器是Uri.appUri在模板层的薄封装uriFilter.jsvar UriFilter [ Uri, function(Uri) { return function(input) { return Uri.appUri(input); }; } ];它依赖注入Uri即 Provider 的$get实例将输入字符串直接交给appUri处理。这意味着所有在 AngularJS 配置阶段注册的替换规则都可以直接在 HTML 模板或ng-href、ng-src等指令中生效a ng-href{{ app://#/user/:appName | uri }}用户管理/a过滤器与 Provider 共享同一份replacements表因此模板层无需感知具体替换逻辑只需声明占位符即可是 Camunda Webapps 中前端资源路径随容器/配置变化问题的最常用解决方案。同目录其他辅助工具除 README 列出的三大组件外lib/util目录还包含几个值得了解的辅助工具moduleLoader.js提供load()方法返回requirejs.s.contexts._.defined即当前已由 RequireJS 定义加载的模块集合常用于运行时判断某插件或模块是否已被加载viewer.js基于bpmn-js的NavigatedViewer封装generateViewer(options)用于创建 BPMN 查看器实例当disableNavigation为真时退化为不可导航的基础 ViewercacheViewer(options)按key缓存查看器实例change-dmn-namespace.js将旧版 DMN 命名空间http://www.omg.org/spec/DMN/20151101/dmn11.xsd替换为新版http://www.omg.org/spec/DMN/20151101/dmn.xsd用于兼容旧版 DMN 1.1 文档的渲染test/ 目录下的old-dmn.dmn与current-dmn.dmn正是验证该转换的测试资源。小结camunda-commons-ui的lib/util模块虽然规模不大却是 Camunda 四大 Webapps 前端共用的基础设施Notifications服务与notifications-panel指令构成完整的发布-订阅通知体系覆盖操作反馈、错误提示与自动过期清理UriProvider 与uri过滤器提供了一套基于占位符的应用 URI 重写机制让前端资源与 API 地址能够随容器部署环境灵活适配同目录的viewer、change-dmn-namespace等工具则承担了 BPMN 查看器管理与 DMN 版本兼容等具体职责。理解这些工具的实现与用法是深入阅读或二次开发 Camunda Webapps 前端代码的良好起点。【免费下载链接】camunda-bpm-platformCamunda 7 CE is End of Life (EoL). Please check out Camunda 8 instead (https://github.com/camunda/camunda) or read about Camunda 7 Enterprise End of Life (https://camunda.com/blog/2025/02/camunda-7-enterprise-end-of-life-extension/) – Camunda 7 CE was a flexible framework for workflow and decision automation using BPMN and DMN.项目地址: https://gitcode.com/GitHub_Trending/ca/camunda-bpm-platform创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 camunda-commons-ui 的 util 工具集：Notifications、Uri Provider 与 uri 过滤器源码级解析
camunda-commons-ui 的 util 工具集Notifications、Uri Provider 与 uri 过滤器源码级解析【免费下载链接】camunda-bpm-platformCamunda 7 CE is End of Life (EoL). Please check out Camunda 8 instead (https://github.com/camunda/camunda) or read about Camunda 7 Enterprise End of Life (https://camunda.com/blog/2025/02/camunda-7-enterprise-end-of-life-extension/) – Camunda 7 CE was a flexible framework for workflow and decision automation using BPMN and DMN.项目地址: https://gitcode.com/GitHub_Trending/ca/camunda-bpm-platform导读本文围绕 Camunda 7 Webapps 前端公共库 camunda-commons-ui 中lib/util目录展开该模块是 Cockpit、Tasklist、Admin、Welcome 四大应用共用的工具集合。文章以README.md列出的三大核心组件为主线Notifications服务用户消息通知、UriProvider应用 URI 替换与重写以及uri过滤器模板层 URI 转换并结合同目录下的其他工具与仓库真实使用场景给出可直接复用的实现原理与实战说明。读完本文你将掌握如何在 Camunda Webapps 中注册 URI 替换规则、如何在页面中发布与消费通知以及这些工具在源码中的底层实现机制。模块总览一个 AngularJS 工具模块lib/util目录以index.js为模块入口对外暴露一个名为cam.commons.util的 AngularJS 模块module.exports angular .module(cam.commons.util, []) .filter(uri, uriFilter) .provider(Uri, uriProvider) .service(Notifications, notifications);从入口源码index.js可以清楚看到该模块一共注册了三类组件uri过滤器Filter由 uriFilter.js 提供UriProvider由 uriProvider.js 提供Notifications服务Service由 notifications.js 提供。此外同目录下还包含moduleLoader.js、viewer.js、change-dmn-namespace.js等辅助工具以及test/目录下的 DMN 测试资源共同服务于 Camunda Webapps 前端。Notifications 服务面向用户的通知总线用途与定位README 中明确指出Notifications服务需要与notifications-panel指令配合使用用于向用户展示消息。在 Camunda Webapps 中几乎所有需要反馈操作结果的页面都会用到它例如 Cockpit 的流程实例页面、管理员后台的授权管理页面、用户创建/编辑页面等。你可以把它理解为一个发布-订阅式的通知总线业务代码发布通知页面上的通知面板负责订阅并渲染。消息对象结构在 notifications.js 的add()方法注释中定义了完整的通知对象字段这是使用该服务最重要的参考字段类型说明typestring通知类型info、warning、danger、success默认由addMessage/addError自动设置statusstring主状态行文本messagestring详细消息文本可选unsafeboolean若为true则status与message不做 HTML 转义durationnumber通知展示的时长毫秒超过后自动清除exclusiveboolean 或 string 数组排他规则布尔值true清空全部通知数组则按指定的属性名过滤并清除同属性值的通知scopeAngular scope指定后该 scope 被销毁时自动清除对应通知核心 API 与调用链服务返回的对象提供以下方法addError(error)添加错误通知自动将type置为dangeraddMessage(message)添加普通消息自动将type置为infoadd(notification)通用添加方法内部完成转义、排他处理、推送与消费者分发、定时清除等全部逻辑clear(notification)/clearAll()按条件清除或清空通知registerConsumer(consumer)/unregisterConsumer(consumer)注册/注销通知消费者。add()的执行流程notifications.js可以归纳为以下步骤HTML 转义当unsafe不为真时用escapeHtml对status与message进行转义防止 XSS排他处理exclusive为true时调用clearAll()为数组时按数组中的属性名构造过滤条件并调用clear(filter)入队与分发将通知推入notifications数组然后遍历consumers只将通知交给第一个接收它的消费者c.add(notification)返回true则停止定时清除若设置了duration通过$timeout在指定毫秒后自动clear作用域绑定若指定了scope监听其$destroy事件在 scope 销毁时清除通知并删除对 scope 的引用以避免循环依赖。通知面板notifications-panel 指令通知的渲染端是notificationsPanel.js指令。它的工作方式是在link函数中构造一个consumer对象通过Notifications.registerConsumer(consumer)注册为消费者当Notifications.add()分发通知时该消费者用可选的notifications-filter属性过滤后将命中项推入自身作用域的notifications数组模板即通过ng-repeat渲染为 Bootstrap 风格的 alert 面板。div notifications-panel notifications-filter{type: error}/div渲染时根据通知的type映射为alert-danger、alert-success、alert-warning、alert-info等 CSS 类notificationsPanel.js并支持点击关闭按钮手动移除单条通知。指令销毁时调用unregisterConsumer完成清理避免内存泄漏。实战示例Cockpit 中的真实用法以 Cockpit 流程实例页为例processInstance.js操作成功后发布一条 5 秒后自动消失的成功消息失败则发布错误通知并且两类通知都通过exclusive: [http]实现同类型互斥后发通知自动顶掉先前未消失的同组通知Notifications.addMessage({ status: status, message: message, http: true, exclusive: [http], duration: 5000 }); Notifications.addError({ status: $translate.instant(PROCESS_INSTANCE_STATUS_FAILED_RUNNING_PROCESS), message: $translate.instant(PROCESS_INSTANCE_MESSAGE_5, {id: id}), http: true, exclusive: [http] });管理员后台中同样大量使用了该模式例如 authorizationCreate.js、userCreate.js 等页面都会在增删改操作成功后用addMessage提示、失败时用addError反馈。Uri Provider可配置的应用 URI 重写引擎设计动机Camunda Webapps 在部署到不同容器Tomcat、WildFly、JBoss或不同上下文路径时前端代码中的资源与 API 地址是动态变化的。UriProvider正是为了解决这一问题它允许在应用启动时集中注册占位符 - 实际值的替换规则之后所有应用内 URI 都通过统一的appUri()方法完成重写。两种占位符模式在 uriProvider.js 中占位符的匹配使用正则TEMPLATES_PATTERN /[\w]:\/\/|:[\w]/g支持两种语法路径参数式:foo如:appRoot、:engine路径前缀式foo://如app://、engine://、admin://。注册方法为UriProvider.replace(pattern, replacement)其中replacement既可以是普通字符串也可以是一个函数或依赖数组Angular DI 风格例如module.config(function(UriProvider, $routeParams) { UriProvider.replace(:foo, bar); UriProvider.replace(asdf://, function() { return $routeParams.bar; }); });使用函数的好处是替换值可以在运行时按需计算比如从当前 URL 中解析。appUri()执行替换Provider 暴露的$get返回一个带有appUri(str)方法的对象uriProvider.js。其核心逻辑是对输入字符串按TEMPLATES_PATTERN做全局替换每个命中的占位符若在replacements中注册过则被替换为对应值函数/数组类型的 replacement 会通过$injector.invoke求值未注册的占位符原样保留。var uri Uri.appUri(app://#/process-definition/:engine); // 例如 tasklist://#/process-definition/camunda实战示例Tasklist 的完整注册表Tasklist 的 URI 配置uris.js集中演示了 Provider 的典型用法——在ngModule.config阶段一次性注册全部占位符UriProvider.replace(:appRoot, config[app-root]); UriProvider.replace(:appName, tasklist); UriProvider.replace(app://, config.href); UriProvider.replace(adminbase://, config[app-root] /app/admin/); UriProvider.replace(tasklistbase://, config[app-root] /app/tasklist/); UriProvider.replace(cockpitbase://, config[app-root] /app/cockpit/); UriProvider.replace(admin://, config[admin-api]); UriProvider.replace(plugin://, config[tasklist-api] plugin/); UriProvider.replace(engine://, config[engine-api]); // :engine 使用函数动态解析 UriProvider.replace(:engine, [ $window, function($window) { var uri $window.location.href; var match uri.match(/\/app\/tasklist\/([\w-])(|\/)/); if (match) { return match[1]; } else { throw new Error(no process engine selected); } } ]);从源码结构看adminbase://、tasklistbase://、cockpitbase://等前缀规则使得不同应用之间可以互相引用对方的基础路径而:engine采用从当前浏览器地址解析引擎名的函数式替换一旦地址中无法匹配引擎则抛出明确异常。同样地Cockpitcamunda-cockpit-ui.js、Admincamunda-admin-ui.js、Welcomecamunda-welcome-ui.js也各自维护着相似的注册表只是:appName等取值不同。uri 过滤器模板中的一行式 URI 转换uri过滤器是Uri.appUri在模板层的薄封装uriFilter.jsvar UriFilter [ Uri, function(Uri) { return function(input) { return Uri.appUri(input); }; } ];它依赖注入Uri即 Provider 的$get实例将输入字符串直接交给appUri处理。这意味着所有在 AngularJS 配置阶段注册的替换规则都可以直接在 HTML 模板或ng-href、ng-src等指令中生效a ng-href{{ app://#/user/:appName | uri }}用户管理/a过滤器与 Provider 共享同一份replacements表因此模板层无需感知具体替换逻辑只需声明占位符即可是 Camunda Webapps 中前端资源路径随容器/配置变化问题的最常用解决方案。同目录其他辅助工具除 README 列出的三大组件外lib/util目录还包含几个值得了解的辅助工具moduleLoader.js提供load()方法返回requirejs.s.contexts._.defined即当前已由 RequireJS 定义加载的模块集合常用于运行时判断某插件或模块是否已被加载viewer.js基于bpmn-js的NavigatedViewer封装generateViewer(options)用于创建 BPMN 查看器实例当disableNavigation为真时退化为不可导航的基础 ViewercacheViewer(options)按key缓存查看器实例change-dmn-namespace.js将旧版 DMN 命名空间http://www.omg.org/spec/DMN/20151101/dmn11.xsd替换为新版http://www.omg.org/spec/DMN/20151101/dmn.xsd用于兼容旧版 DMN 1.1 文档的渲染test/ 目录下的old-dmn.dmn与current-dmn.dmn正是验证该转换的测试资源。小结camunda-commons-ui的lib/util模块虽然规模不大却是 Camunda 四大 Webapps 前端共用的基础设施Notifications服务与notifications-panel指令构成完整的发布-订阅通知体系覆盖操作反馈、错误提示与自动过期清理UriProvider 与uri过滤器提供了一套基于占位符的应用 URI 重写机制让前端资源与 API 地址能够随容器部署环境灵活适配同目录的viewer、change-dmn-namespace等工具则承担了 BPMN 查看器管理与 DMN 版本兼容等具体职责。理解这些工具的实现与用法是深入阅读或二次开发 Camunda Webapps 前端代码的良好起点。【免费下载链接】camunda-bpm-platformCamunda 7 CE is End of Life (EoL). Please check out Camunda 8 instead (https://github.com/camunda/camunda) or read about Camunda 7 Enterprise End of Life (https://camunda.com/blog/2025/02/camunda-7-enterprise-end-of-life-extension/) – Camunda 7 CE was a flexible framework for workflow and decision automation using BPMN and DMN.项目地址: https://gitcode.com/GitHub_Trending/ca/camunda-bpm-platform创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考