Използване или стартиране на редактора на UI Builder и собствени компоненти

UI Builder · uibuilder@1 uibuilderinstallcomponents

Облачният редактор

Най-бързият начин е облачната версия на редактора, uibuilder.totaljs.com.

Стартиране сами

Редакторът е малко приложение на Total.js 5, което сервира статични файлове. README дава три стъпки:

npm install
node index.js

Първо изтеглете изходния код от github.com/totaljs/uibuilder. Приложението има един маршрут, който сервира файловете му (ROUTE('GET /*')), а файлът config задава името и CDN на интерфейса (cdn : //cdn.componentator.com). Редакторът не се нуждае от база данни.

Какво съдържа хранилището:

Папка или файл	Какво съдържа
`public/`	редакторът: `ui.js` и `func.js`, формите на редактора (`forms/*.html`: настройки, компоненти, схема, импортиране, код, пътища...) и изображенията на шаблоните
`public/templates/`	началните дизайни: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` и `db.json`
`public/templates.json`	списъкът с шаблони, които редакторът предлага (съществуват мобилно приложение и HMI панел, но са изключени)
`public/template.txt`	скелетът на нов компонент (създаване на компонент)
`public/render.txt`	страница, която визуализира дизайн с jComponent 20
`cdn/uibuilder.min@1.js`	средата за изпълнение, която визуализира дизайн (обектът `UIBuilder` на страницата)

Използване на собствен списък с компоненти

Редакторът чете компонентите си от списък. Можете да го насочите към собствен списък, като добавите към адреса параметъра components с адреса на JSON файл като стойност:

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

Така една компания доставя собствена библиотека с компоненти, без да докосва редактора.

Откъде идват частите

Дизайнът, записан от редактора, носи в полето си components адреса на библиотеката, която съдържа всеки компонент, така че дизайнът може да бъде визуализиран по-късно от всеки, който достига до този адрес (JSON форматът).