# Napisz komponent Flow: jeden plik HTML

> Komponent Flow to pojedynczy plik HTML z częścią Node.js, formularzem ustawień i wyglądem. Zbuduj taki, który zmienia tekst wiadomości, poznaj części pliku i sposób testowania.

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

Komponent to **jeden plik `.html`**. Flow odczytuje plik, uruchamia jego część Node.js wewnątrz przepływu i pokazuje jego wygląd w edytorze. Wszystkie oficjalne komponenty z [repozytorium](/en/flow/the-components-repository/) używają tego formatu, więc możesz czytać dowolny z nich jako przykład.

## Przykład: `shout.html`

Odbiera wiadomość, zamienia tekst na wielkie litery, dodaje przyrostek i wysyła dalej.

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

## Części pliku

| Część | Do czego służy |
|---|---|
| `<script total>` | kod Node.js komponentu, wykonywany w procesie przepływu |
| `<settings>` | formularz konfiguracji z komponentami interfejsu użytkownika (`ui-component`, ścieżki zaczynające się od `?.` wskazują na `config` komponentu) |
| `<readme>` | pomoc wyświetlana w edytorze |
| `<body>` | pole w diagramie: `<header>` z symbolami zastępczymi `ICON` i `NAME` oraz opcjonalnie `<footer>` lub treść, gdzie `<ui-bind path="STATUS.x">` pokazuje status, a `CONFIG.x` konfigurację |
| `<style>` | CSS pola; `.CLASS` jest zastępowane klasą unikalną dla komponentu |
| `<script>` (drugi) | opcjonalny JavaScript edytora, dla przycisków w polu (może wysłać `{ TYPE: 'trigger', id: ... }` do przepływu) |

## `exports` części Node.js

| Export | Znaczenie |
|---|---|
| `id`, `name`, `group`, `version`, `icon`, `author` | tożsamość komponentu i miejsce na liście |
| `config` | domyślna konfiguracja; edytuje ją formularz `<settings>` |
| `inputs`, `outputs` | lista złączy `{ id, name }`. Komponent bez `inputs` jest źródłem |
| `kind` | opcjonalne: rola komponentu w katalogu (`trigger`, `action` lub `output`) |
| `make(instance, config)` | wywoływane raz dla każdego pola, które umieścisz w diagramie |

## `instance`

Wewnątrz `make` definiujesz zachowanie, przypisując funkcje do instancji:

| Funkcja | Wywoływana, gdy |
|---|---|
| `instance.message = function($) {}` | nadejdzie wiadomość. `$.data` to dane, `$.send('output')` przekazuje ją do złączy tego wyjścia, `$.destroy()` kończy ją bez wysyłania |
| `instance.configure = function() {}` | zmieni się konfiguracja, oraz raz na początku |
| `instance.trigger = function() {}` | zażąda tego przycisk edytora lub kod |
| `instance.pause = function(is) {}` | przepływ zostanie wstrzymany lub wznowiony |
| `instance.close = function() {}` | pole zostanie usunięte lub przepływ się zatrzyma: tu wyczyść swoje timery |

Wywołujesz `instance.send('output', data)`, aby utworzyć własną wiadomość (jak robi to `timer`), `instance.status(object)`, aby pokazać status w polu (`delay.html` przekazuje czas w milisekundach jako drugi argument do odświeżania) oraz `instance.throw(error)`, aby zgłosić błąd.

## Wypróbuj

1. Umieść `shout.html` w katalogu i wpisz jego adres w ustawieniu `components2` (zobacz [repozytorium](/en/flow/the-components-repository/)) albo zaimportuj przepływ, który go zawiera w swoich `components`.
2. Dodaj obok w edytorze `timer` i `print`, połącz je i uruchom przepływ.
3. Otwórz status pola: licznik rośnie z każdą wiadomością.

Aby przetestować komponent bez edytora, repozytorium ma mały tester, zobacz [repozytorium komponentów](/en/flow/the-components-repository/).