3.5.8.3. 创建自定义主题

可以在项目中创建一个或多个应用程序主题,并为用户提供选择最合适的应用程序主题的时机。创建新主题还允许覆盖 *-theme.properties 文件 中的变量,这些变量定义了一些服务端参数:

  • 默认对话框窗口大小。

  • 默认输入框宽度。

  • 某些组件的尺寸(FilterFileMultiUploadField)。

  • 如果 cuba.web.useFontIcons 属性启用,则在标准操作和平台界面中使用 Font Awesome 图标时,图标名称和 com.vaadin.server.FontAwesome 枚举的常量值对应。

可以在 CUBA Studio 、 CUBA CLI 中轻松创地建新主题,也可以手动创建。我们看看以 Hover Dark 自定义主题为例的所有三种创建方式。

在 CUBA Studio 中创建:
  • 在主菜单中,单击 CUBA > Advanced > Manage themes > Create custom theme。输入新主题的名称: hover-dark。在 Base theme 下拉列表中选择 hover 主题。

    将在 web 模块中创建所需的文件结构。webThemesModule 模块及其配置将自动被添加到 settings.gradlebuild.gradle文件中。此外,生成的 deployThemes gradle 任务允许在不重启服务器的情况下查看主题更改。

手动创建:
  • 在项目的 web 模块中创建以下文件结构:

    web/
      src/
      themes/
        hover-dark/
          branding/
              app-icon-login.png
              app-icon-menu.png
          com.haulmont.cuba/
              app-component.scss
          favicon.ico
          hover-dark.scss
          hover-dark-defaults.scss
          styles.scss
  • app-component.scss 文件:

    @import "../hover-dark";
    
    @mixin com_haulmont_cuba {
      @include hover-dark;
    }
  • hover-dark.scss 文件:

    @import "../hover/hover";
    
    @mixin hover-dark {
      @include hover;
    }
  • styles.scss 文件:

    @import "hover-dark-defaults";
    @import "hover-dark";
    
    .hover-dark {
      @include hover-dark;
    }
  • web 模块的 web 子目录中创建 hover-dark-theme.properties 文件:

    @include=hover-theme.properties
  • webThemesModule 模块添加到 settings.gradle 文件中:

    include(":${modulePrefix}-global", ":${modulePrefix}-core", ":${modulePrefix}-web", ":${modulePrefix}-web-themes")
    //...
    project(":${modulePrefix}-web-themes").projectDir = new File(settingsDir, 'modules/web/themes')
  • webThemesModule 模块配置添加到build.gradle文件中:

    def webThemesModule = project(":${modulePrefix}-web-themes")
    
    configure(webThemesModule) {
      apply(plugin: 'java')
      apply(plugin: 'maven')
      apply(plugin: 'cuba')
    
      appModuleType = 'web-themes'
    
      buildDir = file('../build/scss-themes')
    
      sourceSets {
        main {
          java {
            srcDir '.'
          }
          resources {
            srcDir '.'
          }
        }
      }
    }
  • 最后,在 build.gradle 中创建 deployThemes gradle 任务,以查看更改而不重启服务器:

    configure(webModule) {
      // . . .
      task buildScssThemes(type: CubaWebScssThemeCreation)
      task deployThemes(type: CubaDeployThemeTask, dependsOn: buildScssThemes)
      assemble.dependsOn buildScssThemes
    }
CUBA CLI中创建:
  • 运行 theme 命令,然后选择 hover 主题。

    将在项目的 web 模块中创建特定的文件结构。

  • 修改生成的文件结构和文件内容,使其与上面的文件相对应。

  • web 模块的资源目录中创建 hover-dark-theme.properties 文件:

    @include=hover-theme.properties

CLI 将自动更新 build.gradlesettings.gradle 文件。

另请参阅创建 Facebook 主题部分中的示例。

修改服务端主题参数

在 Halo 主题中,标准操作和平台界面会默认使用 Font Awesome 图标(如果启用了cuba.web.useFontIcons)。在这种情况下,可以通过在 <your_theme>-theme.properties 文件中设置图标和字体元素名称之间所需的映射来替换标准图标。例如,要在新 Facebook 主题中要为 create 操作使用"plus"图标,facebook-theme.properties 文件应包含以下内容:

@include=halo-theme.properties

cuba.web.icons.create.png = font-icon:PLUS

Facebook 主题中带有修改后的 create 操作的标准用户浏览界面的片段:

gui theme facebook 1