# Flow komponens írása: egyetlen HTML fájl

> A Flow komponens egyetlen HTML fájl Node.js résszel, beállítási űrlappal és kinézettel. Építs egyet, amely megváltoztatja egy üzenet szövegét, ismerd meg a fájl részeit és azt, hogyan tesztelheted.

Framework: flow
Product: Flow (flow@11.1)
Language: hu
Content-SHA256: 21f5c264ac49ca5e127d93db1c2f343469e1f0d65f8babaa8b12b13b7d0c60b1
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

A komponens **egyetlen `.html` fájl**. A Flow beolvassa a fájlt, a Node.js részét a folyamban futtatja, a kinézetét pedig a szerkesztőben jeleníti meg. A [tároló](/en/flow/the-components-repository/) összes hivatalos komponense ezt a formátumot használja, így bármelyiket olvashatod példaként.

## Egy példa: `shout.html`

Üzenetet fogad, a szöveget nagybetűssé alakítja, utótagot fűz hozzá, és továbbküldi.

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

## A fájl részei

| Rész | Mire való |
|---|---|
| `<script total>` | a komponens Node.js kódja, a folyam folyamatában futtatva |
| `<settings>` | a konfigurációs űrlap a felhasználói felület komponenseivel (`ui-component`, a `?.` kezdetű útvonalak a komponens `config` részére mutatnak) |
| `<readme>` | a szerkesztőben megjelenő súgó |
| `<body>` | a doboz a diagramon: egy `<header>` az `ICON` és `NAME` helyőrzőkkel, opcionálisan egy `<footer>` vagy törzs, ahol a `<ui-bind path="STATUS.x">` az állapotot, a `CONFIG.x` a konfigurációt mutatja |
| `<style>` | a doboz CSS-e; a `.CLASS` helyére a komponensre egyedi osztály kerül |
| `<script>` (második) | a szerkesztő opcionális JavaScriptje a dobozban lévő gombokhoz (küldhet `{ TYPE: 'trigger', id: ... }` üzenetet a folyamnak) |

## A Node.js rész `exports` elemei

| Export | Jelentés |
|---|---|
| `id`, `name`, `group`, `version`, `icon`, `author` | a komponens azonosítója és helye a listában |
| `config` | az alapértelmezett konfiguráció; a `<settings>` űrlapja szerkeszti |
| `inputs`, `outputs` | az `{ id, name }` csatlakozók listája. A `inputs` nélküli komponens forrás |
| `kind` | opcionális: a komponens szerepe a katalógusban (`trigger`, `action` vagy `output`) |
| `make(instance, config)` | minden, a diagramra helyezett dobozra egyszer hívódik meg |

## Az `instance`

A `make` belsejében a viselkedést úgy határozod meg, hogy függvényeket rendelsz a példányhoz:

| Függvény | Akkor hívódik, amikor |
|---|---|
| `instance.message = function($) {}` | üzenet érkezik. A `$.data` az adat, a `$.send('output')` továbbítja az adott kimenet csatlakozóinak, a `$.destroy()` küldés nélkül lezárja |
| `instance.configure = function() {}` | a konfiguráció változik, és egyszer az induláskor |
| `instance.trigger = function() {}` | a szerkesztő gombja vagy a kód kéri |
| `instance.pause = function(is) {}` | a folyamot szüneteltetik vagy folytatják |
| `instance.close = function() {}` | a dobozt eltávolítják vagy a folyam leáll: itt takaríts el az időzítőket |

Te pedig az `instance.send('output', data)` hívással saját üzenetet hozol létre (ahogy a `timer` teszi), az `instance.status(object)` hívással állapotot jelenítesz meg a dobozban (a `delay.html` ezredmásodpercben megadott időt ad át második argumentumként a frissítéséhez), az `instance.throw(error)` hívással pedig hibát jelentesz.

## Próbáld ki

1. Tedd a `shout.html` fájlt egy katalógusba, és írd a címét a `components2` beállításba (lásd [tároló](/en/flow/the-components-repository/)), vagy importálj egy folyamot, amely a `components` között tartalmazza.
2. Adj hozzá mellé a szerkesztőben egy `timer` és egy `print` komponenst, kösd össze őket és indítsd el a folyamot.
3. Nyisd meg a doboz állapotát: a számláló minden üzenettel nő.

Komponens szerkesztő nélküli teszteléséhez a tárolónak van egy kis tesztere, lásd [komponenstároló](/en/flow/the-components-repository/).