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

> Форматът на компонент на UI Builder: един HTML файл със своя стил, скрипт, който експортира метаданните и функция make, форма за настройки и readme, плюс флаговете, методите и събитията на една инстанция.

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

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

```html
<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`, който започва с `@`, означава, че компонентът следва друг.

Публикувайте файла в собствен списък с компоненти ([стартиране на редактора](/en/uibuilder/run-the-designer/)) и екипът ви може да го ползва от редактора.