5.5.7.1.4. Наследование тем из компонентов приложения

Если ваш проект включает в себя компонент с новой темой, вы можете настроить использование этой темы во всём проекте.

Чтобы использовать тему из компонента без изменений, просто добавьте её в свойство приложения cuba.themeConfig:

cuba.web.theme = {theme-name}
cuba.themeConfig = havana-theme.properties halo-theme.properties /com/company/{app-component-name}/{theme-name}-theme.properties

Однако, чтобы переопределить некоторые переменные из родительской темы, сначала необходимо создать расширение темы в основном проекте.

В этом примере мы вновь используем тему facebook из предыдущего примера.

  1. Создайте тему facebook для компонента приложения, следуя инструкции из раздела Создание новой темы.

  2. Установите компонент, используя меню Studio, как описано в разделе Пример создания и использования компонента.

  3. Расширьте тему halo в проекте, в котором используется ваш компонент.

  4. В IDE переименуйте все вхождения halo в каталоге themes, включая имена файлов, в facebook. В итоге у вас должна получиться следующая структура:

    themes/
    facebook/
        branding/
            app-icon-login.png
            app-icon-menu.png
        com.company.application/
            app-component.scss
            facebook-ext.scss
            facebook-ext-defaults.scss
        favicon.ico
        styles.scss

  5. Файл app-component.scss группирует модификации темы в конкретном компоненте приложения. В процессе сборки SCSS плагин Gradle автоматически находит компоненты и включает их в генерируемый файл modules/web/build/themes-tmp/VAADIN/themes/{theme-name}/app-components.scss.

    По умолчанию переменные темы из {theme-name}-ext-defaults не наследуются в проект. Чтобы изменить это поведение, вручную добавьте включение в файл app-component.scss:

    @import "facebook-ext";
@import "facebook-ext-defaults";

@mixin com_company_application {
  @include com_company_application-facebook-ext;
}

    На этом этапе тема facebook уже импортирована в проект из компонента приложения.

  6. Теперь вы можете использовать файлы facebook-ext.scss и facebook-ext-defaults.scss из пакета com.company.application, чтобы переопределить переменные темы компонента и модифицировать её для конкретного проекта.

  7. Добавьте свойства приложения в файл web-app.properties, чтобы сделать тему facebook доступной в меню приложения Settings. Используйте относительный путь для ссылки на файл facebook-theme.properties.

    cuba.web.theme = facebook
cuba.themeConfig = havana-theme.properties halo-theme.properties /com/company/{app-component-name}/facebook-theme.properties
Tip

Если при сборке тем возникли проблемы, проверьте каталог modules/web/build/themes-tmp. В нём находятся генерируемые файлы и включения app-component.scss, которые можно использовать для поиска проблем компиляции SCSS.