Группировка атрибутов на формах декларативного фреймворка Evado

Правильное размещение полей при заполнении форм позволяет не только оптимизировать ввод, но и улучшить производительность. Во фреймворке Evado для этого служит группировка атрибутов. Группы позволяют объединять поля ввода в блоки, колонки, вкладки.

Декларативный фреймворк Evado незаменим для быстрой и надежной разработки многопользовательских приложений с использованием открытых серверов Node.js и MongoDB. Пример разработки простого многопользовательского веб-приложения.

Группировка атрибутов во фреймворке Evado

Группы создаются внутри класса метаданных. Каждая группа должна иметь кодовое имя, которое однозначно идентифицирует ее в контексте класса. Кроме того, могут быт заданы:

• ярлык - отображает название для блочных групп и вкладок;
• тип - определяет функциональность группы (см. ниже про вкладки и колонки);

Создание новой группы в модуле «Студия» фреймворка Evado

• порядковый номер - определяет позицию на форме среди других атрибутов и групп;
• родительская группа - группа может находиться внутри другой группы. Для этого необходимо указать родителя в дочерней группе. Глубина вложенности неограниченна.

Вкладки

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

Разбиение атрибутов по вкладкам

Создайте группу с типом «Контейнер вкладок». Это базовая группа определяющая, что все её дочерние группы являются вкладками.

Тип группы определяет шаблон, который будет использоваться при рендере HTML-представления.

Далее создайте группы, указывая родителем контейнер вкладок. Добавьте атрибуты в группы. Экспортируйте метаданные в приложение и перейдите в модуль «Офис», чтобы увидеть результат.

Обычно на форме используется только один набор вкладок, который располагается под всеми остальными данными.

Колонки

Колонки служат для оптимального использования рабочего пространства широкоэкранных мониторов. Для примера разделим поля формы на две колонки.

Разбиение атрибутов на колонки

Создайте группу с типом «Контейнер колонок». Затем создайте две группы, указав родителем контейнер колонок. Таким образом, каждая группа будет представлять собой одну колонку. Для каждой группы добавьте опцию {"css":"col-xl-6"}, которая добавит указанный CSS класс к блоку колонки.

Форматирование колонок осуществляется с помощью разметки CSS классов Bootstrap. Это позволяет динамически изменять размер и положение колонок в зависимости от ширины экрана.

Далее добавьте атрибуты в созданные группы колонок. Экспортируйте метаданные в приложение и перейдите в модуль «Офис», чтобы увидеть результат.

Улучшение форматирования

На формах фреймворка Evado каждый атрибут имеет базовую разметку состоящую из ярлыка (названия) и значения (поле ввода). Эти элементы, с помощью стилей Bootstrap, размещаются в одну или две строки в зависимости от ширины экрана. Но ширина колонки в два раза меньше формы, поэтому атрибуты выглядят не выровненными по сравнению с теми, что находятся вне группы.

Внутри колонки элементы атрибутов не выровнены относительно тех, что снаружи

Для решения этой проблемы перейдите в группу контейнер колонок и укажите CSS классы, которые будут назначены на элементы всех вложенных атрибутов (в том числе и внутри дочерних групп): {"cssLabel":"col-xl-4 col-lg-3", "cssValue":"col-xl-8 col-lg-9"}.

Настройки группы

Основные настройки группы доступны на вкладке «Главная». Дополнительные и пользовательские настройки могут задаваться через свойства «Опции» в формате JSON.

Основные настройки группы

Настройка «Активно» отвечает за то, что группа будет по умолчанию развернута. Если группа - это вкладка, то она будет выбрана.

Настройка «Загружаемо» отвечает за то, что содержимое группы будет получено в момент ее активации пользователем, а не при отображении формы. Это может значительно сэкономить ресурсы, особенно при применении для объёмных и редко используемых данных.

Настройки «Только чтение» и «Обязательно» определяют свойства для всех вложенных атрибутов группы, перекрывая их собственные значения.

Представления

Представления переопределяют некоторые свойства классов для использования в определенных ситуациях. Например, при редактировании объекта будет использовано представление к кодовым именем edit. Если же такое отсутствует, то будет использован сам класс.

Для групп класса, которые необходимо переопределить, внутри представления создаются собственные группы с таким же кодовыми именами. Кроме того, можно полностью отключить группы для представления.

Заключение

Наглядный пример использования групп можно найти в демо-приложении фреймворка Evado, доступном в открытом репозитории.

Декларативный фреймворк Evado - cоздавай, наполняй, управляй!