Een component voor UI Builder bouwen

UI Builder · uibuilder@1 uibuildercomponentsextensions

Een UI Builder-component is één HTML-bestand met maximaal vier onderdelen. Het skelet dat de editor voor een nieuwe component biedt (public/template.txt) is een klok:

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

Onderdeel	Wat het doet
`<style>`	de CSS van de component; `CLASS` wordt vervangen door een klasse die bij de component hoort
`<script>`	exporteert de metagegevens (`id`, `name`, `group`, `author`, `icon`, `version`, `config` met de standaardwaarden) en de functie `make`
`<readme>`	de hulptekst die in de editor wordt getoond (Markdown)
`<settings>`	het formulier dat `config` bewerkt: jComponent-invoervelden waarvan het `path` met `?.` begint, gevolgd door de sleutel van de configuratie

De functie make

make(instance, config, element, cls, iseditor) draait wanneer de component wordt aangemaakt:

instance is de instantie van de component (set, on, emit, state...).
config is zijn configuratie en element het jQuery-element om te vullen.
cls is de klasse die CLASS verving en iseditor zegt of hij in de editor of in een gerenderd ontwerp wordt getekend (zo hoeft een timer bijvoorbeeld niet te draaien terwijl je ontwerpt).

Daarbinnen luister je naar gebeurtenissen (instance.on('configure', ...) wanneer de instellingen veranderen en instance.on('destroy', ...) om timers op te ruimen) en schrijf je de waarde met instance.set('value', date).

Metagegevens, vlaggen, methoden en gebeurtenissen

Uit de README van de editor:

Metagegevens: exports.follow = true toont de component in het instellingenformulier Path for reading/writing (alleen voor de ontwerper) en exports.hidden = true verbergt hem uit de lijst met componenten.
Vlaggen van een instantie: instance.state.bind = true bindt de component automatisch binnen een formulier, voor degene die gegevens lezen en schrijven; instance.state.notify = true zendt alleen de gebeurtenis notify uit wanneer de waarde verandert, in plaats van de waarde van de component direct in te stellen (de component Counter is het voorbeeld).
Methode: instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {}) leest een gegevensbron en geeft een array van [id, name].
Gebeurtenis: instance.on('refresh', function(meta) {}) vuurt wanneer sommige objecten zijn veranderd: meta.type is remove of configure, met meta.items of meta.item.
Eigenschappen van de editor die een component kan lezen: DEF.cl.datasource (codelijsten en componenten met follow), DEF.cl.paths, DEF.cl.list (alle instanties), DEF.cl.inputs, DEF.cl.outputs, DEF.cl.views en DEF.cl.apps (zusterontwerpen).
Volgen: een config.path die met @ begint, betekent dat de component een andere volgt.

Publiceer het bestand in je eigen lijst met componenten (de editor uitvoeren) en je team kan het vanuit de editor gebruiken.