Randează un design UI Builder în propria pagină

UI Builder · uibuilder@1 uibuilderrenderweb component

Un design este un fișier JSON (formatul), iar randarea lui înseamnă o singură componentă. README-ul editorului îl arată cu web component-ul j-uibuilder:

<ui-component name="uibuilder" config="url:https://uibuilder.totaljs.com/render.json"></ui-component>

config="url:..." este adresa fișierului JSON al designului. Pagina are nevoie de jComponent 20 și de componenta uibuilder; editorul însuși servește o pagină gata făcută pentru asta (public/render.txt) care încarcă jComponent de pe CDN:

<link href="https://cdn.componentator.com/spa.min@20.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.componentator.com/spa.min@20.js"></script>

Apoi designul apare acolo unde pui eticheta: un formular, un tablou de bord, o tablă a unui flux. Deoarece designul este date, aplicația ta poate decide ce fișier să afișeze pentru fiecare utilizator sau client.

Ce îți oferă deja pagina Forge

Catalogul de componente al Forge are pagina uibuilder, generată din depozitul componentelor, cu readme-ul și exemplul ei.
În editor, lista de componente pe care o folosește un design este cea din câmpul lui components; un design poate fi randat doar acolo unde acele componente pot fi accesate.

Bine de știut

Nu ai nevoie de editor pentru a randa: orice pagină cu jComponent 20 o poate face.
Runtime-ul care randează un design este cdn/uibuilder.min@1.js din depozitul editorului.
UI Studio, listat printre șabloanele de aplicații Total.js, se bazează pe aceeași idee (aplicațiile Total.js).