# Φτιάξτε μια συνιστώσα για το UI Builder

> Η μορφή μιας συνιστώσας UI Builder: ένα αρχείο HTML με το στυλ της, ένα σενάριο που εξάγει τα μεταδεδομένα και μια συνάρτηση make, μια φόρμα ρυθμίσεων και ένα readme, μαζί με τις σημαίες, τις μεθόδους και τα γεγονότα μιας παρουσίας.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: el
Content-SHA256: 3c4ba8356a275cf37d81940a0af9c8fa59407530dd42dc02f436032442c8dd00
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Μια συνιστώσα UI Builder είναι **ένα αρχείο HTML** με έως τέσσερα μέρη. Ο σκελετός που προσφέρει ο επεξεργαστής για μια νέα συνιστώσα (`public/template.txt`) είναι ένα ρολόι:

```html
<style>
	.CLASS { font-size: 14px; }
</style>

<script>
	exports.id = '';
	exports.name = 'Clock';
	exports.group = 'Controls';
	exports.author = 'Total.js';
	exports.icon = 'ti ti-clock';
	exports.config = { bold: false, flash: true, seconds: true };
	exports.version = '1';
	exports.follow = true;

	exports.make = function(instance, config, element, cls, iseditor) {
		// build the component inside element
	};
</script>

<readme>
The component renders the current time and the model contains a `Date` object.
</readme>

<settings>
	<div class="padding">
		<ui-component name="input" path="?.bold" config="type:checkbox">Apply bold font</ui-component>
	</div>
</settings>
```

| Μέρος | Τι κάνει |
|---|---|
| `<style>` | το CSS της συνιστώσας· το `CLASS` αντικαθίσταται από μια κλάση που ανήκει στη συνιστώσα |
| `<script>` | εξάγει τα μεταδεδομένα (`id`, `name`, `group`, `author`, `icon`, `version`, `config` με τις προεπιλογές) και τη συνάρτηση `make` |
| `<readme>` | το κείμενο βοήθειας που εμφανίζεται στον επεξεργαστή (Markdown) |
| `<settings>` | η φόρμα που επεξεργάζεται το `config`: πεδία εισόδου jComponent των οποίων το `path` ξεκινά με `?.` ακολουθούμενο από το κλειδί της διαμόρφωσης |

## Η συνάρτηση make

Η `make(instance, config, element, cls, iseditor)` εκτελείται όταν δημιουργείται η συνιστώσα:

- Το `instance` είναι η παρουσία της συνιστώσας (`set`, `on`, `emit`, `state`...).
- Το `config` είναι η διαμόρφωσή της και το `element` το στοιχείο jQuery που πρέπει να γεμίσει.
- Το `cls` είναι η κλάση που αντικατέστησε το `CLASS` και το `iseditor` δείχνει αν σχεδιάζεται μέσα στον επεξεργαστή ή σε έναν αποδοθέντα σχεδιασμό (έτσι, για παράδειγμα, ένα χρονόμετρο δεν χρειάζεται να τρέχει όσο σχεδιάζετε).

Μέσα σε αυτήν ακούτε γεγονότα (`instance.on('configure', ...)` όταν αλλάζουν οι ρυθμίσεις και `instance.on('destroy', ...)` για να καθαρίσετε τα χρονόμετρα) και γράφετε την τιμή με `instance.set('value', date)`.

## Μεταδεδομένα, σημαίες, μέθοδοι και γεγονότα

Από το README του επεξεργαστή:

- **Μεταδεδομένα:** το `exports.follow = true` εμφανίζει τη συνιστώσα στη φόρμα ρυθμίσεων *Path for reading/writing* (μόνο για τον σχεδιαστή) και το `exports.hidden = true` την κρύβει από τη λίστα συνιστωσών.
- **Σημαίες μιας παρουσίας:** το `instance.state.bind = true` δένει αυτόματα τη συνιστώσα μέσα σε μια φόρμα, για όσες διαβάζουν και γράφουν δεδομένα· το `instance.state.notify = true` εκπέμπει μόνο το γεγονός `notify` όταν αλλάζει η τιμή, αντί να ορίζει απευθείας την τιμή της συνιστώσας (η συνιστώσα Counter είναι το παράδειγμα).
- **Μέθοδος:** η `instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {})` διαβάζει μια πηγή δεδομένων και δίνει έναν πίνακα από `[id, name]`.
- **Γεγονός:** το `instance.on('refresh', function(meta) {})` ενεργοποιείται όταν άλλαξαν κάποια αντικείμενα: το `meta.type` είναι `remove` ή `configure`, με `meta.items` ή `meta.item`.
- **Ιδιότητες του επεξεργαστή** που μπορεί να διαβάσει μια συνιστώσα: `DEF.cl.datasource` (λίστες κωδικών και συνιστώσες με `follow`), `DEF.cl.paths`, `DEF.cl.list` (όλες οι παρουσίες), `DEF.cl.inputs`, `DEF.cl.outputs`, `DEF.cl.views` και `DEF.cl.apps` (αδελφοί σχεδιασμοί).
- **Παρακολούθηση:** ένα `config.path` που ξεκινά με `@` σημαίνει ότι η συνιστώσα ακολουθεί μια άλλη.

Δημοσιεύστε το αρχείο στη δική σας λίστα συνιστωσών ([εκτέλεση του επεξεργαστή](/en/uibuilder/run-the-designer/)) και η ομάδα σας μπορεί να το χρησιμοποιεί από τον επεξεργαστή.