Usar ou executar o editor do UI Builder e trazer os seus próprios componentes

UI Builder · uibuilder@1 uibuilderinstallcomponents

O editor na nuvem

A forma mais rápida é a versão na nuvem do editor, uibuilder.totaljs.com.

Executá-lo você mesmo

O editor é uma pequena aplicação Total.js 5 que serve ficheiros estáticos. O README dá três passos:

npm install
node index.js

Descarregue primeiro o código-fonte, de github.com/totaljs/uibuilder. A aplicação tem uma rota que serve os seus ficheiros (ROUTE('GET /*')) e o ficheiro config define o nome e a CDN da interface (cdn : //cdn.componentator.com). O editor não precisa de base de dados.

O que contém o repositório:

Pasta ou ficheiro	O que contém
`public/`	o editor: `ui.js` e `func.js`, os formulários do editor (`forms/*.html`: definições, componentes, esquema, importar, código, caminhos...) e as imagens dos modelos
`public/templates/`	os designs iniciais: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` e `db.json`
`public/templates.json`	a lista de modelos que o editor oferece (existem uma aplicação móvel e um painel HMI mas estão desativados)
`public/template.txt`	o esqueleto de um componente novo (criar um componente)
`public/render.txt`	uma página que renderiza um design com o jComponent 20
`cdn/uibuilder.min@1.js`	o runtime que renderiza um design (o objeto `UIBuilder` da página)

Usar a sua própria lista de componentes

O editor lê os seus componentes de uma lista. Pode apontá-lo para a sua própria lista acrescentando ao endereço o parâmetro components, com o endereço de um ficheiro JSON como valor:

https://uibuilder.totaljs.com?components=URL_TO_YOUR_JSON_DB

É assim que uma empresa distribui a sua própria biblioteca de componentes sem mexer no editor.

De onde vêm as peças

O design guardado pelo editor leva, no seu campo components, o endereço da biblioteca que contém cada componente, de modo que um design pode ser renderizado mais tarde por qualquer pessoa que alcance esse endereço (o formato JSON).