Skip to content

Latest commit

 

History

History
57 lines (42 loc) · 3.88 KB

web_theme_inheritance.adoc

File metadata and controls

57 lines (42 loc) · 3.88 KB
Raw
Наследование тем из компонентов приложения

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

Чтобы использовать тему из компонента без изменений, просто добавьте её в свойство приложения 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 для компонента приложения, следуя инструкции из раздела [web_theme_creation].

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

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

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

    link:../../../../../../source/gui/themes/themes_28.scss[role=include]

  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:

    link:../../../../../../source/gui/themes/themes_29.scss[role=include]

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

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

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

    link:../../../../../../source/gui/themes/themes_30.scss[role=include]
Tip

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