Używanie lub uruchamianie edytora UI Builder i własne komponenty

UI Builder · uibuilder@1 uibuilderinstallcomponents

Edytor w chmurze

Najszybciej użyć wersji chmurowej edytora, uibuilder.totaljs.com.

Uruchomienie samodzielnie

Edytor to mała aplikacja Total.js 5, która serwuje pliki statyczne. README podaje trzy kroki:

npm install
node index.js

Najpierw pobierz kod źródłowy z github.com/totaljs/uibuilder. Aplikacja ma jedną trasę serwującą jej pliki (ROUTE('GET /*')), a plik config ustawia nazwę i CDN interfejsu (cdn : //cdn.componentator.com). Edytor nie potrzebuje bazy danych.

Co zawiera repozytorium:

Folder lub plik	Co zawiera
`public/`	edytor: `ui.js` i `func.js`, formularze edytora (`forms/*.html`: ustawienia, komponenty, schemat, import, kod, ścieżki...) i obrazy szablonów
`public/templates/`	projekty startowe: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` i `db.json`
`public/templates.json`	lista szablonów oferowanych przez edytor (aplikacja mobilna i panel HMI istnieją, ale są wyłączone)
`public/template.txt`	szkielet nowego komponentu (tworzenie komponentu)
`public/render.txt`	strona renderująca projekt z jComponent 20
`cdn/uibuilder.min@1.js`	runtime renderujący projekt (obiekt `UIBuilder` strony)

Użycie własnej listy komponentów

Edytor odczytuje komponenty z listy. Możesz wskazać mu własną listę, dodając do adresu parametr components z adresem pliku JSON jako wartością:

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

W ten sposób firma dostarcza własną bibliotekę komponentów bez ingerencji w edytor.

Skąd pochodzą elementy

Projekt zapisany przez edytor niesie w polu components adres biblioteki zawierającej każdy komponent, więc projekt może później wyrenderować każdy, kto ma dostęp do tego adresu (format JSON).