前言

最近有读者通过博客向我咨询,在自定义node-red节点时,如何编写该节点的配置页面,就是我们通常见到的,双节节点打开的信息弹窗。如下图:

自定义node-red节点中,如何编写节点配置信息弹窗插图1

自定义node-red节点中,如何编写节点配置信息弹窗插图3

上面两张图,展示了inject节点与mqtt in 节点的配置弹窗。
在弹窗中,除了上面的删除,取消,完成,和下面的失效按钮。
中间部分都是需要开发者自己编写的。
你需要什么按钮,需要哪些输入框,还有文本域。

节点配置弹窗是用户配置,修改节点配置数据的主要方式。

下面就教大家如何编写这部分的页面
配置弹窗是编写在 节点的html 文件里 并且写在

<script type="text/html" data-template-name="node-type">
    <!-- edit dialog content  -->
</script>

注意script标签的 type属性 必须配置为 text/html,这能够帮助编辑器高亮识别js语法。
标签还应该包含data-template-name 属性,表面该脚本是应用于那个节点类型。
你可以在这里编写html,
如下:

<div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Name">
</div>

以上是一个用于输入名字的输入框。有些class是可以直接使用官方的,比如form-row ,该class会帮你创建一个块级元素,将信息展示一行一行地展示。

除了开发者自己编写css 和 html,node-red官方也提供了一些标准的组件供大家使用。
使用他们编写节点配置弹窗,会更美观,简约,也会很符合node-red的整体风格。
下面一起来看一下。

按钮

由于按钮经常被用到,所有官方提供了一套标准的按钮组件。
你可以这样使用

<button type="button" class="red-ui-button">Button</button>
<button type="button" class="red-ui-button red-ui-button-small">Button</button>
<span class="button-group">
<button type="button" class="red-ui-button toggle selected my-button-group">b1</button><button type="button" class="red-ui-button toggle my-button-group">b2</button><button type="button" class="red-ui-button toggle my-button-group">b3</button>
</span>

以上代码的显示按钮

自定义node-red节点中,如何编写节点配置信息弹窗插图5

输入框

如果你要使用输入框的话,可以看看官方提供的案例

Plain HTML Input
<input type="text" id="node-input-name">

TypedInput
String/Number/Boolean
<input type="text" id="node-input-example1">
<input type="hidden" id="node-input-example1-type">

TypedInput
JSON
<input type="text" id="node-input-example2">

TypedInput
msg/flow/global
<input type="text" id="node-input-example3">
<input type="hidden" id="node-input-example3-type">

自定义node-red节点中,如何编写节点配置信息弹窗插图7
自定义node-red节点中,如何编写节点配置信息弹窗插图9

如果你要使用选择框

<input type="text" id="node-input-example5">
$("#node-input-example5").typedInput({
    types: [
        {
            value: "fruit",
            multiple: "true",
            options: [
                { value: "apple", label: "Apple"},
                { value: "banana", label: "Banana"},
                { value: "cherry", label: "Cherry"},
            ]
        }
    ]
})

它就会表现成这样子。

多行文本域

在node-red中多行文本域其实都是 使用的代码编辑器,使用monaco或者ace
你可以这样使用

<div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-example-editor"></div>
// 使用RED.editor.createEditor 方法创建编辑器,
this.editor = RED.editor.createEditor({
   id: 'node-input-example-editor',
   mode: 'ace/mode/text',
   value: this.exampleText
});

// 在保存或取消时,销毁无用的对象,释放资源
oneditsave: function() {
    this.exampleText = this.editor.getValue();
    this.editor.destroy();
    delete this.editor;
},
oneditcancel: function() {
    this.editor.destroy();
    delete this.editor;
},

编辑器效果

自定义node-red节点中,如何编写节点配置信息弹窗插图11

总结

node-red提供的自定义节点功能,让我们可以自由地制作各种各样的节点来满足自己的需要。
之前有个读者说他们要在node-red中做直播会议系统,非常佩服这些人的创造力。
要想更快,更好地开发出好用的节点,需要把基本功打好,万丈大楼先把地基打好。你学会啦吗?

Markdown 2920 字数 130 行数 当前行 129, 当前列 36 文章已保存18:18:05

相关新闻

评论列表(1条)

  • 遇见的头像
    遇见 2023年9月14日 下午4:01

    请问怎么赋值数据到form里面呢

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

邮箱

cloud@modbus.cn

QQ
QQ
微信
微信
分享本页
返回顶部