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

Flow

Skriv en Flow-komponent: en HTML-fil

Flow · flow@11.1 flowflowstreamcomponentmakemessage

En komponent är en .html-fil. Flow läser filen, kör dess Node.js-del inuti flödet och visar dess design i editorn. De officiella komponenterna i förrådet använder alla det här formatet, så du kan läsa vilken som helst av dem som exempel.

Ett exempel: shout.html

Den tar emot ett meddelande, omvandlar texten till versaler, lägger till ett suffix och skickar vidare det.

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

Filens delar

DelVad den är till för
<script total>komponentens Node.js-kod, som körs i flödets process
<settings>konfigurationsformuläret, med gränssnittets komponenter (ui-component, sökvägar som börjar med ?. pekar på komponentens config)
<readme>hjälpen som visas i editorn
<body>rutan i diagrammet: en <header> med platshållarna ICON och NAME, och eventuellt en <footer> eller en kropp, där <ui-bind path="STATUS.x"> visar statusen och CONFIG.x konfigurationen
<style>rutans CSS; .CLASS ersätts med en klass som är unik för komponenten
<script> (andra)valfri JavaScript för editorn, för knappar i rutan (den kan skicka { TYPE: 'trigger', id: ... } till flödet)

Node.js-delens exports

ExportBetydelse
id, name, group, version, icon, authorkomponentens identitet och var den visas i listan
configstandardkonfigurationen; formuläret i <settings> redigerar den
inputs, outputslistan över kontakter { id, name }. En komponent utan inputs är en källa
kindvalfritt: komponentens roll i katalogen (trigger, action eller output)
make(instance, config)anropas en gång för varje ruta du placerar i diagrammet

instance

Inuti make definierar du beteendet genom att tilldela funktioner till instansen:

FunktionAnropas när
instance.message = function($) {}ett meddelande anländer. $.data är datan, $.send('output') skickar vidare det till kontakterna för den utgången, $.destroy() avslutar det utan att skicka
instance.configure = function() {}konfigurationen ändras, och en gång vid starten
instance.trigger = function() {}editorns knapp eller koden ber om det
instance.pause = function(is) {}flödet pausas eller återupptas
instance.close = function() {}rutan tas bort eller flödet stoppas: städa dina timers här

Och du anropar instance.send('output', data) för att skapa ett eget meddelande (som timer gör), instance.status(object) för att visa en status i rutan (delay.html skickar en tid i millisekunder som andra argument för att uppdatera den) och instance.throw(error) för att rapportera ett fel.

Prova

  1. Lägg shout.html i en katalog och skriv dess adress i inställningen components2 (se förrådet), eller importera ett flöde som innehåller den i sina components.
  2. Lägg till en timer och en print bredvid den i editorn, koppla ihop dem och starta flödet.
  3. Öppna rutans status: räknaren växer för varje meddelande.

För att testa en komponent utan editorn har förrådet en liten testare, se komponentförrådet.