Napísať komponent Flow: jeden súbor HTML

Komponent je jeden súbor .html. Flow súbor prečíta, spustí jeho časť Node.js vnútri toku a zobrazí jeho dizajn v editore. Všetky oficiálne komponenty z repozitára používajú tento formát, takže ktorýkoľvek z nich môžete čítať ako príklad.

Príklad: shout.html

Prijme správu, premení text na veľké písmená, pridá príponu a pošle ju ďalej.

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

Časti súboru

Časť	Na čo slúži
<script total>	kód Node.js komponentu, vykonávaný v procese toku
<settings>	formulár konfigurácie s komponentmi používateľského rozhrania (ui-component, cesty začínajúce ?. ukazujú na config komponentu)
<readme>	pomocník zobrazený v editore
<body>	box v diagrame: <header> so zástupnými symbolmi ICON a NAME a voliteľne <footer> alebo telo, kde <ui-bind path="STATUS.x"> zobrazuje stav a CONFIG.x konfiguráciu
<style>	CSS boxu; .CLASS sa nahradí triedou jedinečnou pre komponent
<script> (druhý)	voliteľný JavaScript editora pre tlačidlá v boxe (môže poslať { TYPE: 'trigger', id: ... } toku)

exports časti Node.js

Export	Význam
id, name, group, version, icon, author	identita komponentu a miesto v zozname
config	predvolená konfigurácia; upravuje ju formulár <settings>
inputs, outputs	zoznam konektorov { id, name }. Komponent bez inputs je zdroj
kind	voliteľné: úloha komponentu v katalógu (trigger, action alebo output)
make(instance, config)	volá sa raz pre každý box, ktorý umiestnite do diagramu

instance

Vnútri make definujete správanie priradením funkcií k inštancii:

Funkcia	Volá sa, keď
instance.message = function($) {}	príde správa. $.data sú dáta, $.send('output') ju preposiela konektorom daného výstupu, $.destroy() ju ukončí bez odoslania
instance.configure = function() {}	zmení sa konfigurácia, a raz na začiatku
instance.trigger = function() {}	o to požiada tlačidlo editora alebo kód
instance.pause = function(is) {}	tok sa pozastaví alebo obnoví
instance.close = function() {}	box sa odstráni alebo tok zastaví: tu vyčistite časovače

A volajte instance.send('output', data) na vytvorenie vlastnej správy (ako to robí timer), instance.status(object) na zobrazenie stavu v boxe (delay.html odovzdáva čas v milisekundách ako druhý argument na obnovenie) a instance.throw(error) na nahlásenie chyby.

Vyskúšajte

1. Dajte shout.html do katalógu a jeho adresu zapíšte do nastavenia components2 (pozri repozitár) alebo importujte tok, ktorý ho obsahuje vo svojich components.
2. Pridajte vedľa neho v editore timer a print, prepojte ich a spustite tok.
3. Otvorte stav boxu: počítadlo rastie s každou správou.

Na testovanie komponentu bez editora má repozitár malý tester, pozri repozitár komponentov.