# j-UIStudio

> Render une application de flux UI Studio.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 7a4ece60187481f5cd9947bca9c9b822d0a249f4722df58416f3884c0122a766
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Le composant charge une application Flow UI Studio à travers son endpoint configuré.Settez l'URL à ce endpoint et traitez les métadonnées ou les mises à jour de l'application avec onmeta et onapp.

Ce composant rend l'application selon le schéma Total.js Flow UI Studio.


__Configuration__ :

- `url {String}` est le point de navigation qui accepte les demandes POST et retourne les métadonnées étape JSON
- `css {Boolean}` applique le style d'application à l'élément actuel (défaut: `true`)
- `ssid {String}` optionnel, ajoute un identifiant de session à l'URL du flux
- `title {Boolean}` optionnel, réécrite `document.title` par le nom de l'application
- `plus {String}` optionnel, il ne fonctionne que avec `title:true` et il ajoute `title - config.plus`
- `onmeta {String}` optionnel, un lien vers le `function(meta)` capture un métadonnées
- `onapp {String}` optionnel, un lien vers le `function(app)` capte un nouveau design d'UI
- `origin {String}` Optionnel
- `onrequest {String}` optionnel, un lien vers le `function(payload)` peut modifier les données de demande
- `flowoutput {Boolean}` optionnel, permet des sorties uniquement de la composante FlowOutput (defaut: `true`)

__Propriétés__ :

- `component.app` contient une instance de `app`.

__Bon à savoir__ :

Le composant étend l'instance `app` en ajoutant la propriété `breadcrumb {Array}`.

## Utilisation

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

## Navigation Endpoint

La requête porte l'état de navigation actuel, y compris `origin`, `query`, un `ssid` facultatif et le `id`, `output` et `data` actuel lorsqu'une application émet une sortie.

Retourner un `id` pour le pas et un `url` pour son design exporté UI Builder:

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

Le design est exporté de UI Builder à `/ui/home.json`Le composant le télécharge avec GET et crée l'application par `UIBuilder.build()`Si la réponse inclut un `input`La composante appelle l’entrée de la demande avec `input` et `data`La `onmeta` La réaction de l'appel reçoit la réponse étape et `onapp` Il reçoit la demande créée.

`loading:false` détecter l'indicateur de charge. pour le montrer, déclarer un `j-Loading` Composition et capacité `loading`.

Source : [Composants Total.js](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIStudio). Copyright Peter Širka et contributeurs. [Licence MIT](/knowledge-licenses.json).