# j-UIStudio

> Renderice una aplicación Flow UI Studio.

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

El componente carga una aplicación Flow UI Studio a través de su punto final configurado. Configure la URL para ese punto final y maneje los metadatos o las actualizaciones de la aplicación con onmeta y onapp.

Este componente representa la aplicación según el esquema Total.js Flow UI Studio.


__Configuración__:

- `url {String}` el punto final de navegación que acepta las solicitudes POST y devuelve los metadatos de paso JSON
- `css {Boolean}` aplica el estilo de la aplicación al elemento actual (predeterminado: `true`)
- `ssid {String}` opcional, agrega un identificador de sesión a la dirección URL del flujo
- `title {Boolean}` opcional, reescribe `document.title` por el nombre de la aplicación
- `plus {String}` opcional, funciona solo con `title:true` y agrega `title - config.plus`
- `onmeta {String}` opcional, un enlace a `function(meta)` captura metadatos
- `onapp {String}` opcional, un enlace a `function(app)` captura un nuevo diseño de interfaz de usuario
- `origin {String}` opcional
- `onrequest {String}` opcional, un enlace al `function(payload)` puede modificar los datos de la solicitud
- `flowoutput {Boolean}` opcional, habilita salidas solo desde el componente FlowOutput (predeterminado: `true`)

__Propiedades__:

- `component.app` contiene una instancia `app`

__Es bueno saberlo__:

El componente amplía la instancia `app` agregando la propiedad `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>
```

## El punto de navegación

El componente envía una solicitud POST al punto final configurado. la solicitud lleva el estado de navegación actual, incluyendo `origin`, `query`, un `ssid` opcional y el actual `id`, `output` y `data` cuando una aplicación emite una salida.

Devolver un `id` para el paso y un `url` para su diseño exportado UI Builder:

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

El diseño que se exporta de UI Builder En el `/ui/home.json`El componente lo descarga con GET y crea la aplicación a través de `UIBuilder.build()`Si la respuesta incluye una `input`El componente llama la entrada de la aplicación con `input` y `data`El `onmeta` El llamado recibe la respuesta de paso, y `onapp` Recibe la solicitud creada.

`loading:false` Desactivar el indicador de carga. para mostrarlo, declarar un `j-Loading` Componentes y capacidades `loading`.

Fuente: [Total.js componentes](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-UIStudio). Copyright Peter Širka y colaboradores. [Licencia MIT](/knowledge-licenses.json).