Диалог настройки виджета
SiteEditorBase/widget:Panel - это интерфейсный контрол, предназначенный для настройки виджетов конструктора сайтов.
Демо-пример можно найти в документации к контролу.
Открытие диалога настройки виджета
Для открытия диалогового окна используется контрол SiteEditorBase/WidgetOpener. Процесс очень схожий с открытием стековой панели или диалогового окна с помощью соответствующих опенеров. Все, что нужно:
- Создать экземпляр WidgetOpener;
- Воспользоваться методом open, передав конфигурацию виджета.
Конфигурация метода open состоит из следующих опций:
- opener - Логический инициатор открытия всплывающего окна (контрол);
- width - Ширина диалогового окна;
- eventHandlers - Функции обратного вызова на события всплывающего окна, такие как: onResult, onOpen и onClose, см. документацию;
- widgetOptions - Опции SiteEditorBase/widget:Panel. Их мы рассмотрим подробнее далее по статье.
<!-- WML -->
<Controls.buttons:Button
name="button"
caption="Open Widget"
on:click="_openWidget()"
/>
// TypeScript
import {WidgetOpener} from 'SiteEditorBase/WidgetOpener';
...
const WIDGET_PANEL_WIDTH = 300;
export default class WidgetDemo extends Control<...> {
...
protected _widgetOpener: WidgetOpener;
protected _children: {
button: Button
};
protected _openWidget(): void {
const config = {
opener: this._children.button,
width: WIDGET_PANEL_WIDTH,
eventHandlers: {
onResult: ({editingObject}) => {
// Получаем результирующий editingObject
}
// Также можно настроить обработчики onClose и onOpen
},
widgetOptions: {...}
};
if (!this._widgetOpener) {
this._widgetOpener = new WidgetOpener();
}
this._widgetOpener.open(config);
}
}
Один экземпляр WidgetOpener работает только с 1 окном. Если единовременно необходимо открывать несколько окон, следует создать дополнительные экземпляры.
Конфигурация редактора виджета (widgetOptions)
Процесс конфигурации widgetOptions будет очень знаком тем, кто работал с контролом Controls/propertyGrid:PropertyGrid.
Заголовок диалога настройки виджета
Чтобы задать заголовок диалогу настройки виджета, передеаём строку в опцию headingCaption
Конфигурация свойств и значений PropertyGrid
Для конфигурации свойств PropertyGrid служит опция source. В неё необходимо передать список свойств IProperty. Для конфигурации значений заданных в source свойств служит опция editingObject.
Более подробнее об опциях source и editingObject можно прочитать в документации PropertyGrid.
Функции обратного вызова на операции управления слоями
С помощью опции layerMoveCallback можно настроить обработчик для операций управления слоями. На вход в обработчик приходит идентификатор действия со слоем типа TLayerMovement. На выход ничего не требуется.
Данная опция не обязательна. Если её не указать, операции управления слоями не будут отображены в редакторе виджета.
Кастомный контрол в шапке диалога найстроки виджета
Чтобы поместить кастомный контрол в шапке диалога настройки виджета, передаём шаблон или имя контрола в опцию headerContentTemplate.
Передача опций в кастомный контрол
Передать опции кастомному контролу, заданному через headerContentTemplate, можно с помощью опции headerContentTemplateOptions.
Пример
// TypeScript
import {TLayerMovement, IPanel} from 'SiteEditorBase/widget';
...
export default class WidgetDemo extends Control<...> {
...
protected _widgetOptions: IPanel = {
headingCaption: 'Заголовок виджета',
layerMoveCallback: (layerMovement: TLayerMovement) => {
if (layerMovement === 'Up') {
// Обрабатываем нажатие "Слой вверх"
} else {
// layerMovement === 'Down'
// Обрабатываем нажатие "Слой вниз"
}
},
source: [
{
name: 'count',
caption: 'Кол-во столов',
editorOptions: {
integersLength: 2,
precision: 0,
onlyPositive: true
},
type: 'number'
}, {
name: 'title',
caption: 'Название стола',
editorOptions: {
fontColorStyle: 'secondary',
fontWeight: 'bold',
fontSize: 'xl'
}
}, {
group: 'ШРИФТ',
name: 'font',
caption: 'Семейство шрифтов'
}, {
group: 'ШРИФТ',
name: 'size',
caption: 'Размер шрифта'
}
],
editingObject: {
count: 1,
title: 'Стол для постоянных гостей',
font: new Enum({
dictionary: fonts,
index: 0
}),
size: new Enum({
dictionary: sizes,
index: 1
})
}
};
}
Результат без передачи опции layerMoveCallback:
Результат с использованием опций headerContentTemplate и headerContentTemplateOptions:
Валидация
Для настройки валидации свойств PropertyGrid в опции source для свойств, которые нужно валидировать, необходимо указать:
- validators - Массив валидирующих функций;
- validateTemplateName - Контрол, регулирующий валидацию своего контента (строкой).
Нет необходимости использовать HOC Controls.validate:Controller, так как SiteEditorBase/widget:Panel уже его содержит.
// TypeScript
import {IProperty} from 'Controls/propertyGrid';
import {isRequired} from 'Controls/validate';
...
const validators = [isRequired];
export default class WidgetDemo extends Control<...> {
...
protected _source: IProperty[] = [
{
name: 'count',
caption: 'Кол-во столов',
editorOptions: {
integersLength: 2,
precision: 0,
onlyPositive: true
},
type: 'number',
validateTemplateName: 'Controls/validate:InputContainer',
validators
}, {
name: 'title',
caption: 'Название стола',
editorOptions: {
fontColorStyle: 'secondary',
fontWeight: 'bold',
fontSize: 'xl'
},
validateTemplateName: 'Controls/validate:InputContainer',
validators
}
];
}