Napište komponentu Flow: jeden soubor HTML

Komponenta je jeden soubor .html. Flow soubor přečte, spustí jeho část Node.js uvnitř toku a zobrazí jeho návrh v editoru. Všechny oficiální komponenty z repozitáře používají tento formát, takže kteroukoli z nich můžete číst jako příklad.

Příklad: shout.html

Přijme zprávu, převede text na velká písmena, přidá příponu a pošle ji dál.

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

Části souboru

Část	K čemu slouží
<script total>	kód Node.js komponenty, vykonávaný v procesu toku
<settings>	formulář konfigurace s komponentami uživatelského rozhraní (ui-component, cesty začínající ?. ukazují na config komponenty)
<readme>	nápověda zobrazená v editoru
<body>	box v diagramu: <header> se zástupnými symboly ICON a NAME a volitelně <footer> nebo tělo, kde <ui-bind path="STATUS.x"> zobrazuje stav a CONFIG.x konfiguraci
<style>	CSS boxu; .CLASS se nahradí třídou jedinečnou pro komponentu
<script> (druhý)	volitelný JavaScript editoru pro tlačítka v boxu (může poslat { TYPE: 'trigger', id: ... } toku)

exports části Node.js

Export	Význam
id, name, group, version, icon, author	identita komponenty a místo v seznamu
config	výchozí konfigurace; upravuje ji formulář <settings>
inputs, outputs	seznam konektorů { id, name }. Komponenta bez inputs je zdroj
kind	volitelné: role komponenty v katalogu (trigger, action nebo output)
make(instance, config)	volá se jednou pro každý box, který umístíte do diagramu

instance

Uvnitř make definujete chování přiřazením funkcí k instanci:

Funkce	Volá se, když
instance.message = function($) {}	přijde zpráva. $.data jsou data, $.send('output') ji přepošle konektorům daného výstupu, $.destroy() ji ukončí bez odeslání
instance.configure = function() {}	změní se konfigurace, a jednou na začátku
instance.trigger = function() {}	o to požádá tlačítko editoru nebo kód
instance.pause = function(is) {}	tok se pozastaví nebo obnoví
instance.close = function() {}	box se odstraní nebo tok zastaví: zde vyčistěte časovače

A voláte instance.send('output', data) k vytvoření vlastní zprávy (jak to dělá timer), instance.status(object) k zobrazení stavu v boxu (delay.html předává čas v milisekundách jako druhý argument pro obnovení) a instance.throw(error) k nahlášení chyby.

Vyzkoušejte

1. Dejte shout.html do katalogu a jeho adresu zapište do nastavení components2 (viz repozitář) nebo importujte tok, který ji obsahuje ve svých components.
2. Přidejte vedle ní v editoru timer a print, propojte je a spusťte tok.
3. Otevřete stav boxu: počítadlo roste s každou zprávou.

K testování komponenty bez editoru má repozitář malý tester, viz repozitář komponent.