# Budowa komponentu dla UI Builder

> Format komponentu UI Builder: jeden plik HTML ze stylem, skryptem eksportującym metadane i funkcję make, formularzem ustawień i readme, plus flagi, metody i zdarzenia instancji.

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

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:

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

| 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](/en/uibuilder/run-the-designer/)), a Twój zespół będzie mógł go używać z edytora.