Custom theme with Spring Initializr and Maven

Dominik57 · October 12, 2016, 9:45pm

Hello all,

I created sample Vaadin project using Spring Initializr and getting my custom theme to work is getting me crazy … I googled for hours, looking for some tips on this forum as well but nothing helped. Is anyone able to help me with this ? It would be great Please feel free to ask questions, what I’ve done so far is:

put styles.scss and myCustom.scss in both scr/main/resources and src/main/webapp (I’m not sure where it should be so I put in both places) in VAADIN/themes/*.scss
I put vaadin.servlet.productionMode=false in application.properties

My build from pom.xml :

<build>

        <plugins>

            <plugin>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-maven-plugin</artifactId>

            </plugin>

            <plugin>

                <groupId>com.vaadin</groupId>

                <artifactId>vaadin-maven-plugin</artifactId>

                <configuration>

                    <webappDirectory>${basedir}/src/main/resources/</webappDirectory>

                    <hostedWebapp>${basedir}/src/main/resources/</hostedWebapp>

                    <warSourceDirectory>${basedir}/src/main/resources/</warSourceDirectory>

                </configuration>

                <executions>

                    <execution>

                        <goals>

                            <goal>resources</goal>

                            <goal>update-widgetset</goal>

                            <goal>compile</goal>

                            <!-- <goal>update-theme</goal> -->

                            <goal>compile-theme</goal>

                        </goals>

                    </execution>

                </executions>

            </plugin>

        </plugins>

        <resources>

            <resource>

                <directory>src/main/resources</directory>

            </resource>

            <resource>

                <directory>src/main/webapp</directory>

            </resource>

        </resources>

</build>

and just to be clear … I don’t want to run any maven targets manually, it would be great if the themes compile automatically (on-the-fly). Is this possible to make it work ? Please, I need help with this. Thanks guys !

Mirjan2 · October 13, 2016, 1:05pm

Add these in your maven properties, so they would look somewhat like this :

<properties> .... <vaadin.version>7.7.3</vaadin.version> <vaadin.plugin.version>7.7.3</vaadin.plugin.version> <jetty.plugin.version>9.3.9.v20160517</jetty.plugin.version> <vaadin.widgetset.mode>local</vaadin.widgetset.mode> .... </properties>Then add the following under build/plugins

<plugin> <groupId>com.vaadin</groupId> <artifactId>vaadin-maven-plugin</artifactId> <version>${vaadin.plugin.version}</version> <executions> <execution> <goals> <goal>update-theme</goal> <goal>update-widgetset</goal> <goal>compile</goal> </goals> </execution> </executions> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-clean-plugin</artifactId> <version>3.0.0</version>  <configuration> <filesets> <fileset> <directory>src/main/webapp/VAADIN/themes</directory> <includes> <include>**/styles.css</include> <include>**/styles.scss.cache</include> </includes> </fileset> </filesets> </configuration> </plugin>Place VAADIN under src/main/webapp. Your theme should be under src/main/webapp/VAADIN/themes/mytheme where mytheme is your theme’s name.

Let me know if this works for you!

Dominik57 · October 13, 2016, 9:22pm

Mirjan Merruko:

Add these in your maven properties, so they would look somewhat like this :

<properties> .... <vaadin.version>7.7.3</vaadin.version> <vaadin.plugin.version>7.7.3</vaadin.plugin.version> <jetty.plugin.version>9.3.9.v20160517</jetty.plugin.version> <vaadin.widgetset.mode>local</vaadin.widgetset.mode> .... </properties>Then add the following under build/plugins

<plugin> <groupId>com.vaadin</groupId> <artifactId>vaadin-maven-plugin</artifactId> <version>${vaadin.plugin.version}</version> <executions> <execution> <goals> <goal>update-theme</goal> <goal>update-widgetset</goal> <goal>compile</goal> </goals> </execution> </executions> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-clean-plugin</artifactId> <version>3.0.0</version>  <configuration> <filesets> <fileset> <directory>src/main/webapp/VAADIN/themes</directory> <includes> <include>**/styles.css</include> <include>**/styles.scss.cache</include> </includes> </fileset> </filesets> </configuration> </plugin>Place VAADIN under src/main/webapp. Your theme should be under src/main/webapp/VAADIN/themes/mytheme where mytheme is your theme’s name.

Let me know if this works for you!

Hi !
Thanks for tips but…stil:
Vaadin plugin could not find any themes.

[INFO]
No themes found. Use the parameter “vaadin.theme” to explicitly select a theme.

is this working for you ? Maybe this is a bug, I don’t know what to do with it. It should be simple to use custom theme for Vaadin project created by spring initlialzr - but it is not. Could you plese suggest any other advices ? Thanks !

Mirjan2 · October 14, 2016, 7:48am

Hi,

This is interesting for sure. Could you perhaps attach the pom.xml file in the thread? I could add a theme and a UI to it and see if we can move this forward.

Dominik57 · October 15, 2016, 8:16am

Hi, sure I can. I tried to figure out something based on your suggestion but everything fails. My pom.xml :

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>




<groupId>com.wsei</groupId>

<artifactId>helpService</artifactId>

    <version>0.0.1-SNAPSHOT</version>

<packaging>war</packaging>




    <name>helpService</name>

<description>Help Service</description>




<parent>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>1.4.1.RELEASE</version>

        <relativePath /> <!-- lookup parent from repository -->

</parent>




<properties>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

        <java.version>1.8</java.version>

        <vaadin.version>7.7.3</vaadin.version>

        <vaadin.theme>helpService</vaadin.theme>

        <vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>

        <productionMode>false</productionMode>

        <vaadin.version>7.7.3</vaadin.version>

<vaadin.plugin.version>7.7.3</vaadin.plugin.version>

<jetty.plugin.version>9.3.9.v20160517</jetty.plugin.version>

<vaadin.widgetset.mode>local</vaadin.widgetset.mode>

</properties>




<dependencies>

        <dependency>

            <groupId>com.vaadin</groupId>

            <artifactId>vaadin-spring-boot-starter</artifactId>

            <version>1.0.1</version>

        </dependency>

        <dependency>

            <groupId>org.hibernate</groupId>

            <artifactId>hibernate-core</artifactId>

            <version>5.2.2.Final</version>

        </dependency>

        <dependency>

            <groupId>javax.mail</groupId>

            <artifactId>mail</artifactId>

            <version>1.5.0-b01</version>

        </dependency>

        <dependency>

            <groupId>mysql</groupId>

            <artifactId>mysql-connector-java</artifactId>

            <version>5.1.6</version>

        </dependency>

        <dependency>

            <groupId>org.javassist</groupId>

            <artifactId>javassist</artifactId>

            <version>3.18.0-GA</version>

        </dependency>

        <dependency>

            <groupId>com.vaadin</groupId>

            <artifactId>vaadin-theme-compiler</artifactId>

            <version>7.1.15</version>

            <scope>provided</scope>

        </dependency>

        <dependency>

            <groupId>com.vaadin</groupId>

            <artifactId>vaadin-themes</artifactId>

            <version>${vaadin.version}</version>

            <scope>provided</scope>

        </dependency>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-tomcat</artifactId>

            <scope>provided</scope>

        </dependency>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-test</artifactId>

            <scope>test</scope>

        </dependency>

</dependencies>




<dependencyManagement>

        <dependencies>

            <dependency>

                <groupId>com.vaadin</groupId>

                <artifactId>vaadin-bom</artifactId>

                <version>7.7.3</version>

                <type>pom</type>

                <scope>import</scope>

            </dependency>

        </dependencies>

</dependencyManagement>




<build>

        <plugins>

            <!-- <plugin>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-maven-plugin</artifactId>

            </plugin> -->

        <!--     <plugin>

                <groupId>com.vaadin</groupId>

                <artifactId>vaadin-maven-plugin</artifactId>

                <configuration>

                    <webappDirectory>${basedir}/src/main/resources/</webappDirectory>

                    <hostedWebapp>${basedir}/src/main/resources/</hostedWebapp>

                    <warSourceDirectory>${basedir}/src/main/resources/</warSourceDirectory>

                </configuration>

                <executions>

                    <execution>

                        <goals>

                            <goal>resources</goal>

                            <goal>update-widgetset</goal>

                            <goal>compile</goal>

                            <goal>update-theme</goal>

                            <goal>compile-theme</goal>

                        </goals>

                    </execution>

                </executions>

            </plugin>

            <plugin>

                <groupId>com.vaadin</groupId>

                <artifactId>vaadin-maven-plugin</artifactId>

                <version>${vaadin.plugin.version}</version>

                <executions>

                    <execution>

                        <goals>

                            <goal>update-theme</goal>

                            <goal>update-widgetset</goal>

                            <goal>compile</goal>

                        </goals>

                    </execution>

                </executions>

            </plugin> -->

            <plugin>

                <groupId>com.vaadin</groupId>

                <artifactId>vaadin-maven-plugin</artifactId>

                <version>${vaadin.plugin.version}</version>

                <executions>

                    <execution>

                        <goals>

                            <goal>update-theme</goal>

                            <goal>update-widgetset</goal>

                            <goal>compile</goal>

                        </goals>

                    </execution>

                </executions>

            </plugin>

            <plugin>

                <groupId>org.apache.maven.plugins</groupId>

                <artifactId>maven-clean-plugin</artifactId>

                <version>3.0.0</version>

                <!-- Clean up also any pre-compiled themes -->

                <configuration>

                    <filesets>

                        <fileset>

                            <directory>src/main/webapp/VAADIN/themes</directory>

                            <includes>

                                <include>**/styles.css</include>

                                <include>**/styles.scss.cache</include>

                            </includes>

                        </fileset>

                    </filesets>

                </configuration>

            </plugin>

        </plugins>

        <resources>

            <resource>

                <directory>src/main/resources</directory>

            </resource>

            <resource>

                <directory>src/main/webapp</directory>

            </resource>

        </resources>

</build>







</project>

Mirjan2 · October 17, 2016, 8:06am

The pom.xml is fine, I’ve managed to compile the theme (with the addition of compile-theme after update-widgetset), and there was no problem as well using on-the-fly compilation.

After reading your first post I suspect that the way you package your themes could be wrong. A theme is a folder under “VAADIN/themes”. So in your case for example I would suggest the following :

Use lower case for the theme name (“helpservice” instead of “helpService”)
Place the “VAADIN” folder under “src/main/webapp”
Place the “helpservice” folder under “VAADIN/themes”
The “styles.scss” generated by the new theme wizard includes “helpservice.scss” and “addons.scss”. You can modify “helpservice.scss” according to your needs. Your scss files and theme resources should be included in the helpservice folder.

I would suggest taking a look at the
themes section
in the Vaadin online documentation as there you’ll find very useful content on how to work with themes.

Let me know if this solves your issue.

Dominik57 · October 17, 2016, 4:44pm

Hi !

Yes, the problem was in the way how I lockated the *.scss files. I placed them directly in themes folder, not in the sub-folder under the themes with my custom theme name. But it was possible to find this issue only with your help so I’m very thankfull to you, great job and I realy appreciate that ! Thanks a lot

supada · August 6, 2017, 4:09am

Yes, the problem was in the way how I lockated the *.scss files. I placed them directly in themes folder, not in the sub-folder under the themes with my custom theme name. But it was possible to find this issue only with your help so I’m very thankfull to you, great job and I realy appreciate that ! Thanks a lot.
Please introduce me i do not understand.

Brian145 · August 30, 2018, 1:46am

Why does it have to be so goddamn difficult just to make a minor style change in Vaadin?
Step 1: Figure out how to compile the themes which include numerous modifications to your POM that are not described clearly anywhere.
Step 2: Create a custom theme, and if it’s CSS, you can only have 1.
Step 3: Figure out how to make style A in your theme only applies to component A and not component B.

Something like inline CSS in HTML would be a hell of a lot simpler.

ollit.1 · August 30, 2018, 7:06am

You’re in luck - with Vaadin 10, you can do everything with CSS custom properties in HTML, no more compilation or POM changes needed. You can even add inline styles from Java code.