Wat UI Builder is: interfaces ontwerpen als een JSON-bestand

UI Builder is een visuele editor voor gebruikersinterfaces. Je sleept componenten op een canvas, configureert en verbindt ze, en het resultaat is geen code maar een JSON-bestand dat de interface beschrijft. Een klein web component rendert dat bestand overal, dus een UI Builder-ontwerp heeft geen implementatie aan de serverkant nodig. Het is open source onder de MIT-licentie; de editor is de repository totaljs/uibuilder, en je kunt de cloudversie gebruiken op uibuilder.totaljs.com.

Deze pagina’s beschrijven UI Builder (revisie 620107a van de repository).

Waarvoor het dient

De sjablonen van de editor tonen de soorten interfaces die hij bouwt:

Sjabloon	Gebruik
Web app	een klassieke webtoepassing
Dashboard	een dashboard met datawidgets
Flowboard	een board dat is verbonden met een datastroom (het werkt met Total.js Flow)
Part	een herbruikbaar stuk interface

De editor toont ook sjablonen voor mobiele apps en HMI-panelen, die in deze versie zijn uitgeschakeld. Total.js presenteert UI Builder voor webformulieren, dashboards, intranetten, IoT-schermen en ERP- en CRM-interfaces.

Waarom het bij Total.js past

• Het ontwerp is data. Een JSON-bestand is makkelijk op te slaan in een database, te versioneren, te genereren en aan een ander hulpmiddel te geven.
• Het heeft geen bijzondere omgeving nodig. De renderer is een jComponent web component, dus elke pagina kan een ontwerp tonen.
• Je eigen componenten. Een component is één HTML-bestand met zijn stijl, zijn code en zijn instellingenformulier (een component bouwen).
• Het integreert met Flow en met OpenPlatform, en ondersteunt lokalisatie.

Ga verder met de editor uitvoeren, het JSON-formaat en een ontwerp in je pagina renderen. De officiële documentatie staat op docs.totaljs.com/uibuilder.