Das JSON-Format eines UI-Builder-Designs

UI Builder · uibuilder@1 uibuilderjsonschema

Ein UI-Builder-Design ist ein einziges JSON-Objekt. Die Startvorlagen des Repositorys (public/templates/*.json) zeigen seine Felder.

Feld	Bedeutung
`name`, `description`, `icon`, `version`	die Metadaten des Designs (das Icon ist eine Klasse der Icon-Schrift, etwa `ti ti-totaljs`)
`type`	die Art des Designs: `app`, `dashboard`, `flowboard` oder `part`
`css`	der Stil des Designs. Der Platzhalter `CLASS` wird durch eine eindeutige Klasse des Designs ersetzt, sodass seine Regeln nie auslaufen (zum Beispiel `.CLASS:root{--radius:5px}`)
`csspublish`	der Stil eines `part`, der zur Nutzung durch andere veröffentlicht wird
`editor`	Optionen des Editors: `download` (ein Flag) und die Textfelder `paths`, `codes` und `upload` (die Vorlagen starten damit leer; siehe die offizielle Dokumentation zur Verwendung)
`components`	woher die Komponenten kommen: ein Objekt mit `cdn`, der Adresse der Bibliothek (`https://cdn.componentator.com/uibuilder/app.json` in der app-Vorlage), und in einem `part` ein Objekt, das die Id jeder Komponente der Adresse ihres Editorformulars zuordnet
`children`	der Komponentenbaum des Designs
`inputs`, `outputs`	die Verbindungen des Designs nach außen; die Vorlagen starten mit leeren Listen
`args`	Argumente des Designs

Der Komponentenbaum

children ist eine Liste von Knoten. Jeder Knoten hat:

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

id: die Kennung der Instanz innerhalb des Designs.
component: die Id der Komponente, die ihn rendert (die Start-Designs beginnen mit einem container namens root).
config: die Konfiguration, die das Einstellungsformular der Komponente bearbeitet.
children: die Knoten darin, mit derselben Form.

Eine Komponente kann einer anderen folgen: Beginnt ihr config.path mit @, liest und schreibt sie den Wert der Komponente, deren Id nach dem @ kommt (Eine Komponente bauen).

Warum das wichtig ist

Das Design sind einfache Daten: Sie können es in einer Datenbank speichern, zwei Versionen vergleichen, es aus Ihrem eigenen Werkzeug erzeugen oder Ihre Anwendung pro Kunde ein Design wählen lassen. Wie Sie eines anzeigen, lesen Sie unter Ein Design in Ihrer Seite rendern.