Визуализиране на дизайн на UI Builder във вашата страница

UI Builder · uibuilder@1 uibuilderrenderweb component

Дизайнът е JSON файл (форматът), а визуализирането му е един компонент. README на редактора го показва с уеб компонента j-uibuilder:

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

config="url:..." е адресът на JSON файла на дизайна. Страницата се нуждае от jComponent 20 и от компонента uibuilder; самият редактор сервира готова страница за това (public/render.txt), която зарежда jComponent от 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>

Тогава дизайнът се появява там, където поставите тага: форма, табло, дъска на поток. Тъй като дизайнът са данни, приложението ви може да реши кой файл да покаже за потребител или за клиент.

Какво вече ви дава страницата на Forge

Каталогът с компоненти на Forge има страницата uibuilder, генерирана от хранилището на компонентите, с нейния readme и пример.
В редактора списъкът с компоненти, който ползва дизайнът, е този в полето му components; дизайн може да се визуализира само там, където тези компоненти са достъпни.

Добре е да знаете

Не ви трябва редакторът, за да визуализирате: всяка страница с jComponent 20 може да го направи.
Средата за изпълнение, която визуализира дизайн, е cdn/uibuilder.min@1.js в хранилището на редактора.
UI Studio, изброен сред шаблоните за приложения на Total.js, се основава на същата идея (приложенията на Total.js).