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

Flow · flow@11.1 flowflowstreamcomponentmakemessage

Компонентът е един .html файл. Flow чете файла, изпълнява частта му на Node.js вътре в потока и показва дизайна му в редактора. Всички официални компоненти от хранилището използват този формат, така че можете да четете който и да е от тях като пример.

Пример: `shout.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), за да съобщите за грешка.

Опитайте

Поставете shout.html в каталог и запишете адреса му в настройката components2 (вижте хранилището) или импортирайте поток, който го съдържа в своите components.
Добавете до него в редактора timer и print, свържете ги и стартирайте потока.
Отворете състоянието на кутията: броячът расте с всяко съобщение.

За да тествате компонент без редактора, хранилището има малък тестер, вижте хранилището с компоненти.

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

Пример: shout.html

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

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

instance

Опитайте

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

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

`instance`