ForgeFlow
ro
English Español Slovenčina Deutsch Français Italiano Português Polski Čeština Nederlands Română Magyar Svenska Ελληνικά Български

Flow

Scrie o componentă Flow: un fișier HTML

Flow · flow@11.1 flowflowstreamcomponentmakemessage

O componentă este un fișier .html. Flow citește fișierul, rulează partea lui Node.js în interiorul fluxului și afișează designul în editor. Toate componentele oficiale din depozit folosesc acest format, așa că poți citi oricare dintre ele ca exemplu.

Un exemplu: shout.html

Primește un mesaj, convertește textul în majuscule, adaugă un sufix și îl trimite mai departe.

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

Părțile fișierului

ParteaLa ce folosește
<script total>codul Node.js al componentei, executat în procesul fluxului
<settings>formularul de configurare, cu componentele interfeței cu utilizatorul (ui-component, căile care încep cu ?. indică config al componentei)
<readme>ajutorul afișat în editor
<body>caseta din diagramă: un <header> cu substituenții ICON și NAME și, opțional, un <footer> sau un corp, unde <ui-bind path="STATUS.x"> afișează starea și CONFIG.x configurația
<style>CSS-ul casetei; .CLASS este înlocuit cu o clasă unică pentru componentă
<script> (al doilea)JavaScript opțional al editorului, pentru butoanele din casetă (poate trimite { TYPE: 'trigger', id: ... } fluxului)

Exporturile (exports) părții Node.js

ExportSemnificația
id, name, group, version, icon, authoridentitatea componentei și locul în care apare în listă
configconfigurația implicită; formularul din <settings> o editează
inputs, outputslista conectorilor { id, name }. O componentă fără inputs este o sursă
kindopțional: rolul componentei în catalog (trigger, action sau output)
make(instance, config)apelat o dată pentru fiecare casetă pe care o plasezi în diagramă

instance

În interiorul lui make definești comportamentul atribuind funcții instanței:

FuncțiaApelată când
instance.message = function($) {}sosește un mesaj. $.data sunt datele, $.send('output') îl trimite conectorilor acelei ieșiri, $.destroy() îl încheie fără a-l trimite
instance.configure = function() {}se schimbă configurația, și o dată la început
instance.trigger = function() {}butonul editorului sau codul o cere
instance.pause = function(is) {}fluxul este pus pe pauză sau reluat
instance.close = function() {}caseta este eliminată sau fluxul se oprește: curăță aici temporizatoarele

Și apelezi instance.send('output', data) pentru a crea un mesaj propriu (cum face timer), instance.status(object) pentru a afișa o stare în casetă (delay.html transmite un timp în milisecunde ca al doilea argument pentru a o reîmprospăta) și instance.throw(error) pentru a raporta o eroare.

Încearcă

  1. Pune shout.html într-un catalog și scrie adresa lui în setarea components2 (vezi depozit), sau importă un flux care îl conține în components.
  2. Adaugă lângă el în editor un timer și un print, conectează-le și pornește fluxul.
  3. Deschide starea casetei: contorul crește cu fiecare mesaj.

Pentru a testa o componentă fără editor, depozitul are un mic tester, vezi depozitul de componente.