3.5.9.4. 使用应用程序组件中的主题

如果项目包含带有自定义主题的应用程序组件,则可以将此主题用于整个项目。

要按原样继承主题,只需将其添加到cuba.themeConfig应用程序属性:

  1. cuba.web.theme = {theme-name}
  2. cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /com/company/{app-component-name}/{theme-name}-theme.properties

如果要覆盖父主题中的某些变量,则首先需要在项目中创建主题扩展。

在下面的例子中,我们将使用创建自定义主题部分中的 facebook 主题。

  1. 按照步骤为应用程序组件创建 facebook 主题。

  2. 使用 Studio 菜单安装应用程序组件,如应用程序组件示例部分所述。

  3. 在使用应用程序组件的项目中扩展 halo 主题。

  4. 通过 IDE,将 themes 目录下的所有文件名中的 halo 重命名为 facebook,以获得以下结构:

    1. themes/
    2. facebook/
    3. branding/
    4. app-icon-login.png
    5. app-icon-menu.png
    6. com.company.application/
    7. app-component.scss
    8. facebook-ext.scss
    9. facebook-ext-defaults.scss
    10. favicon.ico
    11. styles.scss
  5. app-component.scss 文件合并应用程序组件的主题修改。在 SCSS 构建过程中,Gradle 插件会自动查找应用程序组件并将其导入生成的 modules/web/build/themes-tmp/VAADIN/themes/{theme-name}/app-components.scss 文件中。

    默认情况下,app-component.scss 不包含来自 {theme-name}-ext-defaults 的变量改动。要包含变量改动到 app 组件包,需要在 app-component.scss 中手动导入:

    1. @import "facebook-ext";
    2. @import "facebook-ext-defaults";
    3. @mixin com_company_application {
    4. @include com_company_application-facebook-ext;
    5. }

    在这个阶段,facebook 主题已经从 app 组件导入到项目中。

  6. 现在,可以使用 com.company.application 包中的 facebook-ext.scssfacebook-ext-defaults.scss 文件覆盖 app 组件主题中的变量,并为具体项目自定义变量。

  7. 将以下属性添加到 web-app.properties 文件中,以使应用程序的 Settings 菜单中的 facebook 主题可用。使用相对路径从 app 组件引用 facebook-theme.properties

    1. cuba.web.theme = facebook
    2. cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /com/company/{app-component-name}/facebook-theme.properties

如果主题构建有任何问题,请检查 modules/web/build/themes-tmp 目录。它包含所有文件和生成的 app-component.scss,从而能够查找 SCSS 编译问题。