Het JSON-formaat van een UI Builder-ontwerp

UI Builder · uibuilder@1 uibuilderjsonschema

Een UI Builder-ontwerp is één JSON-object. De startsjablonen van de repository (public/templates/*.json) tonen de velden.

Veld	Betekenis
`name`, `description`, `icon`, `version`	de metagegevens van het ontwerp (het icoon is een klasse van het iconenlettertype, zoals `ti ti-totaljs`)
`type`	het soort ontwerp: `app`, `dashboard`, `flowboard` of `part`
`css`	de stijl van het ontwerp. De plaatshouder `CLASS` wordt vervangen door een unieke klasse van het ontwerp, zodat de regels nooit weglekken (bijvoorbeeld `.CLASS:root{--radius:5px}`)
`csspublish`	de stijl van een `part` die voor anderen wordt gepubliceerd
`editor`	opties van de editor: `download` (een vlag) en de tekstvelden `paths`, `codes` en `upload` (de sjablonen starten ermee leeg; zie de officiële documentatie voor het gebruik)
`components`	waar de componenten vandaan komen: een object met `cdn`, het adres van de bibliotheek (`https://cdn.componentator.com/uibuilder/app.json` in het app-sjabloon), en in een `part` een object dat de id van elke component koppelt aan het adres van zijn editorformulier
`children`	de componentenboom van het ontwerp
`inputs`, `outputs`	de verbindingen van het ontwerp met de buitenwereld; de sjablonen starten met lege lijsten
`args`	argumenten van het ontwerp

De componentenboom

children is een lijst van knopen. Elke knoop heeft:

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

id: de identificatie van de instantie binnen het ontwerp.
component: de id van de component die hem rendert (de startontwerpen beginnen met een container genaamd root).
config: de configuratie die het instellingenformulier van de component bewerkt.
children: de knopen erin, met dezelfde vorm.

Een component kan een andere volgen: wanneer zijn config.path met @ begint, leest en schrijft hij de waarde van de component wiens id na de @ komt (een component bouwen).

Waarom dit ertoe doet

Het ontwerp is gewone data: je kunt het in een database opslaan, twee versies vergelijken, het uit je eigen hulpmiddel genereren of je toepassing per klant een ontwerp laten kiezen. Om er een te tonen, lees een ontwerp in je pagina renderen.