# j-UIStudio

> Rendern Sie eine Flow UI Studio-Anwendung.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 160341c607364b82e5ea862e405a85be104d145a5726c291b8fae23e2ce9375b
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Die Komponente laden eine Flow UI Studio-Anwendung durch ihre konfigurierten Endpunkte ein. Stellen Sie die URL zu diesem Endpunkt und verwalten Metadaten oder Anwendungsupdates mit onmeta und onapp.

Diese Komponente gibt die App nach dem Total.js Flow UI Studio Schema zurück.


__Konfiguration__:

- `url {String}` ist das Navigationsendpunkt, das POST-Anfragen akzeptiert und JSON-Schrittmetadata zurückgibt
- `css {Boolean}` wendet den App-Stil auf das aktuelle Element an (Standard: `true`)
- `ssid {String}` optionale, fügt einen Sitzungsidentifikator zur URL für den Flow hinzu
- `title {Boolean}` optionale, `document.title` durch den App-Name neu geschrieben
- `plus {String}` optionale, es funktioniert nur mit `title:true` und es fügt `title - config.plus` hinzu
- `onmeta {String}` optionale, ein Link zum `function(meta)` erfährt eine Meta-Daten
- `onapp {String}` optionale, eine Verbindung zum `function(app)` erfährt ein neues UI-Design
- `origin {String}` optional
- `onrequest {String}` optionale, ein Link zum `function(payload)` kann Anfragedaten ändern
- `flowoutput {Boolean}` optionale, ermöglicht Ausgang nur aus FlowOutput Komponente (Default: `true`)

__Eigenschaften__:

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

__Gut zu wissen__:

Die Komponente erweitert die `app`-Instanz, indem sie die Eigenschaft von `breadcrumb {Array}` hinzufügt.

## Nutzung

```html
<ui-component name="uistudio"
  config="url:/api/studio/;onapp:studioLoaded;loading:false"></ui-component>
<script>
  function studioLoaded(app) {
    console.log(app);
  }
</script>
```

## Navigation Endpunkt

Die Anfrage trägt den aktuellen Navigationsstatus, einschließlich `origin`, `query`, eine optionale `ssid`, und die aktuelle `id`, `output` und `data`, wenn eine Anwendung einen Ausgang auslässt.

Zurück ein `id` für den Schritt und ein `url` für sein exportiertes UI Builder-Design:

```json
{
  "id": "home",
  "url": "/ui/home.json",
  "data": {}
}
```

Das Design, das aus dem UI Builder bei `/ui/home.json`Die Komponente herunterlädt es mit GET und erstellt die Anwendung durch `UIBuilder.build()`Wenn die Antwort eine `input`, die Komponente nennt die Anwendung Eingang mit `input` und `data`Die `onmeta` Callback erhält die Schritt-Reaktion und `onapp` Er erhält die erstellte Anforderung.

`loading:false` deaktiviert den Ladeindikator. Um ihn anzuzeigen, erklären Sie eine `j-Loading` Komponente und aktivieren Sie `loading`.

Quelle: [Total.js Komponenten](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIStudio). Copyright Peter Širka und Mitwirkende. [MIT-Lizenz](/knowledge-licenses.json).