# Construiește o componentă pentru UI Builder

> Formatul unei componente UI Builder: un fișier HTML cu stilul ei, un script care exportă metadatele și o funcție make, un formular de setări și un readme, plus indicatorii, metodele și evenimentele unei instanțe.

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

O componentă UI Builder este **un fișier HTML** cu cel mult patru părți. Scheletul pe care editorul îl oferă pentru o componentă nouă (`public/template.txt`) este un ceas:

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

| Partea | Ce face |
|---|---|
| `<style>` | CSS-ul componentei; `CLASS` este înlocuit cu o clasă care aparține componentei |
| `<script>` | exportă metadatele (`id`, `name`, `group`, `author`, `icon`, `version`, `config` cu valorile implicite) și funcția `make` |
| `<readme>` | textul de ajutor afișat în editor (Markdown) |
| `<settings>` | formularul care editează `config`: intrări jComponent al căror `path` începe cu `?.` urmat de cheia configurației |

## Funcția make

`make(instance, config, element, cls, iseditor)` rulează când este creată componenta:

- `instance` este instanța componentei (`set`, `on`, `emit`, `state`...).
- `config` este configurația ei, iar `element` elementul jQuery de completat.
- `cls` este clasa care a înlocuit `CLASS`, iar `iseditor` spune dacă este desenată în editor sau într-un design randat (astfel, de exemplu, un temporizator nu trebuie să ruleze cât timp proiectezi).

În interior asculți evenimente (`instance.on('configure', ...)` când se schimbă setările și `instance.on('destroy', ...)` pentru a curăța temporizatoarele) și scrii valoarea cu `instance.set('value', date)`.

## Metadate, indicatori, metode și evenimente

Din README-ul editorului:

- **Metadate:** `exports.follow = true` arată componenta în formularul de setări *Path for reading/writing* (doar pentru designer), iar `exports.hidden = true` o ascunde din lista de componente.
- **Indicatori ai unei instanțe:** `instance.state.bind = true` leagă automat componenta într-un formular, pentru cele care citesc și scriu date; `instance.state.notify = true` emite doar evenimentul `notify` când se schimbă valoarea, în loc să seteze direct valoarea componentei (componenta Counter este exemplul).
- **Metodă:** `instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {})` citește o sursă de date și returnează un array de `[id, name]`.
- **Eveniment:** `instance.on('refresh', function(meta) {})` se declanșează când s-au schimbat unele obiecte: `meta.type` este `remove` sau `configure`, cu `meta.items` sau `meta.item`.
- **Proprietăți ale editorului** pe care o componentă le poate citi: `DEF.cl.datasource` (liste de coduri și componente cu `follow`), `DEF.cl.paths`, `DEF.cl.list` (toate instanțele), `DEF.cl.inputs`, `DEF.cl.outputs`, `DEF.cl.views` și `DEF.cl.apps` (designuri surori).
- **Urmărire:** un `config.path` care începe cu `@` înseamnă că componenta urmează alta.

Publică fișierul în propria listă de componente ([rularea editorului](/en/uibuilder/run-the-designer/)) și echipa ta îl poate folosi din editor.