Eine Flow-Komponente schreiben: eine HTML-Datei

Eine Komponente ist eine .html-Datei. Flow liest die Datei, führt ihren Node.js-Teil im Stream aus und zeigt ihr Design im Editor. Die offiziellen Komponenten aus dem Repository verwenden alle dieses Format, Sie können also jede davon als Beispiel lesen.

Ein Beispiel: shout.html

Sie empfängt eine Nachricht, wandelt den Text in Großbuchstaben um, hängt ein Suffix an und gibt sie weiter.

<script total>

	exports.id = 'shout';
	exports.name = 'Shout';
	exports.group = 'Common';
	exports.version = '1';
	exports.icon = 'ti ti-speakerphone';
	exports.author = 'Forge';
	exports.config = { suffix: '!' };
	exports.inputs = [{ id: 'input', name: 'Input' }];
	exports.outputs = [{ id: 'output', name: 'Output' }];

	exports.make = function(instance, config) {

		let count = 0;

		instance.message = function($) {
			count++;
			instance.status({ shouted: count });
			$.data = String($.data).toUpperCase() + config.suffix;
			$.send('output');
		};

	};

</script>

<settings>
	<div class="padding">
		<ui-component name="input" path="?.suffix" config="maxlength:10">Suffix</ui-component>
	</div>
</settings>

<readme>
The component converts the text of a message to upper case and adds a suffix.
</readme>

<body>
	<header>
		<i class="ICON"></i>NAME
	</header>
	<footer>
		<div class="padding">Shouted: <b><ui-bind path="STATUS.shouted" config="text:value||0"></ui-bind></b></div>
	</footer>
</body>

Die Teile der Datei

Teil	Wozu er dient
<script total>	der Node.js-Code der Komponente, ausgeführt im Prozess des Streams
<settings>	das Konfigurationsformular mit den Komponenten der Benutzeroberfläche (ui-component, Pfade, die mit ?. beginnen, zeigen auf das config der Komponente)
<readme>	die im Editor angezeigte Hilfe
<body>	die Box im Diagramm: ein <header> mit den Platzhaltern ICON und NAME und optional ein <footer> oder ein Body, in dem <ui-bind path="STATUS.x"> den Status und CONFIG.x die Konfiguration anzeigt
<style>	das CSS der Box; .CLASS wird durch eine für die Komponente eindeutige Klasse ersetzt
<script> (zweites)	optionales JavaScript des Editors für Schaltflächen in der Box (es kann { TYPE: 'trigger', id: ... } an den Stream senden)

Die exports des Node.js-Teils

Export	Bedeutung
id, name, group, version, icon, author	die Identität der Komponente und wo sie in der Liste erscheint
config	die Standardkonfiguration; das Formular von <settings> bearbeitet sie
inputs, outputs	die Liste der Konnektoren { id, name }. Eine Komponente ohne inputs ist eine Quelle
kind	optional: die Rolle der Komponente im Katalog (trigger, action oder output)
make(instance, config)	wird einmal pro Box aufgerufen, die Sie im Diagramm platzieren

Die instance

Innerhalb von make definieren Sie das Verhalten, indem Sie der Instanz Funktionen zuweisen:

Funktion	Wird aufgerufen, wenn
instance.message = function($) {}	eine Nachricht eintrifft. $.data sind die Daten, $.send('output') leitet sie an die Konnektoren dieses Ausgangs weiter, $.destroy() beendet sie ohne Senden
instance.configure = function() {}	sich die Konfiguration ändert, und einmal zu Beginn
instance.trigger = function() {}	die Schaltfläche des Editors oder der Code es verlangt
instance.pause = function(is) {}	der Stream pausiert oder fortgesetzt wird
instance.close = function() {}	die Box entfernt wird oder der Stream stoppt: Räumen Sie hier Ihre Timer auf

Und Sie rufen instance.send('output', data) auf, um eine eigene Nachricht zu erzeugen (wie timer), instance.status(object), um einen Status in der Box zu zeigen (delay.html übergibt eine Zeit in Millisekunden als zweites Argument zum Aktualisieren) und instance.throw(error), um einen Fehler zu melden.

Ausprobieren

1. Legen Sie shout.html in einen Katalog und tragen Sie dessen Adresse in die Einstellung components2 ein (siehe das Repository) oder importieren Sie einen Stream, der sie in seinen components enthält.
2. Fügen Sie im Editor daneben ein timer und ein print hinzu, verbinden Sie sie und starten Sie den Stream.
3. Öffnen Sie den Status der Box: Der Zähler wächst mit jeder Nachricht.

Um eine Komponente ohne den Editor zu testen, hat das Repository einen kleinen Tester, siehe das Komponenten-Repository.