# Použití nebo spuštění editoru UI Builder a vlastní komponenty

> Otevřete cloudový editor nebo jej spusťte sami přes Node.js, co projekt obsahuje a jak načíst vlastní seznam komponent parametrem components.

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

## Cloudový editor

Nejrychlejší cesta je cloudová verze editoru, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Spuštění sami

Editor je malá aplikace Total.js 5, která poskytuje statické soubory. README uvádí tři kroky:

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

Nejprve si stáhněte zdrojový kód z [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). Aplikace má jednu trasu, která poskytuje její soubory (`ROUTE('GET /*')`), a soubor `config` nastavuje název a CDN rozhraní (`cdn : //cdn.componentator.com`). Editor nepotřebuje databázi.

Co repozitář obsahuje:

| Složka nebo soubor | Co obsahuje |
|---|---|
| `public/` | editor: `ui.js` a `func.js`, formuláře editoru (`forms/*.html`: nastavení, komponenty, schéma, import, kód, cesty...) a obrázky šablon |
| `public/templates/` | úvodní návrhy: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` a `db.json` |
| `public/templates.json` | seznam šablon, které editor nabízí (mobilní aplikace a panel HMI existují, ale jsou vypnuté) |
| `public/template.txt` | kostra nové komponenty ([vytvoření komponenty](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | stránka, která vykresluje návrh s jComponent 20 |
| `cdn/uibuilder.min@1.js` | runtime, který vykresluje návrh (objekt `UIBuilder` stránky) |

## Použití vlastního seznamu komponent

Editor čte své komponenty ze seznamu. Můžete jej nasměrovat na vlastní seznam přidáním parametru `components` k adrese s adresou souboru JSON jako hodnotou:

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

Takto firma dodává vlastní knihovnu komponent bez zásahu do editoru.

## Odkud pocházejí části

Návrh uložený editorem nese ve svém poli `components` adresu knihovny, která obsahuje každou komponentu, takže návrh může později vykreslit kdokoli, kdo se k té adrese dostane ([formát JSON](/en/uibuilder/the-ui-json-format/)).