Създаване на компонент за UI Builder

UI Builder · uibuilder@1 uibuildercomponentsextensions

Компонентът на UI Builder е един HTML файл с до четири части. Скелетът, който редакторът предлага за нов компонент (public/template.txt), е часовник:

<style>
	.CLASS { font-size: 14px; }
</style>

<script>
	exports.id = '';
	exports.name = 'Clock';
	exports.group = 'Controls';
	exports.author = 'Total.js';
	exports.icon = 'ti ti-clock';
	exports.config = { bold: false, flash: true, seconds: true };
	exports.version = '1';
	exports.follow = true;

	exports.make = function(instance, config, element, cls, iseditor) {
		// build the component inside element
	};
</script>

<readme>
The component renders the current time and the model contains a `Date` object.
</readme>

<settings>
	<div class="padding">
		<ui-component name="input" path="?.bold" config="type:checkbox">Apply bold font</ui-component>
	</div>
</settings>

Част	Какво прави
`<style>`	CSS на компонента; `CLASS` се заменя с клас, който принадлежи на компонента
`<script>`	експортира метаданните (`id`, `name`, `group`, `author`, `icon`, `version`, `config` със стойностите по подразбиране) и функцията `make`
`<readme>`	помощният текст, показван в редактора (Markdown)
`<settings>`	формата, която редактира `config`: входове на jComponent, чийто `path` започва с `?.`, следван от ключа на конфигурацията

Функцията make

make(instance, config, element, cls, iseditor) се изпълнява, когато компонентът се създаде:

instance е инстанцията на компонента (set, on, emit, state...).
config е неговата конфигурация, а element е jQuery елементът, който трябва да се попълни.
cls е класът, който замени CLASS, а iseditor показва дали се рисува в редактора или в визуализиран дизайн (така например таймерът не е нужно да работи, докато проектирате).

Вътре слушате събития (instance.on('configure', ...), когато настройките се променят, и instance.on('destroy', ...) за почистване на таймери) и записвате стойността с instance.set('value', date).

Метаданни, флагове, методи и събития

От README на редактора:

Метаданни: exports.follow = true показва компонента във формата за настройки Path for reading/writing (само за проектанта), а exports.hidden = true го скрива от списъка с компоненти.
Флагове на инстанция: instance.state.bind = true свързва автоматично компонента във форма, за тези, които четат и записват данни; instance.state.notify = true излъчва само събитието notify, когато стойността се промени, вместо директно да задава стойността на компонента (примерът е компонентът Counter).
Метод: instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {}) чете източник на данни и връща масив от [id, name].
Събитие: instance.on('refresh', function(meta) {}) се задейства, когато някои обекти са се променили: meta.type е remove или configure, с meta.items или meta.item.
Свойства на редактора, които компонент може да чете: DEF.cl.datasource (списъци с кодове и компоненти с follow), DEF.cl.paths, DEF.cl.list (всички инстанции), DEF.cl.inputs, DEF.cl.outputs, DEF.cl.views и DEF.cl.apps (родствени дизайни).
Следване: config.path, който започва с @, означава, че компонентът следва друг.

Публикувайте файла в собствен списък с компоненти (стартиране на редактора) и екипът ви може да го ползва от редактора.