Archivo HTML de notas de estudio de Node-RED

El archivo .html del nodo Node define el formato de visualización del nodo y el editor. Contiene tres partes diferentes, cada una de las cuales está empaquetada con su propia marca .html <script>.

1. Definición de nodo: la definición de nodo principal registrada con el editor, definiendo la categoría de paleta, atributos editables e iconos a utilizar, etc. Está en una etiqueta de script javascript normaldefaults

2. Cuadro de diálogo de edición  data-template-name: una plantilla de edición que define el contenido del cuadro de diálogo de edición de nodo.type="text/html" data-template-name="node-type"

3. Texto de ayuda data-help-name: texto de ayuda que se  muestra en la pestaña "Barra lateral de información".type="text/html" data-help-name="node-type"

Definir nodo

Utilice la  RED.nodes.registerTypefunción para registrar el nodo con el editor. Esta función toma dos parámetros: el tipo de nodo y su definición

<script type="text/javascript">
    RED.nodes.registerType('node-type',{
        // node definition
    });
</script>

Tipo de nodo

El tipo de nodo se utiliza en todo el editor para identificar los nodos. Debe ser coherente con el nombre del archivo js. Tal como,node-type.js

Definición de nodo

La definición de nodo contiene toda la información sobre el nodo requerida por el editor. Es un objeto con las siguientes propiedades:

• category： （字符串） Node-red界面操作面板中节点类别
• defaults：（对象）节点的可编辑属性
• credentials：（对象）节点的凭据属性
• inputs：（数字）节点的输入数
• outputs：（数字）节点的输出数
• color： （字符串）要使用的背景颜色
• paletteLabel：（字符串+函数）要在调色板中使用的标签
• label：（字符串+函数）要在工作区中使用的标签
• labelStyle：（字符串+函数）要应用于标签的样式
• inputLabels：（字符串+函数）可选标签，用于将悬停添加到节点的输入端口
• outputLabels：（字符串+函数）可选标签，用于将鼠标悬停到节点的输出端口
• icon：（字符串）要使用的图标
• align：（字符串）图标和标签的对齐方式
• button：（对象）向节点边缘添加一个按钮
• oneditprepare：（函数）在构建编辑对话框时调用
• oneditsave： （函数） 在编辑对话框正常时调用
• oneditcancel：（函数）在编辑对话框取消时调用
• oneditdelete：（函数）在按下配置节点的编辑对话框中的删除按钮时调用
• oneditresize：（函数）在编辑对话框调整大小时调用
• onpaletteadd：（函数）在节点类型添加到调色板时调用
• onpaletteremove：（函数）从调色板中删除节点类型时调用

Editar diálogo

La plantilla de edición del nodo describe el contenido de su cuadro de diálogo de edición.

<script type="text/html" data-template-name="node-type">
    <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>
    <div class="form-tips"><b>Tip:</b> This is here to help.</div>
</script>

Texto de ayuda

Cuando selecciona un nodo, su texto de ayuda se mostrará en la pestaña de información, proporcionando una descripción de la operación del nodo. Incluidos los atributos establecidos en el mensaje saliente y los atributos que se pueden configurar en el mensaje entrante.

<script type="text/html" data-help-name="node-type">
   <p>Some useful help text to introduce the node.</p>
   <h3>Outputs</h3>
       <dl class="message-properties">
       <dt>payload
           <span class="property-type">string | buffer</span>
       </dt>
   <h3>Details</h3>
   <p>Some more information about the node.</p>
</script>