3.5.9.5. 创建可复用主题

任何主题都可以在没有应用程序组件的情况下打包和重用。要创建主题包,需要从头开始创建 Java 项目并将其打包在单个 JAR 文件中。按照以下步骤创建前面示例中 facebook 主题的发布。

  1. 在 IDE 中使用以下结构创建新项目。它是一个简单的 Java 项目,由 SCSS 文件和主题属性组成:

    1. halo-facebook/
    2. src/ //sources root
    3. halo-facebook/
    4. com.haulmont.cuba/
    5. app-component.scss
    6. halo-facebook.scss
    7. halo-facebook-defaults.scss
    8. halo-facebook-theme.properties
    9. styles.scss

    此示例主题项目可以从 GitHub 下载。

    • build.gradle 脚本:

      1. allprojects {
      2. group = 'com.haulmont.theme'
      3. version = '0.1'
      4. }
      5. apply(plugin: 'java')
      6. apply(plugin: 'maven')
      7. sourceSets {
      8. main {
      9. java {
      10. srcDir 'src'
      11. }
      12. resources {
      13. srcDir 'src'
      14. }
      15. }
      16. }
    • settings.gradle 文件:

      1. rootProject.name = 'halo-facebook'
    • app-component.scss 文件:

      1. @import "../halo-facebook";
      2. @mixin com_haulmont_cuba {
      3. @include halo-facebook;
      4. }
    • halo-facebook.scss 文件:

      1. @import "../@import "../";
      2. @mixin halo-facebook {
      3. @include halo;
      4. }
    • halo-facebook-defaults.scss 文件:

      1. @import "../halo/halo-defaults";
      2. $v-background-color: #fafafa;
      3. $v-app-background-color: #e7ebf2;
      4. $v-panel-background-color: #fff;
      5. $v-focus-color: #3b5998;
      6. $v-border-radius: 0;
      7. $v-textfield-border-radius: 0;
      8. $v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
      9. $v-font-size: 14px;
      10. $v-font-color: #37404E;
      11. $v-font-weight: 400;
      12. $v-link-text-decoration: none;
      13. $v-shadow: 0 1px 0 (v-shade 0.2);
      14. $v-bevel: inset 0 1px 0 v-tint;
      15. $v-unit-size: 30px;
      16. $v-gradient: v-linear 12%;
      17. $v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
      18. $v-shadow-opacity: 20%;
      19. $v-selection-overlay-padding-horizontal: 0;
      20. $v-selection-overlay-padding-vertical: 6px;
      21. $v-selection-item-border-radius: 0;
      22. $v-line-height: 1.35;
      23. $v-font-size: 14px;
      24. $v-font-weight: 400;
      25. $v-unit-size: 25px;
      26. $v-font-size--h1: 22px;
      27. $v-font-size--h2: 18px;
      28. $v-font-size--h3: 16px;
      29. $v-layout-margin-top: 8px;
      30. $v-layout-margin-left: 8px;
      31. $v-layout-margin-right: 8px;
      32. $v-layout-margin-bottom: 8px;
      33. $v-layout-spacing-vertical: 8px;
      34. $v-layout-spacing-horizontal: 8px;
      35. $v-table-row-height: 25px;
      36. $v-table-header-font-size: 13px;
      37. $v-table-cell-padding-horizontal: 5px;
      38. $v-focus-style: inset 0px 0px 1px 1px rgba($v-focus-color, 0.5);
      39. $v-error-focus-style: inset 0px 0px 1px 1px rgba($v-error-indicator-color, 0.5);
      40. $v-show-required-indicators: true;
    • halo-facebook-theme.properties 文件:

      1. @include=halo-theme.properties
  1. 使用 Gradle 任务构建和安装项目:

    1. gradle assemble install
  2. 通过修改 build.gradle 文件,将主题作为 Maven 依赖项添加到基于 CUBA 的项目中,有两种配置方式(gradle configurations):themes 和 compile:

    1. configure(webModule) {
    2. //...
    3. dependencies {
    4. provided(servletApi)
    5. compile(guiModule)
    6. compile('com.haulmont.theme:halo-facebook:0.1')
    7. themes('com.haulmont.theme:halo-facebook:0.1')
    8. }
    9. //...
    10. }

    如果在本地安装主题,不要忘记将 mavenLocal() 添加到仓库列表中:打开 Studio 中的 Project Properties 部分,并将本地 Maven 仓库坐标添加到仓库列表中。

  3. 要在项目中继承此主题并修改它,必须扩展此主题。扩展 halo 主题并将 themes/halo 文件夹重命名为 themes/halo-facebook

    1. themes/
    2. halo-facebook/
    3. branding/
    4. app-icon-login.png
    5. app-icon-menu.png
    6. com.company.application/
    7. app-component.scss
    8. halo-ext.scss
    9. halo-ext-defaults.scss
    10. favicon.ico
    11. styles.scss
  4. 修改 styles.scss 文件:

    1. @import "halo-facebook-defaults";
    2. @import "com.company.application/halo-ext-defaults";
    3. @import "app-components";
    4. @import "com.company.application/halo-ext";
    5. .halo-facebook {
    6. // include auto-generated app components SCSS
    7. @include app_components;
    8. @include com_company_application-halo-ext;
    9. }
  5. 最后一步是在 web-app.properties 文件中定义 halo-facebook-theme.properties 文件:

    1. cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /halo-facebook/halo-facebook-theme.properties

现在,可以从 Help > Settings 菜单中选择 halo-facebook 主题,或使用 cuba.web.theme 应用程序属性设置默认主题。