Den UI-Builder-Editor nutzen oder ausführen und eigene Komponenten einbringen
Der Cloud-Editor
Am schnellsten geht es mit der Cloud-Version des Editors, uibuilder.totaljs.com.
Selbst ausführen
Der Editor ist eine kleine Total.js-5-Anwendung, die statische Dateien ausliefert. Die README nennt drei Schritte:
npm install
node index.jsLaden Sie zuerst den Quellcode von github.com/totaljs/uibuilder herunter. Die Anwendung hat eine Route, die ihre Dateien ausliefert (ROUTE('GET /*')), und die Datei config legt den Namen und das CDN der Oberfläche fest (cdn : //cdn.componentator.com). Der Editor braucht keine Datenbank.
Was das Repository enthält:
| Ordner oder Datei | Was sie enthält |
|---|---|
public/ | der Editor: ui.js und func.js, die Formulare des Editors (forms/*.html: Einstellungen, Komponenten, Schema, Import, Code, Pfade...) und die Bilder der Vorlagen |
public/templates/ | die Start-Designs: app.json, dashboard.json, flowboard.json, part.json und db.json |
public/templates.json | die Liste der Vorlagen, die der Editor anbietet (eine mobile App und ein HMI-Panel existieren, sind aber abgeschaltet) |
public/template.txt | das Grundgerüst einer neuen Komponente (Eine Komponente bauen) |
public/render.txt | eine Seite, die ein Design mit jComponent 20 rendert |
cdn/uibuilder.min@1.js | die Laufzeit, die ein Design rendert (das Objekt UIBuilder der Seite) |
Eigene Komponentenliste verwenden
Der Editor liest seine Komponenten aus einer Liste. Sie können ihn auf Ihre eigene Liste verweisen, indem Sie der Adresse den Parameter components hinzufügen, mit der Adresse einer JSON-Datei als Wert:
https://uibuilder.totaljs.com?components=URL_TO_YOUR_JSON_DBSo liefert ein Unternehmen seine eigene Komponentenbibliothek aus, ohne den Editor anzufassen.
Woher die Teile kommen
Das vom Editor gespeicherte Design trägt in seinem Feld components die Adresse der Bibliothek, die jede Komponente enthält, sodass ein Design später von jedem gerendert werden kann, der diese Adresse erreicht (das JSON-Format).