Идеология конструктора фреймов

В основе построения виджетируемых областей/страниц лежит несколько базовых понятий и механик.

Базовые понятия конструктора фреймов

Виджет — Самодостаточный визуальный компонент. В основе виджета лежит Wasaby-контрол, у которого описан набор настраиваемых свойств и контракт для работы с данными. Виджетами могут быть как простые компоненты (текст, кнопка), так и сложные (каталог продукции ресторана). Виджет может содержать внутри себя другие виджеты.

Текстовый виджет

Виджет раскладка с дочерними виджетами

Группа виджетов - Набор виджетов имеющих схожее предназначение. Например, виджеты полей ввода или виджеты редактора бонусных карт. Группа виджетов может включать в себя как индивидуальные виджеты, так и другие группы виджетов. Каждому конструктору соответствует своя группа виджетов (состоящая из вложенных групп), на основе которой строится палитра. Таким образом, при добавлении нового виджета его не нужно будет включать в каждую палитру вручную. Базовые группы виджетов будут поставляться платформой.

Фрейм - Массив конфигураций виджетов, который получается в результате работы конструктора, предназначен для вставки в окружение какой-то другой страницы/панели. Примеры - виджеты на главной, фрейм с доп.полями в документе. Фрейм может храниться "по месту" в формате .frame или быть записан в базу данных.

Базовые механики конструктора фреймов

Для отображения фреймов предоставляются 2 компонента:

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

Конструктор — компонент, который строит указанный ему фрейм в режиме редактирования(designtime). В данном режиме можно выполнять различные операции над виджетами: перетаскивать, добавлять/удалять, менять их свойства. Результатом работы компонента является json конфиг - фрейм(результат конструирования).

Фрейм представляет собой json массив, каждый из элементов которого имеет следующие поля:

  • id — уникальный идентификатор, который выдается виджету при добавлении.
  • widgetType — идентификатор виджета.
  • props — значения установленных свойств виджета.

Для плеера и конструктора фреймов можно настроить набор декораторов. Декоратор виджета — компонент-обертка для виджета, который может добавлять визуальное оформление и функциональные возможности, позволяющие влиять на виджет. С помощью декораторов можно переиспользовать виджеты в разных продуктах с разными требованиями к визуальному оформлению виджетов.

Пример конструктора фреймов на странице

На основе конструктора фреймов собираются различные прикладные решения, которые решают задачи конечного потребителя. В прикладных конструкторах у пользователя будет возможность редактировать одну или несколько областей, каждая из которых представлена в виде конструктора фреймов.

Рассмотрим на примере, как будет выглядеть страница, содержащая конструктор фреймов:

  • Синий блок — плеер/конструктор фрейма, отображающий набор виджетов.
  • Зеленый блок — декоратор виджета, добавляющий всем виджетам визуальное оформление и элемент управления в виде кнопки в шапке виджета.
  • Красный блок — виджет.