# Vytvorenie komponentu pre UI Builder

> Formát komponentu UI Builder: jeden súbor HTML so štýlom, skriptom, ktorý exportuje metadáta a funkciu make, formulárom nastavení a readme, plus príznaky, metódy a udalosti inštancie.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: sk
Content-SHA256: 01720757e8245ebd6eab251177b85a70f84860a946c4ae4a99304fd28adbf0be
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Komponent UI Builder je **jeden súbor HTML** s najviac štyrmi časťami. Kostra, ktorú editor ponúka pre nový komponent (`public/template.txt`), sú hodiny:

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

| Časť | Čo robí |
|---|---|
| `<style>` | CSS komponentu; `CLASS` sa nahradí triedou, ktorá patrí komponentu |
| `<script>` | exportuje metadáta (`id`, `name`, `group`, `author`, `icon`, `version`, `config` s predvolenými hodnotami) a funkciu `make` |
| `<readme>` | pomocný text zobrazený v editore (Markdown) |
| `<settings>` | formulár, ktorý upravuje `config`: vstupy jComponent, ktorých `path` začína `?.` nasledovaným kľúčom konfigurácie |

## Funkcia make

`make(instance, config, element, cls, iseditor)` sa spustí pri vytvorení komponentu:

- `instance` je inštancia komponentu (`set`, `on`, `emit`, `state`...).
- `config` je jeho konfigurácia a `element` je prvok jQuery, ktorý treba vyplniť.
- `cls` je trieda, ktorá nahradila `CLASS`, a `iseditor` hovorí, či sa kreslí v editore alebo vo vykreslenom dizajne (takže napríklad časovač nemusí bežať, kým navrhujete).

Vnútri počúvate udalosti (`instance.on('configure', ...)` pri zmene nastavení a `instance.on('destroy', ...)` na vyčistenie časovačov) a hodnotu zapisujete cez `instance.set('value', date)`.

## Metadáta, príznaky, metódy a udalosti

Z README editora:

- **Metadáta:** `exports.follow = true` zobrazí komponent vo formulári nastavení *Path for reading/writing* (iba pre návrhára) a `exports.hidden = true` ho skryje zo zoznamu komponentov.
- **Príznaky inštancie:** `instance.state.bind = true` automaticky naviaže komponent vo formulári, pre tie, ktoré čítajú a zapisujú dáta; `instance.state.notify = true` pri zmene hodnoty vyšle iba udalosť `notify` namiesto priameho nastavenia hodnoty komponentu (príkladom je komponent Counter).
- **Metóda:** `instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {})` číta zdroj dát a vráti pole `[id, name]`.
- **Udalosť:** `instance.on('refresh', function(meta) {})` sa spustí, keď sa zmenili niektoré objekty: `meta.type` je `remove` alebo `configure`, s `meta.items` alebo `meta.item`.
- **Vlastnosti editora**, ktoré môže komponent čítať: `DEF.cl.datasource` (zoznamy kódov a komponenty s `follow`), `DEF.cl.paths`, `DEF.cl.list` (všetky inštancie), `DEF.cl.inputs`, `DEF.cl.outputs`, `DEF.cl.views` a `DEF.cl.apps` (súrodenecké dizajny).
- **Nasledovanie:** `config.path`, ktorá začína `@`, znamená, že komponent nasleduje iný.

Publikujte súbor vo vlastnom zozname komponentov ([spustenie editora](/en/uibuilder/run-the-designer/)) a váš tím ho môže používať z editora.