Il formato JSON di un design di UI Builder

UI Builder · uibuilder@1 uibuilderjsonschema

Un design di UI Builder è un unico oggetto JSON. I modelli iniziali del repository (public/templates/*.json) mostrano i suoi campi.

Campo	Significato
`name`, `description`, `icon`, `version`	i metadati del design (l’icona è una classe del font di icone, come `ti ti-totaljs`)
`type`	il tipo di design: `app`, `dashboard`, `flowboard` o `part`
`css`	lo stile del design. Il segnaposto `CLASS` viene sostituito da una classe univoca del design, così le sue regole non si propagano mai (per esempio `.CLASS:root{--radius:5px}`)
`csspublish`	lo stile di un `part` pubblicato perché altri lo usino
`editor`	opzioni dell’editor: `download` (un flag) e i campi di testo `paths`, `codes` e `upload` (i modelli li iniziano vuoti; vedi la documentazione ufficiale per il loro uso)
`components`	da dove vengono i componenti: un oggetto con `cdn`, l’indirizzo della libreria (`https://cdn.componentator.com/uibuilder/app.json` nel modello app), e in un `part` un oggetto che associa l’id di ogni componente all’indirizzo del suo modulo dell’editor
`children`	l’albero dei componenti del design
`inputs`, `outputs`	le connessioni del design con l’esterno; i modelli iniziano con elenchi vuoti
`args`	argomenti del design

L’albero dei componenti

children è un elenco di nodi. Ogni nodo ha:

{
	"id": "root",
	"component": "container",
	"config": { "name": "Container" },
	"children": []
}

id: l’identificativo dell’istanza all’interno del design.
component: l’id del componente che lo renderizza (i design iniziali cominciano con un container chiamato root).
config: la configurazione che il modulo di impostazioni del componente modifica.
children: i nodi al suo interno, con la stessa forma.

Un componente può seguirne un altro: quando il suo config.path inizia con @, legge e scrive il valore del componente il cui id viene dopo la @ (creare un componente).

Perché è importante

Il design è un dato semplice: puoi salvarlo in un database, confrontare due versioni, generarlo dal tuo strumento o lasciare che la tua applicazione scelga un design per cliente. Per mostrarne uno, leggi renderizzare un design nella tua pagina.