Γράψτε μια συνιστώσα Flow: ένα αρχείο HTML

Μια συνιστώσα είναι ένα αρχείο .html. Το Flow διαβάζει το αρχείο, εκτελεί το τμήμα Node.js μέσα στη ροή και εμφανίζει τον σχεδιασμό του στον επεξεργαστή. Όλες οι επίσημες συνιστώσες του αποθετηρίου χρησιμοποιούν αυτή τη μορφή, οπότε μπορείτε να διαβάσετε οποιαδήποτε ως παράδειγμα.

Ένα παράδειγμα: shout.html

Λαμβάνει ένα μήνυμα, μετατρέπει το κείμενο σε κεφαλαία, προσθέτει ένα επίθημα και το στέλνει παρακάτω.

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

Τα μέρη του αρχείου

Μέρος	Σε τι χρησιμεύει
<script total>	ο κώδικας Node.js της συνιστώσας, που εκτελείται στη διεργασία της ροής
<settings>	η φόρμα διαμόρφωσης, με τις συνιστώσες της διεπαφής χρήστη (ui-component, οι διαδρομές που ξεκινούν με ?. δείχνουν στο config της συνιστώσας)
<readme>	η βοήθεια που εμφανίζεται στον επεξεργαστή
<body>	το κουτί στο διάγραμμα: ένα <header> με τα σύμβολα κράτησης ICON και NAME και προαιρετικά ένα <footer> ή ένα σώμα, όπου το <ui-bind path="STATUS.x"> εμφανίζει την κατάσταση και το CONFIG.x τη διαμόρφωση
<style>	το CSS του κουτιού· το .CLASS αντικαθίσταται από μια κλάση μοναδική για τη συνιστώσα
<script> (δεύτερο)	προαιρετικό JavaScript του επεξεργαστή, για κουμπιά στο κουτί (μπορεί να στείλει { TYPE: 'trigger', id: ... } στη ροή)

Τα exports του τμήματος Node.js

Export	Σημασία
id, name, group, version, icon, author	η ταυτότητα της συνιστώσας και πού εμφανίζεται στη λίστα
config	η προεπιλεγμένη διαμόρφωση· η φόρμα του <settings> την επεξεργάζεται
inputs, outputs	η λίστα των συνδέσμων { id, name }. Μια συνιστώσα χωρίς inputs είναι πηγή
kind	προαιρετικό: ο ρόλος της συνιστώσας στον κατάλογο (trigger, action ή output)
make(instance, config)	καλείται μία φορά για κάθε κουτί που τοποθετείτε στο διάγραμμα

Το instance

Μέσα στο make ορίζετε τη συμπεριφορά αναθέτοντας συναρτήσεις στο instance:

Συνάρτηση	Καλείται όταν
instance.message = function($) {}	φτάνει ένα μήνυμα. Το $.data είναι τα δεδομένα, το $.send('output') το προωθεί στους συνδέσμους αυτής της εξόδου, το $.destroy() το τερματίζει χωρίς αποστολή
instance.configure = function() {}	αλλάζει η διαμόρφωση, και μία φορά στην αρχή
instance.trigger = function() {}	το ζητά το κουμπί του επεξεργαστή ή ο κώδικας
instance.pause = function(is) {}	η ροή τίθεται σε παύση ή συνεχίζεται
instance.close = function() {}	το κουτί αφαιρείται ή η ροή σταματά: καθαρίστε εδώ τους χρονιστές σας

Και καλείτε το instance.send('output', data) για να δημιουργήσετε ένα δικό σας μήνυμα (όπως κάνει το timer), το instance.status(object) για να εμφανίσετε μια κατάσταση στο κουτί (το delay.html περνά έναν χρόνο σε χιλιοστά του δευτερολέπτου ως δεύτερο όρισμα για την ανανέωσή της) και το instance.throw(error) για να αναφέρετε ένα σφάλμα.

Δοκιμάστε το

1. Βάλτε το shout.html σε έναν κατάλογο και γράψτε τη διεύθυνσή του στη ρύθμιση components2 (δείτε αποθετήριο) ή εισαγάγετε μια ροή που το περιέχει στα components της.
2. Προσθέστε δίπλα του στον επεξεργαστή ένα timer και ένα print, συνδέστε τα και ξεκινήστε τη ροή.
3. Ανοίξτε την κατάσταση του κουτιού: ο μετρητής αυξάνεται με κάθε μήνυμα.

Για να δοκιμάσετε μια συνιστώσα χωρίς τον επεξεργαστή, το αποθετήριο έχει έναν μικρό ελεγκτή, δείτε αποθετήριο συνιστωσών.