ForgeUI Builder
nl

UI Builder

De UI Builder-editor gebruiken of uitvoeren en je eigen componenten meenemen

UI Builder · uibuilder@1 uibuilderinstallcomponents

De cloudeditor

De snelste manier is de cloudversie van de editor, uibuilder.totaljs.com.

Zelf uitvoeren

De editor is een kleine Total.js 5-toepassing die statische bestanden serveert. De README geeft drie stappen:

npm install
node index.js

Download eerst de broncode van github.com/totaljs/uibuilder. De toepassing heeft één route die haar bestanden serveert (ROUTE('GET /*')) en het bestand config stelt de naam en de CDN van de interface in (cdn : //cdn.componentator.com). De editor heeft geen database nodig.

Wat de repository bevat:

Map of bestandWat het bevat
public/de editor: ui.js en func.js, de formulieren van de editor (forms/*.html: instellingen, componenten, schema, importeren, code, paden...) en de afbeeldingen van de sjablonen
public/templates/de startontwerpen: app.json, dashboard.json, flowboard.json, part.json en db.json
public/templates.jsonde lijst met sjablonen die de editor aanbiedt (een mobiele app en een HMI-paneel bestaan maar zijn uitgeschakeld)
public/template.txthet skelet van een nieuwe component (een component bouwen)
public/render.txteen pagina die een ontwerp rendert met jComponent 20
cdn/uibuilder.min@1.jsde runtime die een ontwerp rendert (het object UIBuilder van de pagina)

Je eigen lijst met componenten gebruiken

De editor leest zijn componenten uit een lijst. Je kunt hem naar je eigen lijst laten wijzen door de parameter components aan het adres toe te voegen, met het adres van een JSON-bestand als waarde:

https://uibuilder.totaljs.com?components=URL_TO_YOUR_JSON_DB

Zo levert een bedrijf zijn eigen componentenbibliotheek zonder de editor aan te raken.

Waar de onderdelen vandaan komen

Het door de editor opgeslagen ontwerp draagt in zijn veld components het adres van de bibliotheek die elke component bevat, zodat een ontwerp later kan worden gerenderd door iedereen die dat adres kan bereiken (het JSON-formaat).