Komponens készítése az UI Builderhez

UI Builder · uibuilder@1 uibuildercomponentsextensions

Az UI Builder komponens egyetlen HTML fájl legfeljebb négy résszel. A vázlat, amelyet a szerkesztő egy új komponenshez kínál (public/template.txt), egy óra:

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

Rész	Mit csinál
`<style>`	a komponens CSS-e; a `CLASS` helyére a komponenshez tartozó osztály kerül
`<script>`	exportálja a metaadatokat (`id`, `name`, `group`, `author`, `icon`, `version`, `config` az alapértelmezett értékekkel) és a `make` függvényt
`<readme>`	a szerkesztőben megjelenő súgószöveg (Markdown)
`<settings>`	a `config` értéket szerkesztő űrlap: jComponent beviteli mezők, amelyek `path` értéke `?.` kezdetű, utána a konfiguráció kulcsa

A make függvény

A make(instance, config, element, cls, iseditor) a komponens létrehozásakor fut le:

Az instance a komponens példánya (set, on, emit, state...).
A config a konfigurációja, az element pedig a kitöltendő jQuery elem.
A cls a CLASS helyére került osztály, az iseditor pedig megmondja, hogy a szerkesztőben vagy egy megjelenített tervben rajzolódik-e (így például egy időzítőnek nem kell futnia, amíg tervezel).

Benne eseményeket figyelsz (instance.on('configure', ...), ha a beállítások változnak, és instance.on('destroy', ...) az időzítők takarításához), az értéket pedig az instance.set('value', date) hívással írod.

Metaadatok, jelzők, metódusok és események

A szerkesztő README fájljából:

Metaadatok: az exports.follow = true megjeleníti a komponenst a Path for reading/writing beállítási űrlapon (csak a tervezőnek), az exports.hidden = true pedig elrejti a komponenslistából.
Egy példány jelzői: az instance.state.bind = true automatikusan köti a komponenst egy űrlapon belül, azoknál, amelyek adatot olvasnak és írnak; az instance.state.notify = true az érték változásakor csak a notify eseményt bocsátja ki, ahelyett hogy közvetlenül beállítaná a komponens értékét (a példa a Counter komponens).
Metódus: az instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {}) beolvas egy adatforrást, és [id, name] párok tömbjét adja.
Esemény: az instance.on('refresh', function(meta) {}) akkor sül el, ha néhány objektum megváltozott: a meta.type értéke remove vagy configure, a meta.items vagy meta.item mezővel.
A szerkesztő tulajdonságai, amelyeket egy komponens olvashat: DEF.cl.datasource (kódlisták és follow komponensek), DEF.cl.paths, DEF.cl.list (az összes példány), DEF.cl.inputs, DEF.cl.outputs, DEF.cl.views és DEF.cl.apps (testvér tervek).
Követés: a @ jellel kezdődő config.path azt jelenti, hogy a komponens egy másikat követ.

Tedd közzé a fájlt a saját komponenslistádban (a szerkesztő futtatása), és a csapatod használhatja a szerkesztőből.