Vaadin Widgetset compiling: Tips & Hints

Hi everyone!

The purpose of this post is enumerating the most common issues when trying to compile the widgetset in Vaadin. But before digging into this, let's explain a little bit what this compiling thing is about.

In Vaadin version 6, 7 & 8, the visual components have two important parts.

The first one is server side, and it's implemented in classic Java classes that are compiled to JVM bytecode.

The second part, on the other hand, is the client side code, written mostly in Java and then compiled in Javascript using GWT project. GWT is basically a Java to Javascript compiler. All of these components (widgets) belong to a set known as widgetset.

The widgetset compilation process is done by executing the GWT compiler to produce the Javascript code associated to all of the Vaadin components that have server and client side code.

That being said, let's go on with those tips!

Verify that everything is correctly configured

There are a lot of ways to compile the widgetset, in this case we will focus in projects that use maven as the build tool, because is the most commonly tool used for this purpose.

The vaadin-maven-plugin will help you on this process, which is a derivation of the gwt-maven-plugin.

Depending on the Vaadin version used, there a are a lot of different configurations, the best thing to do, is to create a small maven project, based on the simplest vaadin maven archetype (com.vaadin:vaadin-archetype-application)

These are the steps for doing this:

1. Run the command "mvn archetype:generate" from a terminal or command line window
2. Enter "vaadin" to filter the list of the available archetypes
3. Choose 5 (currently that's the number of the com.vaadin:vaadin-archetype-application archetype, it could change in the future)
4. Choose the number before the Vaadin version that you're using (ie: 127 -> 7.7.13, etc.)
5. Complete the parameters that maven will prompt

After that, maven will generate a small project, and if you take a look to the pom.xml file that was generated, you are going to find something like this:

...

 <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>
       <!-- Comment out compile-theme goal to use on-the-fly theme compilation -->
       <goal>compile-theme</goal>
      </goals>
     </execution>
    </executions>
   </plugin>
...

You can copy the <plugin> definition to your pom.xml file. Take into account that the version is parametrized to use the vaadin.plugin.version maven variable, define it if you don't have it in your pom.xml file.

With this change, whenever you build your project, the vaadin-maven-plugin will try to compile the widgetset if needed.

Check that you have the Java sources of the addons available in your project

One thing that is usually unknown, is that maven needs the sources of the client side code of all of the addons (besides Vaadin itself) that are needed to generate the final widgetset. If you're using an addon (and you add it as a dependency), you have to be sure that the jar contains internally the Java files of the client side classes. If they are not there, the addon will not be included in the widgetset compilation and you are not going to see any error, but you will not be able to use it at runtime.

If you build a custom addon by yourself, to include the sources you have to add this into the <build/> section of your pom.xml file:

...

  <!-- This is needed for the sources required by the client-side compiler to be 
   included in the produced JARs -->
  <resources>
   <resource>
    <directory>src/main/java</directory>
    <excludes>
      <exclude>rebel.xml</exclude>
    </excludes>
   </resource>
   <resource>
    <directory>src/main/resources</directory>
   </resource>
  </resources>

...

Just package your project

If everything is correctly configured up to this point, you should be able to compile your widgetset as a part of the normal compilation phase of your project.

Just run the command mvn install and the compilation will be done correctly.

In the possible scenario that the compilation is not being executed, you could force it by clicking on the compile widgetset button of the Vaadin Eclipse Plugin, that will force it to happen.

Check if your addon was indeed compiled

If the compilation finishes without errors, is not exactly clear if a particular addon was included in the compilation or not. There are two ways of verifying that:

• The first one: analyzing the output of the build process, and trying to find a string similar to this:

...
[INFO] auto discovered modules [com.yourapplication.DemoWidgetSet]
[INFO] Compiling module com.yourapplication.DemoWidgetSet
[INFO]    Computing all possible rebind results for 'com.vaadin.client.metadata.ConnectorBundleLoader'
[INFO]       Rebinding com.vaadin.client.metadata.ConnectorBundleLoader
[INFO]          Invoking generator com.vaadin.server.widgetsetutils.ConnectorBundleLoaderFactory
[INFO]             Populating eager bundle
...
[INFO]                Visiting YourComponentConnector with ConnectorInitVisitor
[INFO]                   YourComponentConnector will be in the eager bundle
...

YourComponentConnector is the name of the Connector of your addon, if it includes one.

• Another possibility, is inspecting the generated widgetset and search for a string representing the name of a client side class that should be generated. That file usually resides in yourapplication\src\main\webapp\VAADIN\widgetsets\com.yourapplication.DemoWidgetSet, given that the name of your widgetset is "com.yourapplication.DemoWidgetSet". The file has a name pattern similar to this: "499F6D1A40C61E05F11FB78D20D50A78.cache.js" and usually is a big file (1 megabyte or so). For instance, you could search for a string with the name of your connector, it should be there, if not, probably there is a configuration problem.

Well, that's it, if you have more tips regarding this, feel free to share them!