# Napísať komponent Flow: jeden súbor HTML

> Komponent Flow je jediný súbor HTML s časťou Node.js, formulárom nastavení a dizajnom. Vytvorte komponent, ktorý mení text správy, spoznajte časti súboru a naučte sa ho testovať.

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

Komponent je **jeden súbor `.html`**. Flow súbor prečíta, spustí jeho časť Node.js vnútri toku a zobrazí jeho dizajn v editore. Všetky oficiálne komponenty z [repozitára](/en/flow/the-components-repository/) používajú tento formát, takže ktorýkoľvek z nich môžete čítať ako príklad.

## Príklad: `shout.html`

Prijme správu, premení text na veľké písmená, pridá príponu a pošle ju ďalej.

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

## Časti súboru

| Časť | Na čo slúži |
|---|---|
| `<script total>` | kód Node.js komponentu, vykonávaný v procese toku |
| `<settings>` | formulár konfigurácie s komponentmi používateľského rozhrania (`ui-component`, cesty začínajúce `?.` ukazujú na `config` komponentu) |
| `<readme>` | pomocník zobrazený v editore |
| `<body>` | box v diagrame: `<header>` so zástupnými symbolmi `ICON` a `NAME` a voliteľne `<footer>` alebo telo, kde `<ui-bind path="STATUS.x">` zobrazuje stav a `CONFIG.x` konfiguráciu |
| `<style>` | CSS boxu; `.CLASS` sa nahradí triedou jedinečnou pre komponent |
| `<script>` (druhý) | voliteľný JavaScript editora pre tlačidlá v boxe (môže poslať `{ TYPE: 'trigger', id: ... }` toku) |

## `exports` časti Node.js

| Export | Význam |
|---|---|
| `id`, `name`, `group`, `version`, `icon`, `author` | identita komponentu a miesto v zozname |
| `config` | predvolená konfigurácia; upravuje ju formulár `<settings>` |
| `inputs`, `outputs` | zoznam konektorov `{ id, name }`. Komponent bez `inputs` je zdroj |
| `kind` | voliteľné: úloha komponentu v katalógu (`trigger`, `action` alebo `output`) |
| `make(instance, config)` | volá sa raz pre každý box, ktorý umiestnite do diagramu |

## `instance`

Vnútri `make` definujete správanie priradením funkcií k inštancii:

| Funkcia | Volá sa, keď |
|---|---|
| `instance.message = function($) {}` | príde správa. `$.data` sú dáta, `$.send('output')` ju preposiela konektorom daného výstupu, `$.destroy()` ju ukončí bez odoslania |
| `instance.configure = function() {}` | zmení sa konfigurácia, a raz na začiatku |
| `instance.trigger = function() {}` | o to požiada tlačidlo editora alebo kód |
| `instance.pause = function(is) {}` | tok sa pozastaví alebo obnoví |
| `instance.close = function() {}` | box sa odstráni alebo tok zastaví: tu vyčistite časovače |

A volajte `instance.send('output', data)` na vytvorenie vlastnej správy (ako to robí `timer`), `instance.status(object)` na zobrazenie stavu v boxe (`delay.html` odovzdáva čas v milisekundách ako druhý argument na obnovenie) a `instance.throw(error)` na nahlásenie chyby.

## Vyskúšajte

1. Dajte `shout.html` do katalógu a jeho adresu zapíšte do nastavenia `components2` (pozri [repozitár](/en/flow/the-components-repository/)) alebo importujte tok, ktorý ho obsahuje vo svojich `components`.
2. Pridajte vedľa neho v editore `timer` a `print`, prepojte ich a spustite tok.
3. Otvorte stav boxu: počítadlo rastie s každou správou.

Na testovanie komponentu bez editora má repozitár malý tester, pozri [repozitár komponentov](/en/flow/the-components-repository/).