# Bygg en komponent för UI Builder

> Formatet på en UI Builder-komponent: en HTML-fil med sin stil, ett skript som exporterar dess metadata och en funktion make, ett inställningsformulär och en readme, plus flaggor, metoder och händelser för en instans.

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

En UI Builder-komponent är **en HTML-fil** med upp till fyra delar. Skelettet som editorn erbjuder för en ny komponent (`public/template.txt`) är en klocka:

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

| Del | Vad den gör |
|---|---|
| `<style>` | komponentens CSS; `CLASS` ersätts av en klass som tillhör komponenten |
| `<script>` | exporterar metadata (`id`, `name`, `group`, `author`, `icon`, `version`, `config` med standardvärdena) och funktionen `make` |
| `<readme>` | hjälptexten som visas i editorn (Markdown) |
| `<settings>` | formuläret som redigerar `config`: jComponent-fält vars `path` börjar med `?.` följt av konfigurationens nyckel |

## Funktionen make

`make(instance, config, element, cls, iseditor)` körs när komponenten skapas:

- `instance` är komponentens instans (`set`, `on`, `emit`, `state`...).
- `config` är dess konfiguration och `element` jQuery-elementet att fylla.
- `cls` är klassen som ersatte `CLASS` och `iseditor` talar om om den ritas i editorn eller i en renderad design (så en timer behöver till exempel inte köras medan du designar).

Inuti lyssnar du på händelser (`instance.on('configure', ...)` när inställningarna ändras och `instance.on('destroy', ...)` för att städa timers) och skriver värdet med `instance.set('value', date)`.

## Metadata, flaggor, metoder och händelser

Från editorns README:

- **Metadata:** `exports.follow = true` visar komponenten i inställningsformuläret *Path for reading/writing* (bara för designern) och `exports.hidden = true` döljer den från listan över komponenter.
- **Flaggor för en instans:** `instance.state.bind = true` binder komponenten automatiskt i ett formulär, för de som läser och skriver data; `instance.state.notify = true` skickar bara händelsen `notify` när värdet ändras, i stället för att sätta komponentens värde direkt (komponenten Counter är exemplet).
- **Metod:** `instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {})` läser en datakälla och ger en array av `[id, name]`.
- **Händelse:** `instance.on('refresh', function(meta) {})` utlöses när vissa objekt har ändrats: `meta.type` är `remove` eller `configure`, med `meta.items` eller `meta.item`.
- **Editorns egenskaper** som en komponent kan läsa: `DEF.cl.datasource` (kodlistor och komponenter med `follow`), `DEF.cl.paths`, `DEF.cl.list` (alla instanser), `DEF.cl.inputs`, `DEF.cl.outputs`, `DEF.cl.views` och `DEF.cl.apps` (syskondesigner).
- **Följa:** en `config.path` som börjar med `@` betyder att komponenten följer en annan.

Publicera filen i din egen lista över komponenter ([köra editorn](/en/uibuilder/run-the-designer/)) så kan ditt team använda den från editorn.