# Folosește sau rulează editorul UI Builder și adu-ți propriile componente

> Deschide editorul din cloud sau rulează-l singur cu Node.js, ce conține proiectul și cum încarci propria listă de componente cu parametrul components.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: ro
Content-SHA256: 4fac264b2a0a9fe6cd4e2218c37f7f0c56ae11c06c841d092e01916291fff9aa
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

## Editorul din cloud

Cea mai rapidă cale este versiunea în cloud a editorului, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Rulează-l singur

Editorul este o mică aplicație Total.js 5 care servește fișiere statice. README-ul dă trei pași:

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

Descarcă mai întâi codul sursă de la [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). Aplicația are o rută care servește fișierele ei (`ROUTE('GET /*')`), iar fișierul `config` setează numele și CDN-ul interfeței (`cdn : //cdn.componentator.com`). Editorul nu are nevoie de bază de date.

Ce conține depozitul:

| Folder sau fișier | Ce conține |
|---|---|
| `public/` | editorul: `ui.js` și `func.js`, formularele editorului (`forms/*.html`: setări, componente, schemă, import, cod, căi...) și imaginile șabloanelor |
| `public/templates/` | designurile de pornire: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` și `db.json` |
| `public/templates.json` | lista șabloanelor pe care le oferă editorul (există o aplicație mobilă și un panou HMI, dar sunt dezactivate) |
| `public/template.txt` | scheletul unei componente noi ([construiește o componentă](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | o pagină care randează un design cu jComponent 20 |
| `cdn/uibuilder.min@1.js` | runtime-ul care randează un design (obiectul `UIBuilder` al paginii) |

## Folosește propria listă de componente

Editorul citește componentele dintr-o listă. Îl poți îndrepta spre propria listă adăugând la adresă parametrul `components`, cu adresa unui fișier JSON ca valoare:

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

Așa livrează o companie propria bibliotecă de componente fără să atingă editorul.

## De unde vin piesele

Designul salvat de editor poartă, în câmpul `components`, adresa bibliotecii care conține fiecare componentă, astfel încât un design poate fi randat mai târziu de oricine poate ajunge la acea adresă ([formatul JSON](/en/uibuilder/the-ui-json-format/)).