# Vytvoření komponenty pro UI Builder

> Formát komponenty UI Builder: jeden soubor HTML se stylem, skriptem, který exportuje metadata a funkci make, formulářem nastavení a readme, plus příznaky, metody a události instance.

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

Komponenta UI Builder je **jeden soubor HTML** s nejvýše čtyřmi částmi. Kostra, kterou editor nabízí pro novou komponentu (`public/template.txt`), jsou 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>
```

| Část | Co dělá |
|---|---|
| `<style>` | CSS komponenty; `CLASS` se nahradí třídou, která patří komponentě |
| `<script>` | exportuje metadata (`id`, `name`, `group`, `author`, `icon`, `version`, `config` s výchozími hodnotami) a funkci `make` |
| `<readme>` | nápověda zobrazená v editoru (Markdown) |
| `<settings>` | formulář, který upravuje `config`: vstupy jComponent, jejichž `path` začíná `?.` následovaným klíčem konfigurace |

## Funkce make

`make(instance, config, element, cls, iseditor)` se spustí při vytvoření komponenty:

- `instance` je instance komponenty (`set`, `on`, `emit`, `state`...).
- `config` je její konfigurace a `element` je prvek jQuery, který je třeba vyplnit.
- `cls` je třída, která nahradila `CLASS`, a `iseditor` říká, zda se kreslí v editoru, nebo ve vykresleném návrhu (takže například časovač nemusí běžet, dokud navrhujete).

Uvnitř posloucháte události (`instance.on('configure', ...)` při změně nastavení a `instance.on('destroy', ...)` k úklidu časovačů) a hodnotu zapisujete přes `instance.set('value', date)`.

## Metadata, příznaky, metody a události

Z README editoru:

- **Metadata:** `exports.follow = true` zobrazí komponentu ve formuláři nastavení *Path for reading/writing* (jen pro návrháře) a `exports.hidden = true` ji skryje ze seznamu komponent.
- **Příznaky instance:** `instance.state.bind = true` automaticky naváže komponentu ve formuláři, pro ty, které čtou a zapisují data; `instance.state.notify = true` při změně hodnoty vyšle jen událost `notify` místo přímého nastavení hodnoty komponenty (příkladem je komponenta Counter).
- **Metoda:** `instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {})` čte zdroj dat a vrací pole `[id, name]`.
- **Událost:** `instance.on('refresh', function(meta) {})` se spustí, když se změnily některé objekty: `meta.type` je `remove` nebo `configure`, s `meta.items` nebo `meta.item`.
- **Vlastnosti editoru**, které komponenta může číst: `DEF.cl.datasource` (seznamy kódů a komponenty s `follow`), `DEF.cl.paths`, `DEF.cl.list` (všechny instance), `DEF.cl.inputs`, `DEF.cl.outputs`, `DEF.cl.views` a `DEF.cl.apps` (sourozenecké návrhy).
- **Následování:** `config.path`, která začíná `@`, znamená, že komponenta následuje jinou.

Publikujte soubor ve vlastním seznamu komponent ([spuštění editoru](/en/uibuilder/run-the-designer/)) a váš tým jej může používat z editoru.