# j-UIStudio

> Vykreslite aplikáciu Flow UI Studio.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 1573180886d2a4d8d17c2cf6dfe8c0d73830319b1448eb46e30349fabca35412
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Komponent načíta aplikáciu Flow UI Studio cez jej nakonfigurovaný koncový bod. Nastavte url na tento koncový bod a spravujte metadáta alebo aktualizácie aplikácií pomocou onmeta a onapp.

Tento komponent vykresľuje aplikáciu podľa schémy Total.js Flow UI Studio.


__Konfigurácia__:

- `url {String}` je navigačná koncová bodka, ktorá prijíma požiadavky POST a vráti metadata kroku JSON
- `css {Boolean}` použije štýl aplikácie na aktuálny prvok (predvolené: `true`)
- `ssid {String}` voliteľné, pridá identifikátor relácie k adrese URL pre tok
- `title {Boolean}` voliteľné, prepíše `document.title` názvom aplikácie
- `plus {String}` voliteľné, funguje iba so `title:true` a pridáva `title - config.plus`
- `onmeta {String}` voliteľné, odkaz na `function(meta)` zachytáva metaúdaje
- `onapp {String}` voliteľné, odkaz na `function(app)` zachytáva nový dizajn používateľského rozhrania
- `origin {String}` voliteľné
- `onrequest {String}` voliteľné, odkaz na `function(payload)` môže upraviť údaje požiadavky
- `flowoutput {Boolean}` voliteľné, povoľuje výstupy iba z komponentu FlowOutput (predvolené: `true`)

__Vlastnosti__:

- `component.app` obsahuje inštanciu `app`

__Je dobré vedieť__:

Komponent rozširuje inštanciu `app` pridaním vlastnosti `breadcrumb {Array}`.

## Použitie

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

## Navigácia Endpoint

Požiadavka obsahuje aktuálny stav navigácie, vrátane `origin`, `query`, voliteľného `ssid`, a aktuálneho `id`, `output` a `data`, keď aplikácia vydáva výstup.

Vráťte `id` pre krok a `url` pre exportovaný dizajn UI Builder:

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

Využite dizajn, ktorý sa vyváža z UI Builder na `/ui/home.json`Komponent ju sťahuje s GET a vytvára aplikáciu prostredníctvom `UIBuilder.build()`Ak odpoveď obsahuje `input`, komponent volá aplikáciu vstup s `input` a `data`• The `onmeta` Callback dostane krok odpoveď, a `onapp` Využíva vytvorenú žiadosť.

`loading:false` deaktivuje indikátor nabíjania. aby ste ho zobrazili, vyhláste komponentu `j-Loading` a aktivujte `loading`.

Zdroj: [Total.js komponenty](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIStudio). Autorské právo Peter Širka a prispievatelia. [Licencia MIT](/knowledge-licenses.json).