# Komponens készítése az UI Builderhez

> Az UI Builder komponens formátuma: egy HTML fájl a saját stílusával, egy szkripttel, amely exportálja a metaadatait és a make függvényt, egy beállítási űrlappal és egy readme-vel, valamint egy példány jelzői, metódusai és eseményei.

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

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:

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

| 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](/en/uibuilder/run-the-designer/)), és a csapatod használhatja a szerkesztőből.