Flow komponens írása: egyetlen HTML fájl

A komponens egyetlen .html fájl. A Flow beolvassa a fájlt, a Node.js részét a folyamban futtatja, a kinézetét pedig a szerkesztőben jeleníti meg. A tároló összes hivatalos komponense ezt a formátumot használja, így bármelyiket olvashatod példaként.

Egy példa: shout.html

Üzenetet fogad, a szöveget nagybetűssé alakítja, utótagot fűz hozzá, és továbbküldi.

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

A fájl részei

Rész	Mire való
<script total>	a komponens Node.js kódja, a folyam folyamatában futtatva
<settings>	a konfigurációs űrlap a felhasználói felület komponenseivel (ui-component, a ?. kezdetű útvonalak a komponens config részére mutatnak)
<readme>	a szerkesztőben megjelenő súgó
<body>	a doboz a diagramon: egy <header> az ICON és NAME helyőrzőkkel, opcionálisan egy <footer> vagy törzs, ahol a <ui-bind path="STATUS.x"> az állapotot, a CONFIG.x a konfigurációt mutatja
<style>	a doboz CSS-e; a .CLASS helyére a komponensre egyedi osztály kerül
<script> (második)	a szerkesztő opcionális JavaScriptje a dobozban lévő gombokhoz (küldhet { TYPE: 'trigger', id: ... } üzenetet a folyamnak)

A Node.js rész exports elemei

Export	Jelentés
id, name, group, version, icon, author	a komponens azonosítója és helye a listában
config	az alapértelmezett konfiguráció; a <settings> űrlapja szerkeszti
inputs, outputs	az { id, name } csatlakozók listája. A inputs nélküli komponens forrás
kind	opcionális: a komponens szerepe a katalógusban (trigger, action vagy output)
make(instance, config)	minden, a diagramra helyezett dobozra egyszer hívódik meg

Az instance

A make belsejében a viselkedést úgy határozod meg, hogy függvényeket rendelsz a példányhoz:

Függvény	Akkor hívódik, amikor
instance.message = function($) {}	üzenet érkezik. A $.data az adat, a $.send('output') továbbítja az adott kimenet csatlakozóinak, a $.destroy() küldés nélkül lezárja
instance.configure = function() {}	a konfiguráció változik, és egyszer az induláskor
instance.trigger = function() {}	a szerkesztő gombja vagy a kód kéri
instance.pause = function(is) {}	a folyamot szüneteltetik vagy folytatják
instance.close = function() {}	a dobozt eltávolítják vagy a folyam leáll: itt takaríts el az időzítőket

Te pedig az instance.send('output', data) hívással saját üzenetet hozol létre (ahogy a timer teszi), az instance.status(object) hívással állapotot jelenítesz meg a dobozban (a delay.html ezredmásodpercben megadott időt ad át második argumentumként a frissítéséhez), az instance.throw(error) hívással pedig hibát jelentesz.

Próbáld ki

1. Tedd a shout.html fájlt egy katalógusba, és írd a címét a components2 beállításba (lásd tároló), vagy importálj egy folyamot, amely a components között tartalmazza.
2. Adj hozzá mellé a szerkesztőben egy timer és egy print komponenst, kösd össze őket és indítsd el a folyamot.
3. Nyisd meg a doboz állapotát: a számláló minden üzenettel nő.

Komponens szerkesztő nélküli teszteléséhez a tárolónak van egy kis tesztere, lásd komponenstároló.