O que é o UI Builder: desenhar interfaces como um ficheiro JSON

O UI Builder é um editor visual de interfaces de utilizador. Arrasta componentes para uma tela, configura-os e liga-os, e o resultado não é código mas um ficheiro JSON que descreve a interface. Um pequeno web component renderiza esse ficheiro em qualquer lado, pelo que um design do UI Builder não precisa de implementação no servidor. É de código aberto sob a licença MIT; o editor é o repositório totaljs/uibuilder, e pode usar a versão na nuvem em uibuilder.totaljs.com.

Estas páginas descrevem o UI Builder (revisão 620107a do repositório).

Para que serve

Os modelos do editor mostram os tipos de interfaces que constrói:

Modelo	Utilização
Web app	uma aplicação web clássica
Dashboard	um painel de widgets de dados
Flowboard	um quadro ligado a um fluxo de dados (funciona com Total.js Flow)
Part	uma peça de interface reutilizável

O editor também lista modelos para aplicações móveis e painéis HMI, que estão desativados nesta versão. O Total.js apresenta o UI Builder para formulários web, painéis, intranets, ecrãs IoT e interfaces ERP e CRM.

Porque se encaixa no Total.js

• O design são dados. Um ficheiro JSON é fácil de guardar numa base de dados, de versionar, de gerar e de passar a outra ferramenta.
• Não precisa de um ambiente especial. O renderizador é um web component do jComponent, pelo que qualquer página pode mostrar um design.
• Os seus próprios componentes. Um componente é um ficheiro HTML com o seu estilo, o seu código e o seu formulário de definições (criar um componente).
• Integra-se com Flow e com OpenPlatform, e suporta localização.

Continue com executar o editor, o formato JSON e renderizar um design na sua página. A documentação oficial está em docs.totaljs.com/uibuilder.