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

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

Framework: flow
Product: Flow (flow@11.1)
Language: el
Content-SHA256: 9fd560ea9da3674d3be83b8467a9e507a5bbb6c7598e62ab2f19a0fca76926d0
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Μια συνιστώσα είναι **ένα αρχείο `.html`**. Το Flow διαβάζει το αρχείο, εκτελεί το τμήμα Node.js μέσα στη ροή και εμφανίζει τον σχεδιασμό του στον επεξεργαστή. Όλες οι επίσημες συνιστώσες του [αποθετηρίου](/en/flow/the-components-repository/) χρησιμοποιούν αυτή τη μορφή, οπότε μπορείτε να διαβάσετε οποιαδήποτε ως παράδειγμα.

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

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

```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` (δείτε [αποθετήριο](/en/flow/the-components-repository/)) ή εισαγάγετε μια ροή που το περιέχει στα `components` της.
2. Προσθέστε δίπλα του στον επεξεργαστή ένα `timer` και ένα `print`, συνδέστε τα και ξεκινήστε τη ροή.
3. Ανοίξτε την κατάσταση του κουτιού: ο μετρητής αυξάνεται με κάθε μήνυμα.

Για να δοκιμάσετε μια συνιστώσα χωρίς τον επεξεργαστή, το αποθετήριο έχει έναν μικρό ελεγκτή, δείτε [αποθετήριο συνιστωσών](/en/flow/the-components-repository/).