# j-UIBuilder

> Diese Komponente rendert die über UI Builder entworfene Anwendung. Sie können die App über den in der Komponente angegebenen Pfad oder über die Option config.url laden. Der Pfad kann eine URL-Adresse zum JSO enthalten

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 812ce846ba8c9b7f8f8fa39d9d0c44a1ce473b0057dd3f176276fd67a3ec425f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Diese Komponente rendert die über UI Builder entworfene Anwendung. Sie können die App über den in der Komponente angegebenen `path` oder über die Option `config.url` laden. Der Pfad kann eine URL-Adresse zum App-Schema `JSON` oder zum App-Objekt (geparstes JSON) enthalten.


__Konfiguration__:

- `app {String}` ein Link zur Methode/Variable, in der die `app`-Instanz gespeichert wird
- `url {String}` ein Link zum App-Schema (muss im Format `json` vorliegen)
- `css {Boolean}` wendet den App-Stil auf das aktuelle Element an (Standard: `true`)
- `id {String}` überschreibt die App-ID

__Methoden__:

- `component.load(data)` Die Methode lädt `app` in das aktuelle Element

__Eigenschaften__:

- `component.app` enthält eine `app`-Instanz

## Wie gehe ich mit Daten um?

```html
<ui-component name="uibuilder" ... config="app:myapphandler"></ui-component>

<script>

	function myapphandler(app) {

		// app.component {jComponent}
		// app.schema {Object} uibuilder compiled design
		// app.schema.inputs {Array Objects}
		// app.schema.outputs {Array Objects}

		// How to capture data?
		app.on('output', function(meta) {
			// meta.id {String} output identifier
			// meta.data {Object} raw data from the builder
			// meta.app {Object} app instance
			// meta.instance {Object} which instance sent data?
			// meta.instanceid {String} an instance identifier
			// meta.component {Object} which component sent data?
			// meta.componentid {String} a component identifier
			// meta.err {String} optional, error handler (nullable)
			// meta.output {String} an output name
			// meta.note {String} optional, a note
			// meta.ref {String} an internal reference

			AJAX('POST /yourapi/', meta.data, function(response) {
				// What next?
			});

		});

		// How to inject data?
		// Example
		app.on('ready', function() {
			// First, you must know input identifier
			app.input('cidlm5caacg_load', { email: '@' }, console.log);
		});

	}

</script>
```

Verwenden Sie es mit `<ui-component name="uibuilder">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` (standardmäßig das CDN Componentator) herunter. Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<ui-component name="uibuilder" config="url:https://cdn.componentator.com/uibuilder/demo/render/dashboard.json"></ui-component>
```