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

В проекте можно создать одну или несколько новых тем и дать возможность пользователям выбирать среди них подходящую. Создание новой темы позволяет также переопределять переменные файла *-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 проекта:

    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:

gui theme facebook 1