In Node-Red, wie man die Konfiguration des Knoten-Informations - Pop-up - Fensters schreibt

Präambel

Vor kurzem hat mich ein Leser über den Blog gefragt, wie man die Konfigurationsseite für den Knoten beim Anpassen des Node-red - Knoten schreibt, das ist das Informations-Popupfenster, das wir normalerweise sehen, das von einem Dual-Node - Knoten geöffnet wird. Die folgenden Abbildung:

Die beiden oben aufgeführten Abbildungen zeigen die Konfigurations-Popup - Fenster für den inject - und mqtt-in - Knoten.
Im Pop-up - Fenster, neben den oben löschen, abbrechen, abschließen, und unten die Schaltflächen.
Die mittleren Teile müssen vom Entwickler selbst erstellt werden.
Welche Schaltflächen, welche Eingabefelder und Textfelder Sie benötigen?

Das Popup-Fenster der Knotenkonfiguration ist die Hauptmethode für die Benutzerkonfiguration und die Änderung der Knotenkonfigurationsdaten.

Hier wird Ihnen gezeigt, wie Sie diese Seite erstellen.
Konfiguration Pop-ups werden in der HTML-Datei des Knoten geschrieben und in

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

Beachten Sie, dass die type-Eigenschaft des script-Tags auf text / html konfiguriert sein muss, damit der Editor die JS-Syntax hervorheben kann.
Das Label sollte auch die Attribute data-template - name enthalten, so dass das Skript auf diesen Knoten-Typ angewendet wird.
Sie können hier HTML schreiben.
wie folgt:

<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>

Hier ist ein Eingabefeld für die Eingabe eines Namens. Einige Klassen können direkt verwendet werden, wie z. B. form-row, die Ihnen hilft, ein Element auf Blockebene zu erstellen, das Informationen Zeile für Zeile darstellt.

Zusätzlich zu den Entwicklern, die CSS und HTML selbst schreiben, bietet node-red offiziell auch einige Standardkomponenten für alle.
Sie verwenden, um Knoten zu konfigurieren, wäre es schöner, minimalistisch und passt gut zum allgemeinen Stil von node-red.
Schauen wir uns unten an.

Tasten

Da die Tasten häufig verwendet werden, bieten alle offiziellen eine Reihe von Standard-Knöpfe Komponenten.
Sie können es so verwenden.

<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>

Der oben angegebene Schaltflächencode

Eingabe-Box

Wenn Sie das Eingabe-Box verwenden möchten, können Sie sich die offiziellen Fälle ansehen

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">

Wenn Sie das Auswahl-Box verwenden möchten

<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"},
            ]
        }
    ]
})

Es wird sich so manifestieren.

Mehrfach Textfeld

Mehrzeilen-Text - Feld in node-red sind eigentlich ein Code-Editor, verwenden Sie monaco oder ace
Sie können so

<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;
},

Editor-Effekt

Zusammenfassung der benutzerdefinierten Knoten-Funktionen, die

Die benutzerdefinierte Knotenfunktion von node-red gibt uns die Freiheit, eine Vielzahl von Knoten zu erstellen, die unseren Bedürfnissen entsprechen.
Ein Leser sagte zuvor, dass sie ein Live-Konferenzsystem in Node-Red machen würden und bewunderte die Kreativität dieser Leute sehr.
Um schneller und besser nutzbare Knoten zu entwickeln, müssen Sie die grundlegenden Fähigkeiten gut spielen, um das Gebäude zuerst das Fundament zu legen. Haben Sie gelernt?

Markdown2920 Wörter 130 Zeilen Aktuelle Zeile 129, Aktuelle Spalte 36 Artikel gespeichert 18: 18: 05