Budowa komponentu dla UI Builder

UI Builder · uibuilder@1 uibuildercomponentsextensions

Komponent UI Builder to jeden plik HTML z maksymalnie czterema częściami. Szkielet, który edytor oferuje dla nowego komponentu (public/template.txt), to zegar:

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

Część	Co robi
`<style>`	CSS komponentu; `CLASS` jest zastępowane klasą należącą do komponentu
`<script>`	eksportuje metadane (`id`, `name`, `group`, `author`, `icon`, `version`, `config` z wartościami domyślnymi) i funkcję `make`
`<readme>`	tekst pomocy wyświetlany w edytorze (Markdown)
`<settings>`	formularz edytujący `config`: wejścia jComponent, których `path` zaczyna się od `?.` i klucza konfiguracji

Funkcja make

make(instance, config, element, cls, iseditor) uruchamia się przy tworzeniu komponentu:

instance to instancja komponentu (set, on, emit, state...).
config to jego konfiguracja, a element to element jQuery do wypełnienia.
cls to klasa, która zastąpiła CLASS, a iseditor mówi, czy jest rysowany w edytorze, czy w wyrenderowanym projekcie (więc na przykład licznik czasu nie musi działać podczas projektowania).

Wewnątrz nasłuchujesz zdarzeń (instance.on('configure', ...) przy zmianie ustawień i instance.on('destroy', ...) do sprzątania timerów) i zapisujesz wartość przez instance.set('value', date).

Metadane, flagi, metody i zdarzenia

Z README edytora:

Metadane: exports.follow = true pokazuje komponent w formularzu ustawień Path for reading/writing (tylko dla projektanta), a exports.hidden = true ukrywa go na liście komponentów.
Flagi instancji: instance.state.bind = true automatycznie wiąże komponent wewnątrz formularza, dla tych, które odczytują i zapisują dane; instance.state.notify = true emituje tylko zdarzenie notify przy zmianie wartości, zamiast bezpośrednio ustawiać wartość komponentu (przykładem jest komponent Counter).
Metoda: instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {}) odczytuje źródło danych i zwraca tablicę [id, name].
Zdarzenie: instance.on('refresh', function(meta) {}) uruchamia się, gdy zmieniły się jakieś obiekty: meta.type to remove lub configure, z meta.items lub meta.item.
Właściwości edytora, które komponent może odczytać: DEF.cl.datasource (listy kodów i komponenty z follow), DEF.cl.paths, DEF.cl.list (wszystkie instancje), DEF.cl.inputs, DEF.cl.outputs, DEF.cl.views i DEF.cl.apps (projekty siostrzane).
Podążanie: config.path zaczynające się od @ oznacza, że komponent podąża za innym.

Opublikuj plik na własnej liście komponentów (uruchamianie edytora), a Twój zespół będzie mógł go używać z edytora.