# Een component voor UI Builder bouwen

> Het formaat van een UI Builder-component: één HTML-bestand met zijn stijl, een script dat zijn metagegevens en een functie make exporteert, een instellingenformulier en een readme, plus de vlaggen, methoden en gebeurtenissen van een instantie.

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

Een UI Builder-component is **één HTML-bestand** met maximaal vier onderdelen. Het skelet dat de editor voor een nieuwe component biedt (`public/template.txt`) is een klok:

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

| Onderdeel | Wat het doet |
|---|---|
| `<style>` | de CSS van de component; `CLASS` wordt vervangen door een klasse die bij de component hoort |
| `<script>` | exporteert de metagegevens (`id`, `name`, `group`, `author`, `icon`, `version`, `config` met de standaardwaarden) en de functie `make` |
| `<readme>` | de hulptekst die in de editor wordt getoond (Markdown) |
| `<settings>` | het formulier dat `config` bewerkt: jComponent-invoervelden waarvan het `path` met `?.` begint, gevolgd door de sleutel van de configuratie |

## De functie make

`make(instance, config, element, cls, iseditor)` draait wanneer de component wordt aangemaakt:

- `instance` is de instantie van de component (`set`, `on`, `emit`, `state`...).
- `config` is zijn configuratie en `element` het jQuery-element om te vullen.
- `cls` is de klasse die `CLASS` verving en `iseditor` zegt of hij in de editor of in een gerenderd ontwerp wordt getekend (zo hoeft een timer bijvoorbeeld niet te draaien terwijl je ontwerpt).

Daarbinnen luister je naar gebeurtenissen (`instance.on('configure', ...)` wanneer de instellingen veranderen en `instance.on('destroy', ...)` om timers op te ruimen) en schrijf je de waarde met `instance.set('value', date)`.

## Metagegevens, vlaggen, methoden en gebeurtenissen

Uit de README van de editor:

- **Metagegevens:** `exports.follow = true` toont de component in het instellingenformulier *Path for reading/writing* (alleen voor de ontwerper) en `exports.hidden = true` verbergt hem uit de lijst met componenten.
- **Vlaggen van een instantie:** `instance.state.bind = true` bindt de component automatisch binnen een formulier, voor degene die gegevens lezen en schrijven; `instance.state.notify = true` zendt alleen de gebeurtenis `notify` uit wanneer de waarde verandert, in plaats van de waarde van de component direct in te stellen (de component Counter is het voorbeeld).
- **Methode:** `instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {})` leest een gegevensbron en geeft een array van `[id, name]`.
- **Gebeurtenis:** `instance.on('refresh', function(meta) {})` vuurt wanneer sommige objecten zijn veranderd: `meta.type` is `remove` of `configure`, met `meta.items` of `meta.item`.
- **Eigenschappen van de editor** die een component kan lezen: `DEF.cl.datasource` (codelijsten en componenten met `follow`), `DEF.cl.paths`, `DEF.cl.list` (alle instanties), `DEF.cl.inputs`, `DEF.cl.outputs`, `DEF.cl.views` en `DEF.cl.apps` (zusterontwerpen).
- **Volgen:** een `config.path` die met `@` begint, betekent dat de component een andere volgt.

Publiceer het bestand in je eigen lijst met componenten ([de editor uitvoeren](/en/uibuilder/run-the-designer/)) en je team kan het vanuit de editor gebruiken.