De UI Builder-editor gebruiken of uitvoeren en je eigen componenten meenemen
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.jsDownload 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 bestand | Wat 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.json | de lijst met sjablonen die de editor aanbiedt (een mobiele app en een HMI-paneel bestaan maar zijn uitgeschakeld) |
public/template.txt | het skelet van een nieuwe component (een component bouwen) |
public/render.txt | een pagina die een ontwerp rendert met jComponent 20 |
cdn/uibuilder.min@1.js | de 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_DBZo 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).