# Напишете компонент на Flow: един HTML файл

> Компонентът на Flow е един HTML файл с част на Node.js, форма за настройки и дизайн. Изградете такъв, който променя текста на съобщение, научете частите на файла и как да го тествате.

Framework: flow
Product: Flow (flow@11.1)
Language: bg
Content-SHA256: 8c8a1a8b94ba53afdfb41fe7e5d2d538436c911c546ae752cfd62eaff4b1a65c
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Компонентът е **един `.html` файл**. Flow чете файла, изпълнява частта му на Node.js вътре в потока и показва дизайна му в редактора. Всички официални компоненти от [хранилището](/en/flow/the-components-repository/) използват този формат, така че можете да четете който и да е от тях като пример.

## Пример: `shout.html`

Получава съобщение, преобразува текста в главни букви, добавя наставка и го изпраща нататък.

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

## Частите на файла

| Част | За какво служи |
|---|---|
| `<script total>` | кодът на Node.js на компонента, изпълняван в процеса на потока |
| `<settings>` | формата за конфигурация, с компонентите на потребителския интерфейс (`ui-component`, пътищата, започващи с `?.`, сочат към `config` на компонента) |
| `<readme>` | помощта, показвана в редактора |
| `<body>` | кутията в диаграмата: `<header>` със заместителите `ICON` и `NAME` и по избор `<footer>` или тяло, където `<ui-bind path="STATUS.x">` показва състоянието, а `CONFIG.x` конфигурацията |
| `<style>` | CSS на кутията; `.CLASS` се заменя с клас, уникален за компонента |
| `<script>` (втори) | допълнителен JavaScript на редактора, за бутони в кутията (може да изпрати `{ TYPE: 'trigger', id: ... }` към потока) |

## `exports` на частта Node.js

| Export | Значение |
|---|---|
| `id`, `name`, `group`, `version`, `icon`, `author` | идентичността на компонента и къде се показва в списъка |
| `config` | конфигурацията по подразбиране; формата от `<settings>` я редактира |
| `inputs`, `outputs` | списъкът с конектори `{ id, name }`. Компонент без `inputs` е източник |
| `kind` | по избор: ролята на компонента в каталога (`trigger`, `action` или `output`) |
| `make(instance, config)` | извиква се веднъж за всяка кутия, която поставите в диаграмата |

## `instance`

Вътре в `make` определяте поведението, като присвоявате функции на инстанцията:

| Функция | Извиква се, когато |
|---|---|
| `instance.message = function($) {}` | пристигне съобщение. `$.data` са данните, `$.send('output')` го препраща към конекторите на този изход, `$.destroy()` го прекратява без изпращане |
| `instance.configure = function() {}` | се промени конфигурацията, и веднъж в началото |
| `instance.trigger = function() {}` | бутонът на редактора или кодът го поиска |
| `instance.pause = function(is) {}` | потокът е паузиран или възобновен |
| `instance.close = function() {}` | кутията е премахната или потокът спре: изчистете тук таймерите си |

И извиквате `instance.send('output', data)`, за да създадете собствено съобщение (както прави `timer`), `instance.status(object)`, за да покажете състояние в кутията (`delay.html` подава време в милисекунди като втори аргумент за опресняването му) и `instance.throw(error)`, за да съобщите за грешка.

## Опитайте

1. Поставете `shout.html` в каталог и запишете адреса му в настройката `components2` (вижте [хранилището](/en/flow/the-components-repository/)) или импортирайте поток, който го съдържа в своите `components`.
2. Добавете до него в редактора `timer` и `print`, свържете ги и стартирайте потока.
3. Отворете състоянието на кутията: броячът расте с всяко съобщение.

За да тествате компонент без редактора, хранилището има малък тестер, вижте [хранилището с компоненти](/en/flow/the-components-repository/).