web_theme_creation.adoc

Создание новой темы

В проекте можно создать одну или несколько новых тем и дать возможность пользователям выбирать среди них подходящую. Создание новой темы позволяет также переопределять переменные файла *-theme.properties, задающие некоторые параметры, требуемые на стороне сервера:

• Размеры диалоговых окон по умолчанию.

• Ширина полей ввода по умолчанию.

• Размеры некоторых компонентов (Filter, FileMultiUploadField).

• Соответствие между именами значков и именами констант перечисления com.vaadin.server.FontAwesome для использования элементов шрифта Font Awesome в стандартных действиях и экранах платформы при включенном свойстве cuba.web.useFontIcons.

Новые темы можно легко создавать в CUBA Studio, а также в CUBA CLI или вручную. Рассмотрим все три способа создания новой темы на примере темы Hover Dark.

Создание новой темы в CUBA Studio:

• В главном меню нажмите CUBA > Advanced > Manage themes > Create custom theme. Введите имя новой темы: hover-dark. Выберите hover в выпадающем списке Base theme.

  Требуемая структура файлов темы будет автоматически создана в модуле web. Модуль webThemesModule и его конфигурация будут автоматически добавлены в скрипты settings.gradle и build.gradle. Сгенерированная задача сборки deployThemes позволит применять изменения в теме без перезапуска сервера приложения.

Создание темы вручную:

• Создайте следующую файловую структуру в модуле web проекта:

  link:../../../../../source/gui/themes/themes_44.scss[role=include]

• Содержимое файла app-component.scss:

  link:../../../../../source/gui/themes/themes_46.scss[role=include]

• Содержимое файла hover-dark.scss:

  link:../../../../../source/gui/themes/themes_47.scss[role=include]

• Содержимое файла styles.scss:

  link:../../../../../source/gui/themes/themes_48.scss[role=include]

• Создайте файл свойств hover-dark-theme.properties в подкаталоге web модуля web:

  @include=com/haulmont/cuba/hover-theme.properties

• Добавьте модуль webThemesModule в файл settings.gradle:

  link:../../../../../source/gui/themes/themes_50.groovy[role=include]

• Добавьте конфигурацию модуля webThemesModule в файл build.gradle:

  link:../../../../../source/gui/themes/themes_49.groovy[role=include]

• Наконец, создайте задачу gradle deployThemes в файле build.gradle, чтобы изменения в файлах темы применялись без перезапуска сервера приложения:

  link:../../../../../source/gui/themes/themes_51.groovy[role=include]

Создание темы с помощью CUBA CLI:

• Выполните команду theme, далее выберите тему hover.

  Файловая структура с расширением выбранной темы будет создана в модуле web проекта.

• Модифицируйте сгенерированную файловую структуру и содержимое файлов, чтобы они соответствовали примерам выше.

• Создайте файл hover-dark-theme.properties в подкаталоге web модуля web:

  @include=com/haulmont/cuba/hover-theme.properties

Задачи сборки темы в файлах build.gradle и settings.gradle будут созданы автоматически через CLI.

См. также [custom_theme_facebook].

Изменение server-side параметров темы

В теме Halo по умолчанию (при включенном свойстве приложения cuba.web.useFontIcons) значки стандартных действий и экранов платформы загружаются из шрифта Font Awesome. В этом случае можно заменить стандартный значок, задав в файле <your_theme>-theme.properties нужное соответствие между именем значка и именем элемента шрифта. Например, чтобы использовать значок "плюс" для действия create в новой теме Facebook, содержимое файла web/src/facebook-theme.properties должно быть следующим:

@include=com/haulmont/cuba/halo-theme.properties

cuba.web.icons.create.png = font-icon:PLUS

Фрагмент стандартного экрана списка пользователей в теме Facebook и с измененным значком действия create:

web_theme_creation/custom_theme_hover_dark.adoc

web_theme_creation/custom_theme_facebook.adoc