en
Español
Slovenčina
Deutsch
Français
Italiano
Português
Polski
Čeština
Nederlands
Română
Magyar
Svenska
Ελληνικά
БългарскиUse or run the UI Builder editor, and bring your own components
The cloud editor
The quickest way is the cloud version of the editor, uibuilder.totaljs.com.
Run it yourself
The editor is a small Total.js 5 application that serves static files. The README gives three steps:
npm install
node index.jsDownload the source code first, from github.com/totaljs/uibuilder. The application has one route that serves its files (ROUTE('GET /*')) and the config file sets the name and the CDN of the interface (cdn : //cdn.componentator.com). The editor needs no database.
What the repository contains:
| Folder or file | What it holds |
|---|---|
public/ | the editor: ui.js and func.js, the forms of the editor (forms/*.html: settings, components, schema, import, code, paths...) and the images of the templates |
public/templates/ | the starting designs: app.json, dashboard.json, flowboard.json, part.json and db.json |
public/templates.json | the list of templates that the editor offers (a mobile app and an HMI panel exist but are disabled) |
public/template.txt | the skeleton of a new component (build a component) |
public/render.txt | a page that renders a design with jComponent 20 |
cdn/uibuilder.min@1.js | the runtime that renders a design (the UIBuilder object of the page) |
Use your own list of components
The editor reads its components from a list. You can point it to your own list by adding the parameter components to the address, with the address of a JSON file as its value:
https://uibuilder.totaljs.com?components=URL_TO_YOUR_JSON_DBThis is how a company ships its own component library without touching the editor.
Where the pieces come from
The design saved by the editor carries, in its components field, the address of the library that holds each component, so a design can be rendered later by anyone who can reach that address (the JSON format).