Bygg en komponent för UI Builder

UI Builder · uibuilder@1 uibuildercomponentsextensions

En UI Builder-komponent är en HTML-fil med upp till fyra delar. Skelettet som editorn erbjuder för en ny komponent (public/template.txt) är en klocka:

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

Del	Vad den gör
`<style>`	komponentens CSS; `CLASS` ersätts av en klass som tillhör komponenten
`<script>`	exporterar metadata (`id`, `name`, `group`, `author`, `icon`, `version`, `config` med standardvärdena) och funktionen `make`
`<readme>`	hjälptexten som visas i editorn (Markdown)
`<settings>`	formuläret som redigerar `config`: jComponent-fält vars `path` börjar med `?.` följt av konfigurationens nyckel

Funktionen make

make(instance, config, element, cls, iseditor) körs när komponenten skapas:

instance är komponentens instans (set, on, emit, state...).
config är dess konfiguration och element jQuery-elementet att fylla.
cls är klassen som ersatte CLASS och iseditor talar om om den ritas i editorn eller i en renderad design (så en timer behöver till exempel inte köras medan du designar).

Inuti lyssnar du på händelser (instance.on('configure', ...) när inställningarna ändras och instance.on('destroy', ...) för att städa timers) och skriver värdet med instance.set('value', date).

Metadata, flaggor, metoder och händelser

Från editorns README:

Metadata: exports.follow = true visar komponenten i inställningsformuläret Path for reading/writing (bara för designern) och exports.hidden = true döljer den från listan över komponenter.
Flaggor för en instans: instance.state.bind = true binder komponenten automatiskt i ett formulär, för de som läser och skriver data; instance.state.notify = true skickar bara händelsen notify när värdet ändras, i stället för att sätta komponentens värde direkt (komponenten Counter är exemplet).
Metod: instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {}) läser en datakälla och ger en array av [id, name].
Händelse: instance.on('refresh', function(meta) {}) utlöses när vissa objekt har ändrats: meta.type är remove eller configure, med meta.items eller meta.item.
Editorns egenskaper som en komponent kan läsa: DEF.cl.datasource (kodlistor och komponenter med follow), DEF.cl.paths, DEF.cl.list (alla instanser), DEF.cl.inputs, DEF.cl.outputs, DEF.cl.views och DEF.cl.apps (syskondesigner).
Följa: en config.path som börjar med @ betyder att komponenten följer en annan.

Publicera filen i din egen lista över komponenter (köra editorn) så kan ditt team använda den från editorn.