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

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

  1. В этом примере мы вновь используем тему facebook из предыдущего примера. Создайте тему 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, чтобы переопределить переменные темы компонента и модифицировать её для конкретного проекта. В данном примере мы будем использовать тему facebook как она есть, поэтому оставим эти файлы пустыми.

  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.