Ce qu’est UI Builder : concevoir des interfaces comme un fichier JSON

UI Builder est un éditeur visuel d’interfaces utilisateur. Vous glissez des composants sur un canevas, vous les configurez et vous les reliez, et le résultat n’est pas du code mais un fichier JSON qui décrit l’interface. Un petit web component rend ce fichier n’importe où, de sorte qu’un design UI Builder n’a besoin d’aucune implémentation côté serveur. Il est open source sous licence MIT ; l’éditeur est le dépôt totaljs/uibuilder, et vous pouvez utiliser la version cloud sur uibuilder.totaljs.com.

Ces pages décrivent UI Builder (révision 620107a du dépôt).

À quoi il sert

Les modèles de l’éditeur montrent les types d’interfaces qu’il construit :

Modèle	Usage
Web app	une application web classique
Dashboard	un tableau de bord de widgets de données
Flowboard	un tableau relié à un flux de données (il fonctionne avec Total.js Flow)
Part	un morceau d’interface réutilisable

L’éditeur liste aussi des modèles pour les applications mobiles et les panneaux HMI, qui sont désactivés dans cette version. Total.js présente UI Builder pour les formulaires web, les tableaux de bord, les intranets, les écrans IoT et les interfaces ERP et CRM.

Pourquoi il s’intègre à Total.js

• Le design est une donnée. Un fichier JSON se stocke facilement dans une base de données, se versionne, se génère et se donne à un autre outil.
• Il ne demande aucun environnement spécial. Le moteur de rendu est un web component jComponent, de sorte que n’importe quelle page peut afficher un design.
• Vos propres composants. Un composant est un fichier HTML avec son style, son code et son formulaire de réglages (créer un composant).
• Il s’intègre à Flow et à OpenPlatform, et prend en charge la localisation.

Poursuivez avec exécuter l’éditeur, le format JSON et rendre un design dans votre page. La documentation officielle se trouve sur docs.totaljs.com/uibuilder.