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

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

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

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

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

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

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

Рассмотрим пример создания на основе Halo новой темы Facebook, напоминающей интерфейс сайта известной социальной сети.

  1. В CUBA Studio откройте секцию Project Properties и нажмите ссылку Create theme extension. В диалоговом окне выберите halo и нажмите Create. В проекте будет создано расширение темы Halo, как описано в предыдущем разделе.

  2. Переименуйте созданный в модуле web каталог themes/halo в themes/facebook, аналогично замените префикс halo на facebook в именах файлов.

  3. Скопируйте в themes/facebook файл halo-ext.scss и переименуйте его в facebook.scss, также скопируйте и переименуйте halo-ext-defaults.scss в facebook-defaults.scss.

  4. Создайте новый каталог com.haulmont.cuba в themes/facebook и скопируйте в него файл app-component.scss. В итоге должна получиться следующая структура:

    themes/
        facebook/
            branding/
                app-icon-login.png
                app-icon-menu.png
            com.company.application/
                app-component.scss
                facebook-ext.scss                   // theme SCSS
                facebook-ext-defaults.scss          // theme customizations
            com.haulmont.cuba/
                app-component.scss                  // cuba app-component include
            facebook.scss                           // main theme file
            facebook-defaults.scss                  // main theme variables
            favicon.ico
            styles.scss                             // entry point of SCSS build procedure
  5. Отредактируйте файл styles.scss:

    @import "facebook-defaults";
    @import "facebook";
    
    .facebook {
      @include facebook;
    }
  6. Отредактируйте файл facebook.scss:

    @import "../halo/halo";
    
    @mixin facebook {
      @include halo;
    }
  7. Отредактируйте файл app-component.scss из каталога com.haulmont.cuba:

    @import "../facebook";
    
    @mixin com_haulmont_cuba {
      @include facebook;
    }
  8. Скопируйте в файл facebook-defaults.scss следующие переменные:

    @import "../halo/halo-defaults";
    
    $v-background-color: #fafafa;
    $v-app-background-color: #e7ebf2;
    $v-panel-background-color: #fff;
    $v-focus-color: #3b5998;
    
    $v-border-radius: 0;
    $v-textfield-border-radius: 0;
    
    $v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
    $v-font-size: 14px;
    $v-font-color: #37404E;
    $v-font-weight: 400;
    
    $v-link-text-decoration: none;
    $v-shadow: 0 1px 0 (v-shade 0.2);
    $v-bevel: inset 0 1px 0 v-tint;
    $v-unit-size: 30px;
    $v-gradient: v-linear 12%;
    $v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
    $v-shadow-opacity: 20%;
    $v-selection-overlay-padding-horizontal: 0;
    $v-selection-overlay-padding-vertical: 6px;
    $v-selection-item-border-radius: 0;
    
    $v-line-height: 1.35;
    $v-font-size: 14px;
    $v-font-weight: 400;
    $v-unit-size: 25px;
    
    $v-font-size--h1: 22px;
    $v-font-size--h2: 18px;
    $v-font-size--h3: 16px;
    
    $v-layout-margin-top: 8px;
    $v-layout-margin-left: 8px;
    $v-layout-margin-right: 8px;
    $v-layout-margin-bottom: 8px;
    
    $v-layout-spacing-vertical: 8px;
    $v-layout-spacing-horizontal: 8px;
    
    $v-table-row-height: 25px;
    $v-table-header-font-size: 13px;
    $v-table-cell-padding-horizontal: 5px;
    
    $v-focus-style: inset 0px 0px 1px 1px rgba($v-focus-color, 0.5);
    $v-error-focus-style: inset 0px 0px 1px 1px rgba($v-error-indicator-color, 0.5);
  9. Файлы в каталоге com.company.application используются, чтобы модифицировать тему для конкретного проекта. В данном примере мы не будет добавлять к теме facebook дополнительных модификаций, поэтому удалите содержимое этих файлов и оставьте их пустыми.

  10. Создайте в подкаталоге src модуля web файл facebook-theme.properties:

    modules/
      web/
        src/
          com.company.application/
            web/
              facebook-theme.properties

    и поместите в него следующую строку:

    @include=halo-theme.properties

    При необходимости в этом файле можно переопределять server-side переменные темы, заданные в файле halo-theme.properties платформы.

  11. В файл web-app.properties добавьте следующие свойства:

    cuba.web.theme = facebook
    cuba.themeConfig = havana-theme.properties halo-theme.properties /com/company/application/web/facebook-theme.properties

    Свойство приложения cuba.themeConfig определяет, какие темы будут доступны в меню приложения Settings.

  12. Пересоберите приложение и запустите сервер. Теперь при первом входе пользователь увидит приложение в теме Facebook, и в окне HelpSettings сможет выбирать между темами Facebook, Halo и Havana.

Изменение 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