Vytvorenie komponentu pre UI Builder

UI Builder · uibuilder@1 uibuildercomponentsextensions

Komponent UI Builder je jeden súbor HTML s najviac štyrmi časťami. Kostra, ktorú editor ponúka pre nový komponent (public/template.txt), sú hodiny:

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

Časť	Čo robí
`<style>`	CSS komponentu; `CLASS` sa nahradí triedou, ktorá patrí komponentu
`<script>`	exportuje metadáta (`id`, `name`, `group`, `author`, `icon`, `version`, `config` s predvolenými hodnotami) a funkciu `make`
`<readme>`	pomocný text zobrazený v editore (Markdown)
`<settings>`	formulár, ktorý upravuje `config`: vstupy jComponent, ktorých `path` začína `?.` nasledovaným kľúčom konfigurácie

Funkcia make

make(instance, config, element, cls, iseditor) sa spustí pri vytvorení komponentu:

instance je inštancia komponentu (set, on, emit, state...).
config je jeho konfigurácia a element je prvok jQuery, ktorý treba vyplniť.
cls je trieda, ktorá nahradila CLASS, a iseditor hovorí, či sa kreslí v editore alebo vo vykreslenom dizajne (takže napríklad časovač nemusí bežať, kým navrhujete).

Vnútri počúvate udalosti (instance.on('configure', ...) pri zmene nastavení a instance.on('destroy', ...) na vyčistenie časovačov) a hodnotu zapisujete cez instance.set('value', date).

Metadáta, príznaky, metódy a udalosti

Z README editora:

Metadáta: exports.follow = true zobrazí komponent vo formulári nastavení Path for reading/writing (iba pre návrhára) a exports.hidden = true ho skryje zo zoznamu komponentov.
Príznaky inštancie: instance.state.bind = true automaticky naviaže komponent vo formulári, pre tie, ktoré čítajú a zapisujú dáta; instance.state.notify = true pri zmene hodnoty vyšle iba udalosť notify namiesto priameho nastavenia hodnoty komponentu (príkladom je komponent Counter).
Metóda: instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {}) číta zdroj dát a vráti pole [id, name].
Udalosť: instance.on('refresh', function(meta) {}) sa spustí, keď sa zmenili niektoré objekty: meta.type je remove alebo configure, s meta.items alebo meta.item.
Vlastnosti editora, ktoré môže komponent čítať: DEF.cl.datasource (zoznamy kódov a komponenty s follow), DEF.cl.paths, DEF.cl.list (všetky inštancie), DEF.cl.inputs, DEF.cl.outputs, DEF.cl.views a DEF.cl.apps (súrodenecké dizajny).
Nasledovanie: config.path, ktorá začína @, znamená, že komponent nasleduje iný.

Publikujte súbor vo vlastnom zozname komponentov (spustenie editora) a váš tím ho môže používať z editora.