С момента своего создания платформа CUBA была в первую очередь предназначена для разработки корпоративных приложений. Обычно в таких приложениях интерфейс используется сотрудниками бэк-офиса - в нём много справочных и связанных данных с большим количеством полей, поэтому основной упор визуального оформления делается на функциональность. Отступы между элементами интерфейса в стандартных темах старались делать как можно компактнее для того, чтобы уместить на один экран как можно больше элементов.
За последнее десятилетие в обиход все больше и больше входили сенсорные устройства, их диагональ постепенно уменьшалась. Это повлияло на приоритеты в разработке. Теперь элементы управления должны быть удобными для нажатия, между ними необходимо пространство. Цветовое оформление должно быть более разнообразным и настраиваемым. Также мы видим потребность и возможность использовать универсальный пользовательский интерфейс на CUBA для более широкого круга пользователей.
Для удовлетворения этих потребностей мы разработали новую тему визуального оформления - Helium! Helium чище и ярче, в ней меньше визуального шума по сравнению со стандартными темами hover и halo. Другим важным нововведением стала возможность персонализации оформления с минимальными усилиями как со стороны конечного пользователя, так и разработчиков на CUBA.
Возможности
Прежде всего, в новой теме стиль оформления приложения можно менять прямо на ходу! Раньше в CUBA в использовались исключительно SCSS-переменные для определения цветов. Такой подход требовал перекомпиляции темы при каждом изменении цвета и создания отдельных тем для разных цветовых решений. Для задания цветов в новой теме используются нативные CSS переменные, которые применяются во время работы приложения на ходу, без необходимости перелогина.
Встроенные цветовые схемы
В теме есть две встроенных цветовых схемы - светлая и темная.
Чтобы изменить доступные конечному пользователю цветовые схемы, измените в theme.properties следующие свойства (процесс установки темы описан в разделе ниже):
cuba.theme.modes = light|dark
cuba.theme.defaultMode = light
Также можно создать свой вариант цветового оформления с помощью онлайн-редактора (более подробно описан ниже).
Встроенные настройки размеров элементов
В теме есть три встроенных размера: small (маленький), medium (средний) и large (большой):
Аналогично цветовым схемам, можно изменять доступные пользователю размеры в theme.properties через свойства:
cuba.theme.sizes = small|medium|large
cuba.theme.defaultSize = medium
Экран настроек
Экран настроек можно открыть через главное меню: Помощь -> Настройки темы. Пользователь может задать настройки цвета и размера для себя. Настройки сохраняются и применятся при входе в систему с любого устройства. Экран содержит базовые элементы интерфейса, что дает возможность предварительного просмотра вида приложения в зависимости от настроек.
Онлайн-демо и визуальный редактор
Другое важное нововведение - интерактивный онлайн редактор. Здесь можно поэкспериментировать с доступными переменными и сразу увидеть результат - как только вы увидите желаемый дизайн, просто нажмите кнопку download и следуйте инструкции, чтобы применить цветовую схему в своём CUBA-приложении.
Онлайн-редактором могут пользоваться не только разработчики. Можно дать ссылку на него клиенту, чтобы он сам настроил цветовую схему, как ему нравится, и выслал вам результат, на применение которого уйдет всего несколько минут. Также редактор позволяет импортировать CSS переменные, чтобы дорабатывать созданную ранее цветовую схему.
Для применения цветовой схемы нужно создать расширение темы Helium в своём проекте.
Установка
Тема поставляется в виде дополнения, которое совместимо с приложениями на платформе CUBA версии 7.1.5 и более поздних (желательно использование наиболее свежих версий 7.1.х и 7.2.х). Инструкции по установке дополнений вы найдете в этом разделе документации по Studio.
После установки дополнения пользователи смогут выбрать новую тему стандартным образом в экране настроек приложения (Помощь -> Параметры). Выберите Helium в поле Тема оформления.
Чтобы Helium был доступен по умолчанию, добавьте
cuba.web.theme = helium
в web-app.properties.
Если у вас установлено свойство cuba.themeConfig, не забудьте указать путь к свойствам Helium:
cuba.themeConfig = +/com/haulmont/addon/helium/web/helium-theme.properties
Если вы хотите настроить свойства темы, создайте в корневом пакете веб-модуля файл helium-theme.properties следующего содержания (настройки можно изменять):
@include=com/haulmont/addon/helium/web/helium-theme.properties
cuba.theme.modes = light|dark
cuba.theme.defaultMode = light
cuba.theme.sizes = small|medium|large
cuba.theme.defaultSize = medium
Этот файл свойств нужно также зарегистрировать в настройке cuba.themeConfig:
cuba.themeConfig = +/com/example/project/helium-theme.properties
Если необходима более детальная кастомизация с персонализированной цветовой схемой, создайте расширение темы по этой инструкции.
Roadmap
Мы планируем продолжить дopaбaтывaть тему Helium и реализовать новые возможности, в том числе:
- Улучшения темной цветовой схемы
- Предоставить больше шаблонов в редакторе темы
- Поддержать автоматическое переключение между светлой и темной цветовой схемой
- Переменную скругления границ, также на основе CSS
- Набор компонентов для Figma (набирающий популярность инструмент для онлайн дизайна интерфейсов).
Заключение
Надеемся, что новая тема и онлайн редактор будут полезны новым проектам, а также тем, кто хочет привнести что-то новое в существующие приложения. Если у вас возникнут вопросы, создайте тему на форуме. Исходный код доступен на GitHub: тема / редактор. С нетерпением ждем ваших отзывов!