# Eine Komponente für UI Builder bauen

> Das Format einer UI-Builder-Komponente: eine HTML-Datei mit Stil, einem Skript, das Metadaten und eine Funktion make exportiert, einem Einstellungsformular und einem Readme, plus die Flags, Methoden und Ereignisse einer Instanz.

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

Eine UI-Builder-Komponente ist **eine HTML-Datei** mit bis zu vier Teilen. Das Grundgerüst, das der Editor für eine neue Komponente anbietet (`public/template.txt`), ist eine Uhr:

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

| Teil | Was er tut |
|---|---|
| `<style>` | das CSS der Komponente; `CLASS` wird durch eine Klasse ersetzt, die zur Komponente gehört |
| `<script>` | exportiert die Metadaten (`id`, `name`, `group`, `author`, `icon`, `version`, `config` mit den Standardwerten) und die Funktion `make` |
| `<readme>` | der Hilfetext, der im Editor angezeigt wird (Markdown) |
| `<settings>` | das Formular, das `config` bearbeitet: jComponent-Eingaben, deren `path` mit `?.` beginnt, gefolgt vom Schlüssel der Konfiguration |

## Die Funktion make

`make(instance, config, element, cls, iseditor)` läuft, wenn die Komponente erzeugt wird:

- `instance` ist die Instanz der Komponente (`set`, `on`, `emit`, `state`...).
- `config` ist ihre Konfiguration und `element` das jQuery-Element, das zu füllen ist.
- `cls` ist die Klasse, die `CLASS` ersetzt hat, und `iseditor` sagt, ob sie im Editor oder in einem gerenderten Design gezeichnet wird (ein Timer muss also zum Beispiel nicht laufen, solange Sie entwerfen).

Darin lauschen Sie auf Ereignisse (`instance.on('configure', ...)`, wenn sich die Einstellungen ändern, und `instance.on('destroy', ...)`, um Timer aufzuräumen) und schreiben den Wert mit `instance.set('value', date)`.

## Metadaten, Flags, Methoden und Ereignisse

Aus der README des Editors:

- **Metadaten:** `exports.follow = true` zeigt die Komponente im Einstellungsformular *Path for reading/writing* (nur für den Designer), und `exports.hidden = true` blendet sie aus der Komponentenliste aus.
- **Flags einer Instanz:** `instance.state.bind = true` bindet die Komponente automatisch innerhalb eines Formulars, für solche, die Daten lesen und schreiben; `instance.state.notify = true` sendet bei einer Wertänderung nur das Ereignis `notify`, statt den Wert der Komponente direkt zu setzen (das Beispiel ist die Komponente Counter).
- **Methode:** `instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {})` liest eine Datenquelle und liefert ein Array aus `[id, name]`.
- **Ereignis:** `instance.on('refresh', function(meta) {})` wird ausgelöst, wenn sich Objekte geändert haben: `meta.type` ist `remove` oder `configure`, mit `meta.items` oder `meta.item`.
- **Eigenschaften des Editors**, die eine Komponente lesen kann: `DEF.cl.datasource` (Codelisten und Komponenten mit `follow`), `DEF.cl.paths`, `DEF.cl.list` (alle Instanzen), `DEF.cl.inputs`, `DEF.cl.outputs`, `DEF.cl.views` und `DEF.cl.apps` (Geschwister-Designs).
- **Folgen:** Ein `config.path`, das mit `@` beginnt, bedeutet, dass die Komponente einer anderen folgt.

Veröffentlichen Sie die Datei in Ihrer eigenen Komponentenliste ([den Editor ausführen](/en/uibuilder/run-the-designer/)), und Ihr Team kann sie im Editor nutzen.