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

> Abra o editor na nuvem ou execute-o você mesmo com Node.js, o que contém o projeto e como carregar a sua própria lista de componentes com o parâmetro components.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: pt
Content-SHA256: 6195ba6dc62aec213956dfe0d1ef33565733f0adca30f115dfc4c2d4760ff328
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

## O editor na nuvem

A forma mais rápida é a versão na nuvem do editor, [uibuilder.totaljs.com](https://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:

```bash
npm install
node index.js
```

Descarregue primeiro o código-fonte, de [github.com/totaljs/uibuilder](https://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](/en/uibuilder/build-a-component/)) |
| `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:

```text
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](/en/uibuilder/the-ui-json-format/)).