Usare o eseguire l’editor di UI Builder e portare i tuoi componenti

UI Builder · uibuilder@1 uibuilderinstallcomponents

L’editor cloud

Il modo più rapido è la versione cloud dell’editor, uibuilder.totaljs.com.

Eseguirlo tu stesso

L’editor è una piccola applicazione Total.js 5 che serve file statici. Il README indica tre passi:

npm install
node index.js

Scarica prima il codice sorgente da github.com/totaljs/uibuilder. L’applicazione ha una rotta che serve i suoi file (ROUTE('GET /*')) e il file config imposta il nome e la CDN dell’interfaccia (cdn : //cdn.componentator.com). L’editor non richiede un database.

Cosa contiene il repository:

Cartella o file	Cosa contiene
`public/`	l’editor: `ui.js` e `func.js`, i moduli dell’editor (`forms/*.html`: impostazioni, componenti, schema, importazione, codice, percorsi...) e le immagini dei modelli
`public/templates/`	i design iniziali: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` e `db.json`
`public/templates.json`	l’elenco dei modelli che l’editor offre (esistono un’app mobile e un pannello HMI ma sono disattivati)
`public/template.txt`	lo scheletro di un nuovo componente (creare un componente)
`public/render.txt`	una pagina che renderizza un design con jComponent 20
`cdn/uibuilder.min@1.js`	il runtime che renderizza un design (l’oggetto `UIBuilder` della pagina)

Usare il tuo elenco di componenti

L’editor legge i suoi componenti da un elenco. Puoi puntarlo al tuo elenco aggiungendo all’indirizzo il parametro components, con l’indirizzo di un file JSON come valore:

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

Così un’azienda distribuisce la propria libreria di componenti senza toccare l’editor.

Da dove vengono i pezzi

Il design salvato dall’editor porta, nel suo campo components, l’indirizzo della libreria che contiene ogni componente, così un design può essere renderizzato in seguito da chiunque raggiunga quell’indirizzo (il formato JSON).