# j-UIStudio

> Geef een flow UI Studio applicatie.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: nl
Content-SHA256: 2a85b99cfb707d48255bba0bc5387b99fa42f2c809790dbf3a1408c0adb50e89
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

De component loopt een Flow UI Studio-applicatie via zijn geconfigureerde eindpunt. Set url naar dat eindpunt en handleert metadata of applicatie-updates met onmeta en onapp.

Deze component geeft de app volgens het Total.js Flow UI Studio schema.


__Configuratie__:

- `url {String}` de navigatie-endpoint die POST-verzoeken accepteert en JSON-stapmetadata terugbrengt
- `css {Boolean}` is een app-stijl voor het huidige element (default: `true`)
- `ssid {String}` optioneel, voegt een sessie-identificator toe aan de URL voor de stroom
- `title {Boolean}` optioneel, herschrijft `document.title` door de app naam
- `plus {String}` optioneel, het werkt alleen met `title:true` en het voegt `title - config.plus` toe
- `onmeta {String}` optioneel, een link naar de `function(meta)` opneemt een meta-gegevens
- `onapp {String}` optioneel, een link naar de `function(app)` opneemt een nieuw UI-ontwerp
- `origin {String}` optie
- `onrequest {String}` optioneel, een link naar de `function(payload)` kan verzoeksgegevens wijzigen
- `flowoutput {Boolean}` optioneel, alleen uitgangsmaatregelen van de FlowOutput-component (default: `true`)

__eigenschappen__:

- `component.app` bevatten een `app` Instantie

__Goed om te weten__:

De component vergroot de `app`-instantie door het toevoegen van de eigenschap van `breadcrumb {Array}`.

## Gebruik

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

## Navigatie eindpunt

Het bestanddeel stuurt een POST-verzoek naar het geconfigureerde eindpunt. de verzoek draagt de huidige navigatiestatus, waaronder `origin`, `query`, een optionele `ssid`, en de huidige `id`, `output` en `data` wanneer een aanvraag een uitgang geeft.

Terug een `id` voor de stap en een `url` voor zijn geëxporteerde UI Builder ontwerp:

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

Het ontwerp dat wordt uitgevoerd uit UI Builder bij `/ui/home.json`De component downloadt het met GET en creëert de applicatie door `UIBuilder.build()`Als de reactie een `input`De component noemt de applicatie in met `input` en `data`De `onmeta` Callback ontvangt de reactie van de stap, en `onapp` ontvangt de gecreëerde aanvraaginstantie.

`loading:false` schakelt de lading-indicator uit. Om deze te tonen, verklaart u een `j-Loading` component en maakt u `loading` in staat.

De bron: [Total.js componenten](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIStudio)Copyright Peter Širka en bijdragen. [Mijn licentie](/knowledge-licenses.json).