# Eine Flow-Komponente schreiben: eine HTML-Datei

> Eine Flow-Komponente ist eine einzelne HTML-Datei mit einem Node.js-Teil, einem Einstellungsformular und einem Design. Bauen Sie eine, die den Text einer Nachricht ändert, lernen Sie die Teile der Datei kennen und wie man sie testet.

Framework: flow
Product: Flow (flow@11.1)
Language: de
Content-SHA256: d72d4cea91926760b1bbce5298cd0a5415a24e21df8800229e218dd3b094e4c7
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

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](/en/flow/the-components-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.

```html
<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](/en/flow/the-components-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](/en/flow/the-components-repository/).