Vykreslenie dizajnu UI Builder na vlastnej stránke

UI Builder · uibuilder@1 uibuilderrenderweb component

Dizajn je súbor JSON (formát) a jeho vykreslenie je jeden komponent. README editora ho ukazuje s webovým komponentom j-uibuilder:

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

config="url:..." je adresa súboru JSON dizajnu. Stránka potrebuje jComponent 20 a komponent uibuilder; samotný editor poskytuje na to hotovú stránku (public/render.txt), ktorá načíta jComponent z 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>

Potom sa dizajn objaví tam, kde dáte značku: formulár, dashboard, tabuľa toku. Keďže dizajn sú dáta, vaša aplikácia môže rozhodnúť, ktorý súbor zobraziť podľa používateľa alebo zákazníka.

Čo vám už dáva stránka Forge

Katalóg komponentov Forge má stránku uibuilder, vygenerovanú z repozitára komponentov, s jej readme a príkladom.
V editore je zoznam komponentov, ktorý dizajn používa, ten v jeho poli components; dizajn možno vykresliť iba tam, kde sa k týmto komponentom dá dostať.

Dobré vedieť

Na vykreslenie editor nepotrebujete: dokáže to ktorákoľvek stránka s jComponent 20.
Runtime, ktorý vykresľuje dizajn, je cdn/uibuilder.min@1.js v repozitári editora.
UI Studio, uvedené medzi šablónami aplikácií Total.js, stavia na rovnakej myšlienke (aplikácie Total.js).