Vytvoření komponenty pro UI Builder

UI Builder · uibuilder@1 uibuildercomponentsextensions

Komponenta UI Builder je jeden soubor HTML s nejvýše čtyřmi částmi. Kostra, kterou editor nabízí pro novou komponentu (public/template.txt), jsou 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>

Část	Co dělá
`<style>`	CSS komponenty; `CLASS` se nahradí třídou, která patří komponentě
`<script>`	exportuje metadata (`id`, `name`, `group`, `author`, `icon`, `version`, `config` s výchozími hodnotami) a funkci `make`
`<readme>`	nápověda zobrazená v editoru (Markdown)
`<settings>`	formulář, který upravuje `config`: vstupy jComponent, jejichž `path` začíná `?.` následovaným klíčem konfigurace

Funkce make

make(instance, config, element, cls, iseditor) se spustí při vytvoření komponenty:

instance je instance komponenty (set, on, emit, state...).
config je její konfigurace a element je prvek jQuery, který je třeba vyplnit.
cls je třída, která nahradila CLASS, a iseditor říká, zda se kreslí v editoru, nebo ve vykresleném návrhu (takže například časovač nemusí běžet, dokud navrhujete).

Uvnitř posloucháte události (instance.on('configure', ...) při změně nastavení a instance.on('destroy', ...) k úklidu časovačů) a hodnotu zapisujete přes instance.set('value', date).

Metadata, příznaky, metody a události

Z README editoru:

Metadata: exports.follow = true zobrazí komponentu ve formuláři nastavení Path for reading/writing (jen pro návrháře) a exports.hidden = true ji skryje ze seznamu komponent.
Příznaky instance: instance.state.bind = true automaticky naváže komponentu ve formuláři, pro ty, které čtou a zapisují data; instance.state.notify = true při změně hodnoty vyšle jen událost notify místo přímého nastavení hodnoty komponenty (příkladem je komponenta Counter).
Metoda: instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {}) čte zdroj dat a vrací pole [id, name].
Událost: instance.on('refresh', function(meta) {}) se spustí, když se změnily některé objekty: meta.type je remove nebo configure, s meta.items nebo meta.item.
Vlastnosti editoru, které komponenta může číst: DEF.cl.datasource (seznamy kódů a komponenty s follow), DEF.cl.paths, DEF.cl.list (všechny instance), DEF.cl.inputs, DEF.cl.outputs, DEF.cl.views a DEF.cl.apps (sourozenecké návrhy).
Následování: config.path, která začíná @, znamená, že komponenta následuje jinou.

Publikujte soubor ve vlastním seznamu komponent (spuštění editoru) a váš tým jej může používat z editoru.