ForgeComposants
fr

Composants

j-UIStudio

jComponent 20 · jcomponent@20 component

Le composant charge une application Flow UI Studio à travers son endpoint configuré.Settez l'URL à ce endpoint et traitez les métadonnées ou les mises à jour de l'application avec onmeta et onapp.

Ce composant rend l'application selon le schéma Total.js Flow UI Studio.


Configuration :

  • url {String} est le point de navigation qui accepte les demandes POST et retourne les métadonnées étape JSON
  • css {Boolean} applique le style d'application à l'élément actuel (défaut: true)
  • ssid {String} optionnel, ajoute un identifiant de session à l'URL du flux
  • title {Boolean} optionnel, réécrite document.title par le nom de l'application
  • plus {String} optionnel, il ne fonctionne que avec title:true et il ajoute title - config.plus
  • onmeta {String} optionnel, un lien vers le function(meta) capture un métadonnées
  • onapp {String} optionnel, un lien vers le function(app) capte un nouveau design d'UI
  • origin {String} Optionnel
  • onrequest {String} optionnel, un lien vers le function(payload) peut modifier les données de demande
  • flowoutput {Boolean} optionnel, permet des sorties uniquement de la composante FlowOutput (defaut: true)

Propriétés :

  • component.app contient une instance de app.

Bon à savoir :

Le composant étend l'instance app en ajoutant la propriété breadcrumb {Array}.

Utilisation

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

La requête porte l'état de navigation actuel, y compris origin, query, un ssid facultatif et le id, output et data actuel lorsqu'une application émet une sortie.

Retourner un id pour le pas et un url pour son design exporté UI Builder:

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

Le design est exporté de UI Builder à /ui/home.jsonLe composant le télécharge avec GET et crée l'application par UIBuilder.build()Si la réponse inclut un inputLa composante appelle l’entrée de la demande avec input et dataLa onmeta La réaction de l'appel reçoit la réponse étape et onapp Il reçoit la demande créée.

loading:false détecter l'indicateur de charge. pour le montrer, déclarer un j-Loading Composition et capacité loading.

Source : Composants Total.js. Copyright Peter Širka et contributeurs. Licence MIT.