Le format JSON d’un design UI Builder

UI Builder · uibuilder@1 uibuilderjsonschema

Un design UI Builder est un seul objet JSON. Les modèles de départ du dépôt (public/templates/*.json) montrent ses champs.

Champ	Signification
`name`, `description`, `icon`, `version`	les métadonnées du design (l’icône est une classe de la police d’icônes, comme `ti ti-totaljs`)
`type`	le type de design : `app`, `dashboard`, `flowboard` ou `part`
`css`	le style du design. Le marqueur `CLASS` est remplacé par une classe unique du design, de sorte que ses règles ne fuient jamais (par exemple `.CLASS:root{--radius:5px}`)
`csspublish`	le style d’un `part` publié pour que d’autres l’utilisent
`editor`	options de l’éditeur : `download` (un indicateur) et les champs de texte `paths`, `codes` et `upload` (les modèles les laissent vides au départ ; voir la documentation officielle pour leur usage)
`components`	d’où viennent les composants : un objet avec `cdn`, l’adresse de la bibliothèque (`https://cdn.componentator.com/uibuilder/app.json` dans le modèle app), et dans un `part` un objet qui associe l’id de chaque composant à l’adresse de son formulaire d’éditeur
`children`	l’arbre des composants du design
`inputs`, `outputs`	les connexions du design avec l’extérieur ; les modèles commencent avec des listes vides
`args`	arguments du design

L’arbre des composants

children est une liste de nœuds. Chaque nœud a :

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

id : l’identifiant de l’instance dans le design.
component : l’id du composant qui le rend (les designs de départ commencent par un container appelé root).
config : la configuration que modifie le formulaire de réglages du composant.
children : les nœuds qu’il contient, de même forme.

Un composant peut en suivre un autre : quand son config.path commence par @, il lit et écrit la valeur du composant dont l’id vient après le @ (créer un composant).

Pourquoi c’est important

Le design est une donnée simple : vous pouvez le stocker dans une base de données, comparer deux versions, le générer depuis votre propre outil ou laisser votre application choisir un design par client. Pour en afficher un, lisez rendre un design dans votre page.