Настройка плеера фреймов
Плеер фреймов - компонент, который строит указанный ему фрейм в режиме просмотра(runtime
). В режиме просмотра невозможно изменять конфигурации отображаемых виджетов.

Конфигурация плеера
Чтобы добавить плеер на страницу, необходимо:
- Добавить контрол
SiteEditorBase/player:View
в шаблон своего контрола. - Определить опции:
widgets
— фрейм(набор отображаемых виджетов).decorators
— набор декораторов, применяемых к каждому виджету.widgetsData
— набор данных для виджетов.
Настройка отображаемого фрейма
В качестве значения опции в большинстве случаев будет использован уже готовый фрейм.
Опция widgets — фрейм, который представляет из себя массив виджетов, каждый из элементов которого представляет собой объект со следующими полями:
- id — уникальный идентификатор, который выдается виджету при добавлении.
- widgetType — идентификатор виджета.
- props — значения свойств виджета. Могут содержаться только те свойства, которые описаны в propTypes виджета.
Пример:
<!-- WML -->
<SiteEditorBase.player:View
widgets="{{_widgets}}"
/>
// TypeScript
protected _widgets = [{
id: '6714adb4-84c9-11ec-a8a3-0242ac155555',
widgetType: 'a9cbadb4-84c9-11ec-a8a3-0242ac120002',
props: {
widgets: [{
id: '6714adb4-84c9-11ec-a8a3-0242ac15558',
widgetType: 'a9cbadb4-84c9-11ec-a8a3-0242ac120003',
props: {
mask: 'nn-nn-nn'
}
}, {
id: '6714adb4-84c9-11ec-a8a3-0242ac11234',
widgetType: 'a9cbadb4-84c9-11ec-a8a3-0242ac120003',
props: {
mask: 'n(nnn) nn-nn-nn'
}
}]
}
}, {
id: '6714adb4-84c9-11ec-a8a3-0242ac186423',
widgetType: 'a9cbadb4-84c9-11ec-a8a3-0242ac120003',
props: {
mask: 'n(nnn) nn-nn-nn'
}
}];
Настройка декораторов
Опция decorators — массив декораторов, в которые будут обернуты виджеты. Каждый декоратор представляет собой объект со следующими опциями:
- templateName — путь до шаблона декоратора.
- props — опции, которые будут переданы в конструктор декоратора.
В декоратор будет передана контентая опция content
, которую декоратор обязан вставить в своем шаблоне. Пример настройки:
<!-- WML -->
<SiteEditorBase.player:View
decorators="{{_decorators}}"
/>
// TypeScript
protected _decorators = [{
templateName: 'Path/To/Decorator',
props: {
someProp: 'someValue'
}
}];
// Decorator.wml
<div class="decorator">
<ws:partial template="{{_options.content}}"/>
</div>
// Decorator.less
.decorator {
border: 1px solid #ccc;
}
Настройка widgetsData
Опция widgetsData
— набор данных для виджетов, для получения которых необходимо использовать метод loadDataAndDeps
, содержащийся в SiteEditorBase/Loader
. В результате вызова данного метода возвращается объект, в котором идентификатору виджета соответствует результат загрузки данных. Подробнее об использовании loadDataAndDeps
можно прочитать здесь.