Идеология конструктора фреймов
В основе построения виджетируемых областей/страниц лежит несколько базовых понятий и механик.
Базовые понятия конструктора фреймов
Виджет — Самодостаточный визуальный компонент. В основе виджета лежит Wasaby-контрол, у которого описан набор настраиваемых свойств и контракт для работы с данными. Виджетами могут быть как простые компоненты (текст, кнопка), так и сложные (каталог продукции ресторана). Виджет может содержать внутри себя другие виджеты.
Текстовый виджет
Виджет раскладка с дочерними виджетами
Группа виджетов - Набор виджетов имеющих схожее предназначение. Например, виджеты полей ввода или виджеты редактора бонусных карт. Группа виджетов может включать в себя как индивидуальные виджеты, так и другие группы виджетов. Каждому конструктору соответствует своя группа виджетов (состоящая из вложенных групп), на основе которой строится палитра. Таким образом, при добавлении нового виджета его не нужно будет включать в каждую палитру вручную. Базовые группы виджетов будут поставляться платформой.
Фрейм - Массив конфигураций виджетов, который получается в результате работы конструктора, предназначен для вставки в окружение какой-то другой страницы/панели. Примеры - виджеты на главной, фрейм с доп.полями в документе. Фрейм может храниться "по месту" в формате .frame или быть записан в базу данных.
Базовые механики конструктора фреймов
Для отображения фреймов предоставляются 2 компонента:
Плеер — компонент, который строит указанный ему фрейм в режиме просмотра(runtime). В режиме просмотра невозможно изменять конфигурации отображаемых виджетов.
Конструктор — компонент, который строит указанный ему фрейм в режиме редактирования(designtime). В данном режиме можно выполнять различные операции над виджетами: перетаскивать, добавлять/удалять, менять их свойства. Результатом работы компонента является json конфиг - фрейм(результат конструирования).
Фрейм представляет собой json массив, каждый из элементов которого имеет следующие поля:
- id — уникальный идентификатор, который выдается виджету при добавлении.
- widgetType — идентификатор виджета.
- props — значения установленных свойств виджета.
Для плеера и конструктора фреймов можно настроить набор декораторов. Декоратор виджета — компонент-обертка для виджета, который может добавлять визуальное оформление и функциональные возможности, позволяющие влиять на виджет. С помощью декораторов можно переиспользовать виджеты в разных продуктах с разными требованиями к визуальному оформлению виджетов.
Пример конструктора фреймов на странице
На основе конструктора фреймов собираются различные прикладные решения, которые решают задачи конечного потребителя. В прикладных конструкторах у пользователя будет возможность редактировать одну или несколько областей, каждая из которых представлена в виде конструктора фреймов.
Рассмотрим на примере, как будет выглядеть страница, содержащая конструктор фреймов:
- Синий блок — плеер/конструктор фрейма, отображающий набор виджетов.
- Зеленый блок — декоратор виджета, добавляющий всем виджетам визуальное оформление и элемент управления в виде кнопки в шапке виджета.
- Красный блок — виджет.
