Additional themes creation failed to run

I have created facebook theme that is working fine but when I have created another theme “maple”, it’s not working.

Here is what i am getting error when I run the app:


myApp-polymer-client:deploy UP-TO-DATE
:myApp-web:buildScssThemes[CubaWebScssThemeCreation] Import '../halo/halo' in 'D:\Studio Projects\ems\myApp\modules\web\build\themes-tmp\VAADIN\themes\maple\com.company\maple.scss' could not be found
 FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':myApp-web:buildScssThemes'.
> Unable to build theme D:\Studio Projects\ems\myapp\modules\web\build\themes-tmp\VAADIN\themes\maple\styles.scss

Content of maple-theme.properties


@include=halo-theme.properties

contents of web-app.properties


cuba.web.theme = halo
cuba.themeConfig = havana-theme.properties halo-theme.properties /com/company/facebook-theme.properties  maple-theme.properties /com/company/maple-theme.properties

content of app-component.scss


@import "maple";

@mixin com_company {
  @include com_company-maple;
}

Content of maple-default.scss


/* Override global theme constants or define new ones here */
$v-app-loading-text: "Loading Athena ERP Systems";
$v-background-color: #1a61b7;
$v-background-color2: #2c3c65;
$v-background-color3: #c0c0c0;
$v-focus-color: #fff;
$v-panel-background-color: $v-background-color2;
$v-overlay-background-color: $v-background-color;
$valo-menu-background-color: #2c3c65;
$v-overlay-shadow: 0 0 0 1px rgba(#fff, .5);
$v-window-shadow: $v-overlay-shadow;
$v-window-modality-curtain-background-color: $v-background-color3;
$v-bevel: false;
$v-gradient: false;
$v-shadow: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-border: 1px solid (v-tint 1.5);
$v-textfield-background-color: $v-background-color;
$v-font-family: sans-serif;
$v-font-size: 14px;

/*@import "../valo/valo";*/

Content of styles.scss


@import "../halo/halo-defaults";
@import "com.company/maple-defaults";
@import "app-components";
@import "com.company/maple";

.maple {
  // include auto-generated app components SCSS
  @include app_components;
  
  @include com_company-maple;
}

Thanks for helping where is what missing.

Hi,
You @import “com.company/maple”; So, where is this file?

it is under here: modules/web/themes/maple/maple.scss

In this case import should be @import “maple”; or move your maple.scss into “com.company” directory.

Hi Yuriy
Thanks. Tried but still something is wrong somewhere.

I have created a test project and attached. Thanks for having a look.

Mortoza

attached…

testtheme.zip (386.8K)

First of all, if you create a completely new theme - you have to use one of the existing themes as a basis or write all the CSS from scratch. In your case it means that you have to import and include “halo” theme files before customizing it.

Recommended structure for a new themes is:


mytheme:
    com.company.demo/
        app-component.scss
        mytheme-ext.scss          // theme SCSS
        mytheme-ext-defaults.scss // theme customizations 
    com.haulmont.cuba/
        app-component.scss        // cuba app-component include
    mytheme.scss                  // main theme file
    mytheme-defaults.scss         // main theme variables
    styles.scss                   // entry point of SCSS build procedure

In your case files will contain the following

styles.scss:


@import "maple-defaults";
@import "com.company.testtheme/maple-ext-defaults";
@import "app-components";
@import "com.company.testtheme/maple-ext";

.maple {
  // include auto-generated app components SCSS
  @include app_components;

  @include com_company_testtheme-maple;
}

maple.scss


@import "../halo/halo";

@mixin maple {
  @include halo;
}

maple-defaults.scss


@import "../halo/halo-defaults";

com.haulmont.cuba/app-component.scss:


@import "../maple";

@mixin com_haulmont_cuba {
  @include maple;
}

Files under com.company.testtheme will be the same as if you extend halo,
just change mixin names and includes.

I’ve attached modified version of maple theme, so you will be able to copy it to your project.

Do not forget to set cuba.themeConfig app property as it is described in docs.

In case of any trouble with theme building please check modules/web/build/themes-tmp directory. It contains all the files and generated app-components.scss includes, thus enabling you to investigate SCSS compilation problems.

maple.zip (9.8K)

HI Yuiry
Thank you for your help and the files.
As advised, I have copied the maple folder that you attached under the directory themes. But it is still not running.

Here is the error


================================================================
21:47:57.060 ERROR com.haulmont.cuba.web.AppUI - Unable to init ui
com.haulmont.cuba.core.global.DevelopmentException: Unable to load theme constants for: 'maple-theme.properties'
        at com.haulmont.cuba.gui.theme.ThemeConstantsRepository.loadThemeProperties(ThemeConstantsRepository.java:100)
        at com.haulmont.cuba.gui.theme.ThemeConstantsRepository.init(ThemeConstantsRepository.java:79)
        at com.haulmont.cuba.gui.theme.ThemeConstantsRepository.checkInitialized(ThemeConstantsRepository.java:57)
        at com.haulmont.cuba.gui.theme.ThemeConstantsRepository.getConstants(ThemeConstantsRepository.java:145)
        at com.haulmont.cuba.web.App.loadTheme(App.java:149)
        at com.haulmont.cuba.web.App.init(App.java:245)
        at com.haulmont.cuba.web.AppUI.init(AppUI.java:191)
        at com.vaadin.ui.UI.doInit(UI.java:693)
        at com.vaadin.server.communication.UIInitHandler.getBrowserDetailsUI(UIInitHandler.java:216)
        at com.vaadin.server.communication.UIInitHandler.synchronizedHandleRequest(UIInitHandler.java:74)
        at com.vaadin.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:41)
        at com.vaadin.server.VaadinService.handleRequest(VaadinService.java:1436)
        at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:385)
        at com.haulmont.cuba.web.sys.CubaApplicationServlet.serviceAppRequest(CubaApplicationServlet.java:301)
        at com.haulmont.cuba.web.sys.CubaApplicationServlet.service(CubaApplicationServlet.java:192)
        at javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
        at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
        at com.haulmont.cuba.web.sys.CubaHttpFilter.handleNotFiltered(CubaHttpFilter.java:108)
        at com.haulmont.cuba.web.sys.CubaHttpFilter.doFilter(CubaHttpFilter.java:95)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
        at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:198)
        at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
        at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:478)
        at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:140)
        at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:80)
        at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:624)
        at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:87)
        at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:342)
        at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:799)
        at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
        at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:861)
        at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1455)
        at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
        at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
        at java.lang.Thread.run(Thread.java:745)

Content of wep-app.properties


###############################################################################
#                              Configuration                                  #
###############################################################################

cuba.springContextConfig = +com/company/testtheme/web-spring.xml

cuba.dispatcherSpringContextConfig = +com/company/testtheme/web-dispatcher-spring.xml

cuba.persistenceConfig = +com/company/testtheme/persistence.xml

cuba.metadataConfig = +com/company/testtheme/metadata.xml

cuba.viewsConfig = +com/company/testtheme/views.xml

cuba.windowConfig = +com/company/testtheme/web-screens.xml

cuba.menuConfig = +com/company/testtheme/web-menu.xml

cuba.permissionConfig = +com/company/testtheme/web-permissions.xml

cuba.mainMessagePack = +com.company.testtheme.web

cuba.anonymousSessionId = 4e82f277-45b4-8bf6-86eb-f6a732f6da1e

cuba.creditsConfig = +

###############################################################################
#                                  Other                                      #
###############################################################################

# Middleware connection
cuba.connectionUrlList = http://localhost:8080/app-core

# Set to false if the middleware works on different JVM
cuba.useLocalServiceInvocation = true

cuba.webContextName = app

# Web session inactivity timeout in seconds
cuba.httpSessionExpirationTimeoutSec = 1800

cuba.web.theme = halo
cuba.themeConfig = havana-theme.properties halo-theme.properties maple-theme.properties

cuba.web.foldersPaneEnabled=false
cuba.availableLocales = English|en
cuba.localeSelectVisible = false

Created a file named maple-theme.properties and it’s contents as well as directory structure is the same what you suggested as is attached

As suggested, I have checked the modules/web/build/themes-tmp directory but not sure if there is any problem there. The file content is attached as zip file themes-temp.zip

would appreciate further help.

maple-theme properties

maple-vaadin directory

themes-tmp.zip (3.8M)

It worked. My mistake was in the web-app.properties file, there reference should be as follows
/com.company.mytheme/maple-theme.properties

Thank you again Yuriy