# j-UIStudio

> Faça um fluxo de UI Studio.

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

O componente carrega uma aplicação Flow UI Studio através do seu endpoint configurado. definir o URL para esse endpoint e lidar com metadados ou atualizações de aplicativos com onmeta e onapp.

Este componente retorna o aplicativo de acordo com o esquema Total.js Flow UI Studio.


__Configuração__:

- `url {String}` é o ponto final de navegação que aceita pedidos POST e retorna metadados de passo JSON
- `css {Boolean}` aplica o estilo de aplicativo ao elemento atual (default: `true`)
- `ssid {String}` opcional, adiciona um identificador de sessão para o endereço URL do fluxo
- `title {Boolean}` opcional, reescreve `document.title` pelo nome da aplicação
- `plus {String}` opcional, funciona apenas com `title:true` e adiciona `title - config.plus`
- `onmeta {String}` opcional, um link para o `function(meta)` capta um meta de dados
- `onapp {String}` opcional, um link para o `function(app)` capta um novo design de UI
- `origin {String}` opcional
- `onrequest {String}` opcional, um link para o `function(payload)` pode modificar os dados de solicitação
- `flowoutput {Boolean}` opcional, permite a saída apenas do componente FlowOutput (default: `true`)

__Propriedades__:

- `component.app` Contém um `app` instância

__Bom para saber__:

O componente estende a instância de `app` adicionando a propriedade de `breadcrumb {Array}`.

## Uso

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

## Navegação Endpoint

O componente envia uma solicitação POST para o ponto final configurado. a solicitação carrega o estado de navegação atual, incluindo `origin`, `query`, um `ssid` opcional e o `id`, `output` e `data`, quando um aplicativo emite uma saída.

Retornar um `id` para o passo e um `url` para o seu design exportado UI Builder:

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

O projeto é exportado de UI Builder Em que `/ui/home.json`O componente descarrega com GET e cria a aplicação através `UIBuilder.build()`Se a resposta inclui um `input`O componente chama a entrada de aplicação com `input` e `data`O que `onmeta` O Callback recebe a resposta passo, e `onapp` Recebem o pedido criado.

`loading:false` Desativar o indicador de carga. para exibir, declarar a `j-Loading` Componentes e capacidades `loading`.

Fonte da fonte: [Componentes Total.js](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIStudio)Copyright Peter Širka e contribuintes. [A licença](/knowledge-licenses.json).