# j-UIStudio

> Renderar en Flow UI Studio ansökan.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sv
Content-SHA256: 0c2df846677f07f46b2ac10374260a7476d6d3d22955fb88347fcac377d46978
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Komponenten laddar en Flow UI Studio-ansökan genom dess konfigurerade slutpunkt. ställa in url till det slutpunkten och hantera metadata eller applikationsuppdateringar med onmeta och onapp.

Denna komponent levererar appen enligt Total.js Flow UI Studio schema.


__Konfigurera__:

- `url {String}`: Navigationsändpunkten som accepterar POST-förfrågningar och returnerar JSON-stegmetadata
- `css {Boolean}` tillämpar app-stil på det aktuella elementet (default: `true`)
- `ssid {String}` är valfritt och lägger till en session-identifierare till URL:n för flödet
- `title {Boolean}` är valfritt, återskriver `document.title` av appen
- `plus {String}` är valfritt, det fungerar endast med `title:true` och det lägger till `title - config.plus`
- `onmeta {String}` valfritt, en länk till `function(meta)` fångar en meta-data
- `onapp {String}` valfritt, en länk till `function(app)` fångar en ny UI-design
- `origin {String}` alternativ
- `onrequest {String}` valfritt, en länk till `function(payload)` kan ändra begäran data
- `flowoutput {Boolean}` är valfritt, möjliggör utgångar endast från FlowOutput-komponenten (default: `true`)

__ägodelar__:

- `component.app` innehåller en instans av `app`

__Bra att veta__:

Komponenten utökar `app`-instans genom att lägga till `breadcrumb {Array}` egenskap.

## Användning

```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

Beståndsdelen skickar en POST-förfrågan till den konfigurerade slutpunkten. Förfrågan bär den aktuella navigationsstatus, inklusive `origin`, `query`, en valfri `ssid`, och den aktuellt `id`, `output` och `data` när en ansökan utfärdar en output.

Återställ en `id` för steget och en `url` för dess exporterade UI Builder-design:

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

Design som exporteras från UI Builder på `/ui/home.json`Komponenten ladda ner den med GET och skapar appen genom `UIBuilder.build()`Om svaret innehåller en `input`, komponenten kallar ansökan input med `input` och `data`Den . `onmeta` Callback får steget svar, och `onapp` Den skapade ansökningsinstansen.

`loading:false` inaktiverar laddningsindikator. för att visa det, deklarera en `j-Loading` komponenter och möjliggör `loading`.

Källa till: [Total.js komponenter](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIStudio)Copyright Peter Širka och bidragsgivare. [Min licens](/knowledge-licenses.json).