# Scrie o componentă Flow: un fișier HTML

> O componentă Flow este un singur fișier HTML cu o parte Node.js, un formular de setări și un design. Construiește una care schimbă textul unui mesaj, învață părțile fișierului și cum să o testezi.

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

O componentă este **un fișier `.html`**. Flow citește fișierul, rulează partea lui Node.js în interiorul fluxului și afișează designul în editor. Toate componentele oficiale din [depozit](/en/flow/the-components-repository/) folosesc acest format, așa că poți citi oricare dintre ele ca exemplu.

## Un exemplu: `shout.html`

Primește un mesaj, convertește textul în majuscule, adaugă un sufix și îl trimite mai departe.

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

## Părțile fișierului

| Partea | La ce folosește |
|---|---|
| `<script total>` | codul Node.js al componentei, executat în procesul fluxului |
| `<settings>` | formularul de configurare, cu componentele interfeței cu utilizatorul (`ui-component`, căile care încep cu `?.` indică `config` al componentei) |
| `<readme>` | ajutorul afișat în editor |
| `<body>` | caseta din diagramă: un `<header>` cu substituenții `ICON` și `NAME` și, opțional, un `<footer>` sau un corp, unde `<ui-bind path="STATUS.x">` afișează starea și `CONFIG.x` configurația |
| `<style>` | CSS-ul casetei; `.CLASS` este înlocuit cu o clasă unică pentru componentă |
| `<script>` (al doilea) | JavaScript opțional al editorului, pentru butoanele din casetă (poate trimite `{ TYPE: 'trigger', id: ... }` fluxului) |

## Exporturile (`exports`) părții Node.js

| Export | Semnificația |
|---|---|
| `id`, `name`, `group`, `version`, `icon`, `author` | identitatea componentei și locul în care apare în listă |
| `config` | configurația implicită; formularul din `<settings>` o editează |
| `inputs`, `outputs` | lista conectorilor `{ id, name }`. O componentă fără `inputs` este o sursă |
| `kind` | opțional: rolul componentei în catalog (`trigger`, `action` sau `output`) |
| `make(instance, config)` | apelat o dată pentru fiecare casetă pe care o plasezi în diagramă |

## `instance`

În interiorul lui `make` definești comportamentul atribuind funcții instanței:

| Funcția | Apelată când |
|---|---|
| `instance.message = function($) {}` | sosește un mesaj. `$.data` sunt datele, `$.send('output')` îl trimite conectorilor acelei ieșiri, `$.destroy()` îl încheie fără a-l trimite |
| `instance.configure = function() {}` | se schimbă configurația, și o dată la început |
| `instance.trigger = function() {}` | butonul editorului sau codul o cere |
| `instance.pause = function(is) {}` | fluxul este pus pe pauză sau reluat |
| `instance.close = function() {}` | caseta este eliminată sau fluxul se oprește: curăță aici temporizatoarele |

Și apelezi `instance.send('output', data)` pentru a crea un mesaj propriu (cum face `timer`), `instance.status(object)` pentru a afișa o stare în casetă (`delay.html` transmite un timp în milisecunde ca al doilea argument pentru a o reîmprospăta) și `instance.throw(error)` pentru a raporta o eroare.

## Încearcă

1. Pune `shout.html` într-un catalog și scrie adresa lui în setarea `components2` (vezi [depozit](/en/flow/the-components-repository/)), sau importă un flux care îl conține în `components`.
2. Adaugă lângă el în editor un `timer` și un `print`, conectează-le și pornește fluxul.
3. Deschide starea casetei: contorul crește cu fiecare mesaj.

Pentru a testa o componentă fără editor, depozitul are un mic tester, vezi [depozitul de componente](/en/flow/the-components-repository/).