主题 - 创建可复用主题 - 《CUBA 框架开发者手册 Version 7.1》

3.5.9.5. 创建可复用主题

3.5.9.5. 创建可复用主题

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

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

halo-facebook/
    src/                                            //sources root
        halo-facebook/
            com.haulmont.cuba/
                app-component.scss
            halo-facebook.scss
            halo-facebook-defaults.scss
            halo-facebook-theme.properties
            styles.scss

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

build.gradle 脚本：

allprojects {
    group = 'com.haulmont.theme'
    version = '0.1'
}
apply(plugin: 'java')
apply(plugin: 'maven')
sourceSets {
    main {
        java {
            srcDir 'src'
        }
        resources {
            srcDir 'src'
        }
    }
}

settings.gradle 文件：
```
rootProject.name = 'halo-facebook'
```

app-component.scss 文件：

@import "../halo-facebook";
@mixin com_haulmont_cuba {
  @include halo-facebook;
}

halo-facebook.scss 文件：

@import "../@import "../";
@mixin halo-facebook {
  @include halo;
}

halo-facebook-defaults.scss 文件：

@import "../halo/halo-defaults";
$v-background-color: #fafafa;
$v-app-background-color: #e7ebf2;
$v-panel-background-color: #fff;
$v-focus-color: #3b5998;
$v-border-radius: 0;
$v-textfield-border-radius: 0;
$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
$v-font-size: 14px;
$v-font-color: #37404E;
$v-font-weight: 400;
$v-link-text-decoration: none;
$v-shadow: 0 1px 0 (v-shade 0.2);
$v-bevel: inset 0 1px 0 v-tint;
$v-unit-size: 30px;
$v-gradient: v-linear 12%;
$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
$v-shadow-opacity: 20%;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-selection-item-border-radius: 0;
$v-line-height: 1.35;
$v-font-size: 14px;
$v-font-weight: 400;
$v-unit-size: 25px;
$v-font-size--h1: 22px;
$v-font-size--h2: 18px;
$v-font-size--h3: 16px;
$v-layout-margin-top: 8px;
$v-layout-margin-left: 8px;
$v-layout-margin-right: 8px;
$v-layout-margin-bottom: 8px;
$v-layout-spacing-vertical: 8px;
$v-layout-spacing-horizontal: 8px;
$v-table-row-height: 25px;
$v-table-header-font-size: 13px;
$v-table-cell-padding-horizontal: 5px;
$v-focus-style: inset 0px 0px 1px 1px rgba($v-focus-color, 0.5);
$v-error-focus-style: inset 0px 0px 1px 1px rgba($v-error-indicator-color, 0.5);
$v-show-required-indicators: true;

halo-facebook-theme.properties 文件：
```
@include=halo-theme.properties
```

使用 Gradle 任务构建和安装项目：
```
gradle assemble install
```
通过修改 build.gradle 文件，将主题作为 Maven 依赖项添加到基于 CUBA 的项目中，有两种配置方式（gradle configurations）：themes 和 compile：
```
configure(webModule) {
    //...
    dependencies {
        provided(servletApi)
        compile(guiModule)
        compile('com.haulmont.theme:halo-facebook:0.1')
        themes('com.haulmont.theme:halo-facebook:0.1')
    }
    //...
}
```
如果在本地安装主题，不要忘记将 mavenLocal() 添加到仓库列表中：打开 Studio 中的 Project Properties 部分，并将本地 Maven 仓库坐标添加到仓库列表中。

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

themes/
    halo-facebook/
        branding/
            app-icon-login.png
            app-icon-menu.png
        com.company.application/
            app-component.scss
            halo-ext.scss
            halo-ext-defaults.scss
        favicon.ico
        styles.scss

修改 styles.scss 文件：

@import "halo-facebook-defaults";
@import "com.company.application/halo-ext-defaults";
@import "app-components";
@import "com.company.application/halo-ext";
.halo-facebook {
  // include auto-generated app components SCSS
  @include app_components;
  @include com_company_application-halo-ext;
}

最后一步是在 web-app.properties 文件中定义 halo-facebook-theme.properties 文件：

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

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