Usar o ejecutar el editor de UI Builder y traer tus propios componentes

UI Builder · uibuilder@1 uibuilderinstallcomponents

El editor en la nube

La forma más rápida es la versión en la nube del editor, uibuilder.totaljs.com.

Ejecutarlo tú mismo

El editor es una pequeña aplicación Total.js 5 que sirve archivos estáticos. El README da tres pasos:

npm install
node index.js

Descarga primero el código fuente, desde github.com/totaljs/uibuilder. La aplicación tiene una ruta que sirve sus archivos (ROUTE('GET /*')) y el archivo config define el nombre y la CDN de la interfaz (cdn : //cdn.componentator.com). El editor no necesita base de datos.

Lo que contiene el repositorio:

Carpeta o archivo	Qué contiene
`public/`	el editor: `ui.js` y `func.js`, los formularios del editor (`forms/*.html`: ajustes, componentes, esquema, importar, código, rutas...) y las imágenes de las plantillas
`public/templates/`	los diseños iniciales: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` y `db.json`
`public/templates.json`	la lista de plantillas que ofrece el editor (existen una aplicación móvil y un panel HMI pero están desactivados)
`public/template.txt`	el esqueleto de un componente nuevo (crear un componente)
`public/render.txt`	una página que renderiza un diseño con jComponent 20
`cdn/uibuilder.min@1.js`	el runtime que renderiza un diseño (el objeto `UIBuilder` de la página)

Usar tu propia lista de componentes

El editor lee sus componentes de una lista. Puedes apuntarlo a tu propia lista añadiendo a la dirección el parámetro components, con la dirección de un archivo JSON como valor:

https://uibuilder.totaljs.com?components=URL_TO_YOUR_JSON_DB

Así es como una empresa distribuye su propia biblioteca de componentes sin tocar el editor.

De dónde vienen las piezas

El diseño que guarda el editor lleva, en su campo components, la dirección de la biblioteca que contiene cada componente, de modo que un diseño puede renderizarse más tarde por cualquiera que alcance esa dirección (el formato JSON).