Eine Komponente für UI Builder bauen

UI Builder · uibuilder@1 uibuildercomponentsextensions

Eine UI-Builder-Komponente ist eine HTML-Datei mit bis zu vier Teilen. Das Grundgerüst, das der Editor für eine neue Komponente anbietet (public/template.txt), ist eine Uhr:

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

Teil	Was er tut
`<style>`	das CSS der Komponente; `CLASS` wird durch eine Klasse ersetzt, die zur Komponente gehört
`<script>`	exportiert die Metadaten (`id`, `name`, `group`, `author`, `icon`, `version`, `config` mit den Standardwerten) und die Funktion `make`
`<readme>`	der Hilfetext, der im Editor angezeigt wird (Markdown)
`<settings>`	das Formular, das `config` bearbeitet: jComponent-Eingaben, deren `path` mit `?.` beginnt, gefolgt vom Schlüssel der Konfiguration

Die Funktion make

make(instance, config, element, cls, iseditor) läuft, wenn die Komponente erzeugt wird:

instance ist die Instanz der Komponente (set, on, emit, state...).
config ist ihre Konfiguration und element das jQuery-Element, das zu füllen ist.
cls ist die Klasse, die CLASS ersetzt hat, und iseditor sagt, ob sie im Editor oder in einem gerenderten Design gezeichnet wird (ein Timer muss also zum Beispiel nicht laufen, solange Sie entwerfen).

Darin lauschen Sie auf Ereignisse (instance.on('configure', ...), wenn sich die Einstellungen ändern, und instance.on('destroy', ...), um Timer aufzuräumen) und schreiben den Wert mit instance.set('value', date).

Metadaten, Flags, Methoden und Ereignisse

Aus der README des Editors:

Metadaten: exports.follow = true zeigt die Komponente im Einstellungsformular Path for reading/writing (nur für den Designer), und exports.hidden = true blendet sie aus der Komponentenliste aus.
Flags einer Instanz: instance.state.bind = true bindet die Komponente automatisch innerhalb eines Formulars, für solche, die Daten lesen und schreiben; instance.state.notify = true sendet bei einer Wertänderung nur das Ereignis notify, statt den Wert der Komponente direkt zu setzen (das Beispiel ist die Komponente Counter).
Methode: instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {}) liest eine Datenquelle und liefert ein Array aus [id, name].
Ereignis: instance.on('refresh', function(meta) {}) wird ausgelöst, wenn sich Objekte geändert haben: meta.type ist remove oder configure, mit meta.items oder meta.item.
Eigenschaften des Editors, die eine Komponente lesen kann: DEF.cl.datasource (Codelisten und Komponenten mit follow), DEF.cl.paths, DEF.cl.list (alle Instanzen), DEF.cl.inputs, DEF.cl.outputs, DEF.cl.views und DEF.cl.apps (Geschwister-Designs).
Folgen: Ein config.path, das mit @ beginnt, bedeutet, dass die Komponente einer anderen folgt.

Veröffentlichen Sie die Datei in Ihrer eigenen Komponentenliste (den Editor ausführen), und Ihr Team kann sie im Editor nutzen.