# Použitie alebo spustenie editora UI Builder a vlastné komponenty

> Otvorte cloudový editor alebo ho spustite sami cez Node.js, čo projekt obsahuje a ako načítať vlastný zoznam komponentov parametrom components.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: sk
Content-SHA256: 5686d6a855ee37498b76b51cad66e096e49252cec8cc8230f9729da1de0b97fb
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

## Cloudový editor

Najrýchlejšia cesta je cloudová verzia editora, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Spustenie sami

Editor je malá aplikácia Total.js 5, ktorá poskytuje statické súbory. README uvádza tri kroky:

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

Najprv si stiahnite zdrojový kód z [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). Aplikácia má jednu trasu, ktorá poskytuje jej súbory (`ROUTE('GET /*')`), a súbor `config` nastavuje názov a CDN rozhrania (`cdn : //cdn.componentator.com`). Editor nepotrebuje databázu.

Čo repozitár obsahuje:

| Priečinok alebo súbor | Čo obsahuje |
|---|---|
| `public/` | editor: `ui.js` a `func.js`, formuláre editora (`forms/*.html`: nastavenia, komponenty, schéma, import, kód, cesty...) a obrázky šablón |
| `public/templates/` | úvodné dizajny: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` a `db.json` |
| `public/templates.json` | zoznam šablón, ktoré editor ponúka (mobilná aplikácia a panel HMI existujú, ale sú vypnuté) |
| `public/template.txt` | kostra nového komponentu ([vytvorenie komponentu](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | stránka, ktorá vykresľuje dizajn s jComponent 20 |
| `cdn/uibuilder.min@1.js` | runtime, ktorý vykresľuje dizajn (objekt `UIBuilder` stránky) |

## Použitie vlastného zoznamu komponentov

Editor číta svoje komponenty zo zoznamu. Môžete ho nasmerovať na vlastný zoznam pridaním parametra `components` k adrese s adresou súboru JSON ako hodnotou:

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

Takto firma dodáva vlastnú knižnicu komponentov bez zásahu do editora.

## Odkiaľ pochádzajú časti

Dizajn uložený editorom nesie vo svojom poli `components` adresu knižnice, ktorá obsahuje každý komponent, takže dizajn môže neskôr vykresliť ktokoľvek, kto sa k tej adrese dostane ([formát JSON](/en/uibuilder/the-ui-json-format/)).