# Napište komponentu Flow: jeden soubor HTML

> Komponenta Flow je jediný soubor HTML s částí Node.js, formulářem nastavení a návrhem. Vytvořte komponentu, která mění text zprávy, poznejte části souboru a způsob testování.

Framework: flow
Product: Flow (flow@11.1)
Language: cs
Content-SHA256: 9d49f991220afd7aa772d5f17d411de1287040a83667e73e09b96e4811b71dd1
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Komponenta je **jeden soubor `.html`**. Flow soubor přečte, spustí jeho část Node.js uvnitř toku a zobrazí jeho návrh v editoru. Všechny oficiální komponenty z [repozitáře](/en/flow/the-components-repository/) používají tento formát, takže kteroukoli z nich můžete číst jako příklad.

## Příklad: `shout.html`

Přijme zprávu, převede text na velká písmena, přidá příponu a pošle ji dál.

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

## Části souboru

| Část | K čemu slouží |
|---|---|
| `<script total>` | kód Node.js komponenty, vykonávaný v procesu toku |
| `<settings>` | formulář konfigurace s komponentami uživatelského rozhraní (`ui-component`, cesty začínající `?.` ukazují na `config` komponenty) |
| `<readme>` | nápověda zobrazená v editoru |
| `<body>` | box v diagramu: `<header>` se zástupnými symboly `ICON` a `NAME` a volitelně `<footer>` nebo tělo, kde `<ui-bind path="STATUS.x">` zobrazuje stav a `CONFIG.x` konfiguraci |
| `<style>` | CSS boxu; `.CLASS` se nahradí třídou jedinečnou pro komponentu |
| `<script>` (druhý) | volitelný JavaScript editoru pro tlačítka v boxu (může poslat `{ TYPE: 'trigger', id: ... }` toku) |

## `exports` části Node.js

| Export | Význam |
|---|---|
| `id`, `name`, `group`, `version`, `icon`, `author` | identita komponenty a místo v seznamu |
| `config` | výchozí konfigurace; upravuje ji formulář `<settings>` |
| `inputs`, `outputs` | seznam konektorů `{ id, name }`. Komponenta bez `inputs` je zdroj |
| `kind` | volitelné: role komponenty v katalogu (`trigger`, `action` nebo `output`) |
| `make(instance, config)` | volá se jednou pro každý box, který umístíte do diagramu |

## `instance`

Uvnitř `make` definujete chování přiřazením funkcí k instanci:

| Funkce | Volá se, když |
|---|---|
| `instance.message = function($) {}` | přijde zpráva. `$.data` jsou data, `$.send('output')` ji přepošle konektorům daného výstupu, `$.destroy()` ji ukončí bez odeslání |
| `instance.configure = function() {}` | změní se konfigurace, a jednou na začátku |
| `instance.trigger = function() {}` | o to požádá tlačítko editoru nebo kód |
| `instance.pause = function(is) {}` | tok se pozastaví nebo obnoví |
| `instance.close = function() {}` | box se odstraní nebo tok zastaví: zde vyčistěte časovače |

A voláte `instance.send('output', data)` k vytvoření vlastní zprávy (jak to dělá `timer`), `instance.status(object)` k zobrazení stavu v boxu (`delay.html` předává čas v milisekundách jako druhý argument pro obnovení) a `instance.throw(error)` k nahlášení chyby.

## Vyzkoušejte

1. Dejte `shout.html` do katalogu a jeho adresu zapište do nastavení `components2` (viz [repozitář](/en/flow/the-components-repository/)) nebo importujte tok, který ji obsahuje ve svých `components`.
2. Přidejte vedle ní v editoru `timer` a `print`, propojte je a spusťte tok.
3. Otevřete stav boxu: počítadlo roste s každou zprávou.

K testování komponenty bez editoru má repozitář malý tester, viz [repozitář komponent](/en/flow/the-components-repository/).