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

UI Builder · uibuilder@1 uibuildercomponentsextensions

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

<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 που ξεκινά με @ σημαίνει ότι η συνιστώσα ακολουθεί μια άλλη.

Δημοσιεύστε το αρχείο στη δική σας λίστα συνιστωσών (εκτέλεση του επεξεργαστή) και η ομάδα σας μπορεί να το χρησιμοποιεί από τον επεξεργαστή.