Node-RED UIBuilder 7.1.0版本发布：增强前端交互与表格处理能力

Node-RED UIBuilder 7.1.0版本发布：增强前端交互与表格处理能力

node-red-contrib-uibuilder Easily create data-driven web UI's for Node-RED using any (or no) front-end framework. 项目地址: https://gitcode.com/gh_mirrors/no/node-red-contrib-uibuilder

Node-RED UIBuilder是一个强大的可视化Web界面构建工具，它允许开发者在Node-RED环境中快速创建复杂的Web应用界面。最新发布的7.1.0版本带来了一系列令人兴奋的功能增强和改进，特别是在前端交互和表格处理方面。

核心功能增强

7.1.0版本最显著的改进之一是实现了从任意Node-RED自定义节点向uibuilder客户端发送消息的能力。开发者现在可以在运行时代码中使用RED.events.emit('UIBUILDER/send/<url-name>', {payload: '自定义消息'})语法，其中<url-name>是uibuilder节点中设置的URL。这一功能为跨节点通信提供了极大便利，虽然它绕过了uib-cache节点的处理。

另一个实用功能是简化了从Function节点向客户端发送消息的流程。开发者只需在函数代码中添加RED.util.uib.send('uibname', {....})即可向指定uibuilder实例的所有已连接客户端发送消息。

前端表格处理能力

针对前端开发者，7.1.0版本引入了一套完整的表格操作函数集，使得在网页中创建和操作表格变得异常简单：

• buildHtmlTable：根据输入数据生成表格HTML
• createTable：创建新表格并附加到DOM中的父元素
• tblAddRow：向现有表格添加新行
• tblRemoveRow：从表格中移除行
• tblAddListener：为表格添加行/单元格事件监听器

这些函数大大简化了动态表格的创建和管理过程，开发者可以轻松实现表格数据的实时更新和交互功能。

样式系统改进

uib-brand.css样式系统在本版本中获得了多项增强：

• 新增了square和round实用类，用于快速创建方形或圆形元素
• 核心字体更改为与uib-brand.css匹配，不再依赖Google字体
• 添加了text-wrap: balance和text-wrap: pretty属性，改善标题和段落文本的换行效果
• 为常用容器元素添加了container-type: inline-size属性，为未来使用容器查询做准备

架构优化与安全增强

7.1.0版本对项目架构进行了多项优化：

• 将所有对node.js fs库的引用集中到libs/fs.js中
• 移除了对@totallyinformation/ti-common-event-handler的依赖
• 重构了无代码元素的运行时处理逻辑，将其移至nodes/elements公共文件夹
• 引入了LightningCSS工具来编译源CSS，确保不使用过于新的CSS特性

在安全方面，项目现在使用Socket安全检查工具对所有GitHub仓库进行供应链安全和隐私检查，显著提升了项目的安全性。

开发者体验改进

7.1.0版本还包含多项提升开发者体验的改进：

• 当URL变更时，IDE编辑器URL会自动更新，特别适用于复制/粘贴uibuilder节点的情况
• 前端模板中更明确地标明了uibuilder客户端库的必要性
• 改进了uib-var组件的错误消息和事件处理
• 文档全面更新，特别是关于事件处理和表格函数的说明

总结

Node-RED UIBuilder 7.1.0版本通过增强的消息传递能力、强大的表格处理功能和改进的样式系统，为开发者提供了更加强大和灵活的工具集。架构优化和安全增强使项目更加健壮，而开发者体验的改进则让使用过程更加顺畅。这些改进使得UIBuilder在构建复杂Web界面时的表现更加出色，值得所有Node-RED开发者关注和升级。

node-red-contrib-uibuilder Easily create data-driven web UI's for Node-RED using any (or no) front-end framework. 项目地址: https://gitcode.com/gh_mirrors/no/node-red-contrib-uibuilder