Cannot get themes to work

Hi all,

I’ve managed to break themes so they do not work at all, and I cannot find any information on where to even begin debugging.

I have created a new Vaadin app based on the latest Vaadin 7.3.7 archetype for the CRUD application… basically I extracted the UI sub-project into a standalone project. I have successfully got it to build and deploy, but the themes no longer work (i.e. - no stylesheets apply).

I have not touched the code (e.g. - @Theme(“mytheme”)) nor the VAADIN/themes directory structure under webapp. so it must be something with the POM? I have rebuilt the POM a fair bit based on a number of posts throughout the web, so I suspect I’ve introduced some incompatibilities or left something out?

Just in case, here is my POM:

<?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.test.myapp</groupId>
    <artifactId>myapp-console2</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>console2</name>
    <packaging>war</packaging>

    <properties>
        <vaadin.version>7.4.0.beta1</vaadin.version>
        <vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
        <jetty.plugin.version>9.2.3.v20140905</jetty.plugin.version>
        <project.source.version>1.7</project.source.version>
        <project.target.version>1.7</project.target.version>
        <project.encoding>UTF-8</project.encoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-server</artifactId>
            <version>${vaadin.version}</version>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-push</artifactId>
            <version>${vaadin.version}</version>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-client</artifactId>
            <version>${vaadin.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-client-compiler</artifactId>
            <version>${vaadin.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-themes</artifactId>
            <version>${vaadin.version}</version>
        </dependency>

        <!-- Bean validation implementation -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>5.1.0.CR1</version>
        </dependency>

        <!-- Testing -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <versAll the advice on the weion>4.11</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- The folllowing 2 <plugin> entries from http://stackoverflow.com/questions/21066550/vaadin-failed-to-load-widgetset-nocache-js -->
            <!-- vaadin update widgetset step 1: need (re)build? -->
            <plugin>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-maven-plugin</artifactId>
                <version>${vaadin.plugin.version}</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>update-widgetset</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

            <!-- vaadin update widgetset part 2: compile -->
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>gwt-maven-plugin</artifactId>
                <version>2.3.0-1</version>
                <configuration>
                    <webappDirectory>src/main/webapp/VAADIN/widgetsets</webappDirectory>
                    <extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
                    <runTarget>clean</runTarget>
                    <hostedWebapp>${project.build.directory}/${project.build.finalName}</hostedWebapp>
                    <noServer>true</noServer>
                    <port>8080</port>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>resources</goal>
                            <goal>compile</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.0</version>
                <configuration>
                    <encoding>${project.encoding}</encoding>
                    <source>${project.source.version}</source>
                    <target>${project.target.version}</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <version>2.6</version>
                <configuration>
                    <encoding>${project.encoding}</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.3</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-jar-plugin</artifactId>
                <version>2.5</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-source-plugin</artifactId>
                <version>2.4</version>
            </plugin>
        </plugins>
    </build>
</project>

Any help on how to debug themes or general advice on improving my POM would be appreciated…

Thanks – Randall

Hi,

I’ve made some progress, which changes my question somewhat…

I worked out that the SASS compiler was not generating the CSS before building the WAR. I found a post on the web that works by added the following to my POM:

<plugin>
 <groupId>org.codehaus.mojo</groupId>
 <artifactId>exec-maven-plugin</artifactId>
 <version>1.2.1</version>
 <executions>
  <execution>
   <phase>generate-sources</phase>
   <goals>
    <goal>java</goal>
   </goals>
   <configuration>
    <classpathScope>compile</classpathScope>
    <mainClass>com.vaadin.sass.SassCompiler</mainClass>
    <arguments>
     <argument>src/main/webapp/VAADIN/themes/mytheme/styles.scss</argument>
     <argument>src/main/webapp/VAADIN/themes/mytheme/styles.css</argument>
    </arguments>
   </configuration>
  </execution>
 </executions>
</plugin>

While I’m happy it works, I’m not happy that I don’t understand how it works ;^)

I cannot find a similar construct in the POM files in the archetype project… so how does Vaadin know to generate the CSS file?

Thanks for the help…

Hello Randall,

See the pom.xml for production module to find out how the css files (pre compiled theme) are generated. The ui-module relies on Vaadin’s ability to compile the theme on the fly and thus does not produce .css files by default. This should speed up development, since you don’t need to recompile the whole project every time you do some theme changes in your project. More details is available in the README.md that is created by the archetype.

Regards,
Matti

Hello,

I am a PhD student and I am very new in Vaadin…
For my work I needed to develop two different applications. I used Eclipse Kepler.
For the first one , I started a new vaadin project from the example of dashboard (which is different from the one that you have available now in the website, I guess that this one is developed as a Maven project) and changed the code with my own and it worked well.
For the second, I followed the same procedure as for the first one but now every change that I make in a css file I am not able to see it. I have already tried to compile the themes and widgetsets and also restarting the server (glassfish) but the changes are not updated…

Does anyone can help me with this problem? Thank you very much in advance.

Try cleaning the working directories of your server. If that does not help, maybe you have two copies of the pre-compiled theme in your project - one that you just compiled but another one lurking somewhere in the build directories that is used by the server.