5.5.7.1.3. Создание новой темы
В проекте можно создать одну или несколько новых тем и дать возможность пользователям выбирать среди них подходящую. Создание новой темы позволяет также переопределять переменные файла *-theme.properties
, задающие некоторые параметры, требуемые на стороне сервера:
-
Размеры диалоговых окон по умолчанию.
-
Ширина полей ввода по умолчанию.
-
Размеры некоторых компонентов (Filter, FileMultiUploadField).
-
Соответствие между именами значков и именами констант перечисления
com.vaadin.server.FontAwesome
для использования элементов шрифта Font Awesome в стандартных действиях и экранах платформы при включенном свойстве cuba.web.useFontIcons.
Новые темы можно легко создавать в CUBA Studio, а также в CUBA CLI или вручную. Рассмотрим все три способа создания новой темы на примере темы Hover Dark.
- Создание новой темы в CUBA Studio:
-
-
Откройте секцию Project properties и нажмите ссылку Manage themes > Create custom theme. Введите имя новой темы: hover-dark. Выберите hover в выпадающем списке Base theme.
Требуемая структура файлов темы будет автоматически создана в модуле web. Модуль
webThemesModule
и его конфигурация будут автоматически добавлены в скриптыsettings.gradle
и build.gradle. Сгенерированная задача сборкиdeployThemes
позволит применять изменения в теме без перезапуска сервера приложения.
-
- Создание темы вручную:
-
-
Создайте следующую файловую структуру в модуле web проекта:
web/ src/ themes/ hover-dark/ branding/ app-icon-login.png app-icon-menu.png com.haulmont.cuba/ app-component.scss favicon.ico hover-dark.scss hover-dark-defaults.scss styles.scss
-
Содержимое файла
app-component.scss
:@import "../hover-dark"; @mixin com_haulmont_cuba { @include hover-dark; }
-
Содержимое файла
hover-dark.scss
:@import "../hover/hover"; @mixin hover-dark { @include hover; }
-
Содержимое файла
styles.scss
:@import "hover-dark-defaults"; @import "hover-dark"; .hover-dark { @include hover-dark; }
-
Создайте файл свойств
hover-dark-theme.properties
в подкаталоге web модуля web:@include=hover-theme.properties
-
Добавьте модуль
webThemesModule
в файлsettings.gradle
:include(":${modulePrefix}-global", ":${modulePrefix}-core", ":${modulePrefix}-web", ":${modulePrefix}-web-themes") //... project(":${modulePrefix}-web-themes").projectDir = new File(settingsDir, 'modules/web/themes')
-
Добавьте конфигурацию модуля
webThemesModule
в файл build.gradle:def webThemesModule = project(":${modulePrefix}-web-themes") configure(webThemesModule) { apply(plugin: 'java') apply(plugin: 'maven') apply(plugin: 'cuba') appModuleType = 'web-themes' buildDir = file('../build/scss-themes') sourceSets { main { java { srcDir '.' } resources { srcDir '.' } } } }
-
Наконец, создайте задачу gradle
deployThemes
в файлеbuild.gradle
, чтобы изменения в файлах темы применялись без перезапуска сервера приложения:configure(webModule) { // . . . task buildScssThemes(type: CubaWebScssThemeCreation) task deployThemes(type: CubaDeployThemeTask, dependsOn: buildScssThemes) assemble.dependsOn buildScssThemes }
-
- Создание темы с помощью CUBA CLI:
-
-
Выполните команду
theme
, далее выберите тему hover.Файловая структура с расширением выбранной темы будет создана в модуле web проекта.
-
Модифицируйте сгенерированную файловую структуру и содержимое файлов, чтобы они соответствовали примерам выше.
-
Создайте файл
hover-dark-theme.properties
в подкаталоге web модуля web:@include=hover-theme.properties
Задачи сборки темы в файлах
build.gradle
иsettings.gradle
будут созданы автоматически через CLI. -
См. также Создание темы Facebook.
- Изменение server-side параметров темы
-
В теме Halo по умолчанию (при включенном свойстве приложения cuba.web.useFontIcons) значки стандартных действий и экранов платформы загружаются из шрифта Font Awesome. В этом случае можно заменить стандартный значок, задав в файле
<your_theme>-theme.properties
нужное соответствие между именем значка и именем элемента шрифта. Например, чтобы использовать значок "плюс" для действияcreate
в новой теме Facebook, содержимое файлаweb/src/facebook-theme.properties
должно быть следующим:@include=halo-theme.properties cuba.web.icons.create.png = font-icon:PLUS
Фрагмент стандартного экрана списка пользователей в теме Facebook и с измененным значком действия
create
: