node red contrib uibuilder

节点红色contrib-uibuilder

Node-Red的Uibuilder允许轻松创建数据驱动的前端Web应用程序。

它包含许多辅助功能，这些功能可以减少或消除为构建数据驱动的Web应用程序和与Node-Red集成的用户界面编写代码的需求。

笔记

Uibuilder触发了流程记分卡条目中的质量警告。

“依赖性数量”为> 6-这是由于Uibuilder中的大量功能所致，并且是预期的。即便如此，V7只有7个依赖项。将来将在以后的版本中删除1个。

安装

最好使用Node-Red的调色板管理器安装Uibuilder。

手动安装和其他版本

要从您的节点红服务器上的命令行手动安装：

 cd ~ /.node-red
npm install node-red-contrib-uibuilder

要安装旧版本，请提供主要版本编号：

 cd ~ /.node-red
npm install node-red-contrib-uibuilder@v5

要安装开发分支，请从GitHub安装。分支名称是未来的版本号，请检查GitHub以获取可用分支：

 cd ~ /.node-red
npm install totallyinformation/node-red-contrib-uibuilder#v7.1.0

如果手动安装，则需要重新启动节点红色。

更新

当前的ChangElog包含每个版本的所有更改和需求详细信息。

可以在先前的更改文档中找到较旧的更改：ChangElog-V5，ChangElog-V5，ChangElog-V3/V4，ChangElog-V2和ChangElog-V2。

入门

安装后，以下是典型的简单流程。

1. 添加一个uibuilder节点。打开其设置，并给它一个“ URL”，用作识别名称。关闭设置，然后单击部署按钮。
2. 重新打开uibuilder节点的设置，然后单击“打开”按钮以查看结果网页。

现在，您准备编辑前端HTML/JavaScript/CSS（如果需要），并在Node-red中添加逻辑以提供输入和处理输出。您也可以使用Uibuilder的无代码功能也可以创建UI，也可以使用UI。

请参阅文档和介绍视频中的初学演练，以获取更多帮助。还要尝试内置的示例流。

例子

在Node-Red中，使用汉堡菜单。单击导入。点击示例。选择Node-red-contrib-uibuilder文件夹，然后选择一个示例。

Uibuilder中的模板功能提供了各种配置的工作前端代码。

其他示例可以在节点红色流站点和Uibuilder Wiki上找到。另请参阅常见问题解答，并在节点红色论坛上回答问题。

文档和其他链接

请参阅文档网站。即使没有Internet连接，也可以从Uibuilder节点内部访问这一点。

YouTube上有一个“官方”视频教程的库。其他人也产生了与Uibuilder相关的内容。

问题，问题和建议

提出问题或讨论可能增强功能的最佳场所是节点红色论坛。

或者，使用GitHub问题日志来提出问题或贡献建议和增强，以及GitHub讨论页面，以获取一般问题，建议等。

其他链接

• uibuilder用于节点红色

  • ❓想法，问题和一般帮助 - 使用Node-contrib-uibuilder标签在节点红色论坛上询问您的问题
  • ？文档 - 转到最新文档
  • ？‍流 - 示例流，节点和收集与Uibuilder有关
  • Wiki-更多文档和示例
  • 示例Svelte外部模板 - 如果您想构建自己的Svelte应用程序
  • 示例简单的外部模板 - 如果您想构建自己的外部模板
  • UPLOT UIBUILDER扩展名 - 有用的图表，但也演示了如何构建自己的扩展
  • ？ uibuilder使用的事件处理程序模块 - 因此您可以看到一些内部工作

• ？ UI库模块由UIBUILDER-可用于将UI标准配置JSON转换为HTML的独立使用

• ？节点 - red-contrib-moment-节点用于使用that the the the node-red中的日期/时间处理库

• ？ node-red的测试节点 - 一些节点红色的测试节点，可以帮助您了解所有内容的工作方式

• ？ HOTNIPI量规Web组件 - 一个非常漂亮的量规组件。与Node-Red，Uibuilder或独立的工作

• ？实验性网络组件 - 具有一些节点红色和UIBUILDER特定的增强功能，但也可以很好地工作

• ？阵列grouper-独立函数重塑一系列对象

目的

Uibuilder的目的是：

• 支持简单的方法来创建和交付数据驱动的Web应用程序和网页（也称为Web用户界面）。
• 成为节点红色和前端（浏览器）UI Web应用程序之间的导管。
• 成为UI框架不可知论。不需要使用Uibuilder，但它可以在需要的情况下与它们一起使用。 Uibuilder旨在通过更容易使用Vanilla HTML/CSS来减少框架的要求。
• 提供界面/数据标准，用于交换Node-Red和网页之间的数据和控制。
• 从单个节点红色实例启用多个Web应用程序的创建和管理。
• 减少创建和管理Web应用所需的前端代码（HTML/JavaScript）的数量（HTML/JavaScript）。
• 通过提供低代码和无代码功能来减少创建可靠，可访问的Web应用所需的知识。
• 使安装和服务前端库变得易于支持，以支持更复杂的Web应用程序的开发。

特征

Uibuilder的核心特征：

• 尽可能仅使用香草，本机HTML，CSS和JavaScript。除了用于通信的socket.io客户端（被烘烤到前端库）之外，不需要其他前端库。 Uibuilder尽可能靠近本地HTML，以避免将来的兼容性问题。但是，它的确使与本机HTML的互动更加容易。
• 节点可以将输入数据的零代码翻译转换为可用且可访问的Web元素。
• 低码，配置驱动（数据驱动）UI的功能。创建一个描述UI并转换为实际代码的框架，而无需编写代码。
• 节点红服务器（后端）和前端UI之间的2向通信通道。
• 节点红节点是与其他节点进行通信的重点，以额外使用。
• 前端库至：在客户端浏览器中执行通信的复杂部分；使操纵UI更轻松，更一致；可以轻松根据需要（自动和手动）将数据恢复到节点红色。
• 易于使用的前端代码模板和示例，使人们能够快速开始创建Web应用程序。
• NPM软件包的管理和服务，可通过前端代码轻松地提供前端库。
• 从节点红色编辑器中编辑前端代码（专为小型更改而设计，通常使用Web开发工具）。
• 各种服务器中间软件和API选项，可提供其他自定义功能。
• 一种缓存功能，允许新加入客户接收最新的数据和配置。加入/离开客户端在Node-Red中创建通知。
• 用于创建单页应用程序的前端轻型路由器。
• 拥有尽可能多的uibuilder节点实例。每个实例允许创建许多网页和子文件夹，以便于管理。
• 每个uibuilder节点实例都提供节点红服务器（后端）和浏览器（前端）UI代码之间的私有2向通信通道。
• 支持标准Web开发工作流的使用。
• 允许创建专用的Web服务以促进独立的安全性。

无代码UI

Uibuilder继续扩展其无代码功能。 uib-element ， uib-tag和uib-update节点提供了用于创建和更新数据驱动Web UI的无代码方法。

uib-element接收简单的数据并输出配置数据。然后可以通过uibuilder节点将其发送到前端。另外，它可以保存，并在初始负载中使用的结果。 Uibuilder v6.1中提供了几种简单的选项，例如表和列表，将来将在以后的版本中提供其他元素和结构。 Uibuilder前端客户端获取配置信息，并动态构建HTML元素并将其插入到网页上（或根据需要删除/更新）。

虽然这不是最有效的处理方法（因为更新大部分是替代整个元素，而这些元素对于大桌子（例如大表）来说可能非常大），但从创作的角度来看，它非常有效。因此， uib-update节点为元素更新和更改特定属性和“插槽”内容提供了一种更具针对性的方法。

然后， uib-tag节点使您可以创建任何单个HTML元素，因此覆盖了uib-element可能还没有覆盖的所有内容。这甚至可以与Web组件一起使用，即HTML的香草/JavaScript本机对HTML的增强功能。

重要的是要注意，这种方法不需要前端，第三方框架（例如Vuejs或React）！一切都使用了皮肤下的香草HTML，JavaScript和CSS，因此与当前和未来的网络标准兼容。

低代码UI

uib-element输出的数据是一种格式，您可以在Node-red中使用，甚至在需要时在前端代码中使用。它描述了一组HTML UI元素，但不需要您实际编写HTML代码。配置模式非常灵活，甚至允许您从外部文件加载配置数据，HTML，脚本和新的ECMA模块/组件。

前端客户端内置的架构和UI创建器功能是专门设计用于使用当前和未来HTML标准的，以避免使用第三方Party前端框架时通常遇到的各种问题（例如，主要版本更改迫使所有工具的重写迫使重写您的工具的重写）。因此，应支持ES模块，ECMA组件和未来的ECMA版本。

现在， ui.js库也可以供任何人在自己的项目中使用，并且在没有Uibuilder的情况下完全独立地工作。它也被烘烤到uib-html节点中，该节点将低代码配置从Node-Red内部转换为HTML。

未来的方向

Uibuilder将继续独立于前端框架，尽管它也将继续尽可能兼容，以便可以与它一起使用任何所需的框架。

• 它将继续获得更多零代码的预构建元素。
• 它将改善对实例根文件夹结构的控制，并能够执行package.json中定义的npm run脚本。
• 更多视频！

长期重点

仍然希望构建一个页面构建器功能，以便没有编码技能的人可以构建出色的数据驱动Web应用程序。

• 文档质量将继续提高。
• 第三方模块依赖项的数量将减少。从最终删除fs-extra开始，而偏向于本机承诺的FS库。紧随其后的是arun 。
• 一旦Node.js v18或20是基础，则可能将代码重构为单个repo中的多个子包装。

功能细节和好处

• 设计为节点红色官方仪表板的替代方案。没有开销和限制。
• 控制节点红色admin UI的所有内容。编辑您的前端资源文件，管理前端软件包。无需访问服务器命令行。
• 管理启动模板。提供了香草HTML，Svelte，Vuejs（V2和V3）和Vuejs/Bootstrap-vue的内部模板。通过DEGIT加载来自其他存储库的模板。可以轻松共享提供整个应用程序或仅处理样板的模板。
• 随心所欲地拥有尽可能多的自定义用户界面。每个入口点只需要1个节点。使用链接节点从流量的其他部分发送数据。入口点可以包含多个网页。
• 具有与消息接口分开的控件接口。知道什么时候浏览器选项卡连接或断开连接，发送缓存的数据等等。
• 提供稳定的客户端ID ，以标识特定的浏览器配置文件，直到重新启动为止。提供了一个标签，可以在客户端设备上标识特定的浏览器选项卡。
• 向Node-RED提供有关正在发送MSG的客户端的信息，以便安全性和其他处理可以识别客户端，用户等。
• 比节点红色的官方仪表板可以轻松得多，移动性更高。
• 使用您喜欢的任何前端框架。只需通过内置库管理器安装即可。
• 如果您愿意，请勿使用任何前端框架。保持轻便而简单。使用“空白”模板和uib-element节点尝试一下。
• 随附的前端库（ uibuilder.iife.js ， uibuilder.esm.js ）提供了与节点-RED和MSG事件处理的连接性以及一些辅助功能。
• 编写自己的HTML，CSS和JavaScript，以定义满足您需求的完美前端用户界面。或使用JSON配置描述定义它。
• 从节点红色编辑器中编辑自定义前端代码。自动加载客户对代码的更改。非常适合快速发展。请注意，这是为快速编辑而设计的，建议使用普通的Web开发工具链进行大型编辑。
• 在您的前端代码中几乎没有样板才能工作。
• 可选索引网页列表可用文件。
• 包括两个详细的管理信息网页，以帮助作者了解一切在哪里和可用的地方。
• 默认情况下，使用Node-Red自己的ExpressJS Webervers。如果需要，请切换到自定义ExpressJS服务器。使用自定义服务器时，页面还可以包括EJB服务器端模板。
• 具有expressjs（用于Web服务）和socket.io的中间件（用于通信，在初始连接和每报处），以便您可以添加自己的自定义功能，包括安全性。
• 可以为每个Uibuilder实例创建自定义API。
• 在您自己的项目中使用ui.js库！

贡献

如果您想为此节点做出贡献，则可以通过github联系完全信息，也可以在GitHub问题日志中提出请求。

欢迎使用代码和文档的拉请请求，Wiki向新的条目和更正开放（但是，如果您进行更改，请告诉我）。

有关更多信息，请参考贡献指南。

您还可以通过赞助开发来支持Uibuilder的开发。

GitHub赞助，贝宝赞助

赞助商

• @magicjf

开发人员/贡献者

• 朱利安·奈特（Julian Knight） - 设计师和主要作家。
• Colin Law-非常感谢您的测试，更正和拉拉请求。
• 史蒂夫·里克斯（Steve Rickus） - 非常感谢您的测试，更正，贡献代码和设计思想。
• Ellie Lee-非常感谢PR修复重复的味精。
• 托马斯·瓦格纳（Thomas Wagner） - 感谢您使用项目文件夹的转向和PR。
• Arlena derksen-感谢您的建议，错误检查和问题＃59/PR＃60。
• Cflurin-感谢您的缓存示例。
• Scott Page -Indysoft-感谢第73条/PR＃74。
• Stephen McLaughlin -Steve -MCL-感谢第71期的修复程序以及Enhancement Ideas问题＃102。
• Sergio Rius-感谢您的报告＃121并提供PR＃122作为修复。
• Thorsten von Eicken-感谢您提供PR＃131，以改善Socket.io的CORS处理。
• Meeki007-感谢您提供各种文档改进和代码修复。
• Scott -Talltechdude-感谢您提供PR＃170。
• Calum Knott-感谢您整理的节点蓝色徽标。
• Harold Peters Inskipp-感谢您的伐木示例。
• DCZYS-感谢您的报告第186期，并帮助解决复杂的异步错误。
• Colin J（MudwalkerCj） - 感谢您的文档提供帮助。
• 马库斯·戴维斯（Marcus Davies） - 非常感谢您的鼓励和3D徽标。
• Fabio Marzocca（Fmarzocca）） - 非常感谢Uibrouter前端路由器库的设计和测试的帮助。

多亏了每个人，许多其他人都提出了想法和建议。

请还请查看我的博客，有关它的广泛性，它具有有关各种主题的信息，主要是与Node-red有关的信息。