Utiliser ou exécuter l’éditeur UI Builder, et apporter vos propres composants
L’éditeur cloud
Le plus rapide est la version cloud de l’éditeur, uibuilder.totaljs.com.
L’exécuter vous-même
L’éditeur est une petite application Total.js 5 qui sert des fichiers statiques. Le README donne trois étapes :
npm install
node index.jsTéléchargez d’abord le code source, depuis github.com/totaljs/uibuilder. L’application a une route qui sert ses fichiers (ROUTE('GET /*')) et le fichier config définit le nom et le CDN de l’interface (cdn : //cdn.componentator.com). L’éditeur n’a besoin d’aucune base de données.
Ce que contient le dépôt :
| Dossier ou fichier | Ce qu’il contient |
|---|---|
public/ | l’éditeur : ui.js et func.js, les formulaires de l’éditeur (forms/*.html : réglages, composants, schéma, import, code, chemins...) et les images des modèles |
public/templates/ | les designs de départ : app.json, dashboard.json, flowboard.json, part.json et db.json |
public/templates.json | la liste des modèles que propose l’éditeur (une application mobile et un panneau HMI existent mais sont désactivés) |
public/template.txt | le squelette d’un nouveau composant (créer un composant) |
public/render.txt | une page qui rend un design avec jComponent 20 |
cdn/uibuilder.min@1.js | le runtime qui rend un design (l’objet UIBuilder de la page) |
Utiliser votre propre liste de composants
L’éditeur lit ses composants depuis une liste. Vous pouvez le pointer vers votre propre liste en ajoutant à l’adresse le paramètre components, avec l’adresse d’un fichier JSON comme valeur :
https://uibuilder.totaljs.com?components=URL_TO_YOUR_JSON_DBC’est ainsi qu’une entreprise livre sa propre bibliothèque de composants sans toucher à l’éditeur.
D’où viennent les pièces
Le design enregistré par l’éditeur porte, dans son champ components, l’adresse de la bibliothèque qui contient chaque composant, de sorte qu’un design peut être rendu plus tard par quiconque peut atteindre cette adresse (le format JSON).