Construiește o componentă pentru UI Builder

UI Builder · uibuilder@1 uibuildercomponentsextensions

O componentă UI Builder este un fișier HTML cu cel mult patru părți. Scheletul pe care editorul îl oferă pentru o componentă nouă (public/template.txt) este un ceas:

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

Partea	Ce face
`<style>`	CSS-ul componentei; `CLASS` este înlocuit cu o clasă care aparține componentei
`<script>`	exportă metadatele (`id`, `name`, `group`, `author`, `icon`, `version`, `config` cu valorile implicite) și funcția `make`
`<readme>`	textul de ajutor afișat în editor (Markdown)
`<settings>`	formularul care editează `config`: intrări jComponent al căror `path` începe cu `?.` urmat de cheia configurației

Funcția make

make(instance, config, element, cls, iseditor) rulează când este creată componenta:

instance este instanța componentei (set, on, emit, state...).
config este configurația ei, iar element elementul jQuery de completat.
cls este clasa care a înlocuit CLASS, iar iseditor spune dacă este desenată în editor sau într-un design randat (astfel, de exemplu, un temporizator nu trebuie să ruleze cât timp proiectezi).

În interior asculți evenimente (instance.on('configure', ...) când se schimbă setările și instance.on('destroy', ...) pentru a curăța temporizatoarele) și scrii valoarea cu instance.set('value', date).

Metadate, indicatori, metode și evenimente

Din README-ul editorului:

Metadate: exports.follow = true arată componenta în formularul de setări Path for reading/writing (doar pentru designer), iar exports.hidden = true o ascunde din lista de componente.
Indicatori ai unei instanțe: instance.state.bind = true leagă automat componenta într-un formular, pentru cele care citesc și scriu date; instance.state.notify = true emite doar evenimentul notify când se schimbă valoarea, în loc să seteze direct valoarea componentei (componenta Counter este exemplul).
Metodă: instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {}) citește o sursă de date și returnează un array de [id, name].
Eveniment: instance.on('refresh', function(meta) {}) se declanșează când s-au schimbat unele obiecte: meta.type este remove sau configure, cu meta.items sau meta.item.
Proprietăți ale editorului pe care o componentă le poate citi: DEF.cl.datasource (liste de coduri și componente cu follow), DEF.cl.paths, DEF.cl.list (toate instanțele), DEF.cl.inputs, DEF.cl.outputs, DEF.cl.views și DEF.cl.apps (designuri surori).
Urmărire: un config.path care începe cu @ înseamnă că componenta urmează alta.

Publică fișierul în propria listă de componente (rularea editorului) și echipa ta îl poate folosi din editor.