Vaadin 8 - widgetset

Question

I added Vaadin google maps addon to my Spring boot project. If I want to display map on site, then I get error:

Widgetset 'com.vaadin.DefaultWidgetSet' does not contain an implementation for com.vaadin.tapio.googlemaps.GoogleMap. Check the connector's @Connect mapping, the widgetset's GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add on instructions

If I add @Widgetset("com.vaadin.v7.Vaadin7WidgetSet") annotation to UI class, then I get this error:

Failed to load the widgetset: ./VAADIN/widgetsets/com.vaadin.v7.Vaadin7WidgetSet/com.vaadin.v7.Vaadin7WidgetSet.nocache.js?1521722356809

And I have a question: How should a widgetset look like, how to build it? I was looking for examples and tutorials but I still can't do this. I read that in early Vaadin versions, I should do a manual compilation widget, but in version 8 compiling is automated. Maybe this is important information, but I use gradle not maven. Please help me, because I am trying to fix it for a week.

Do you have the project or parts of it somewhere in public repository? Would be easier to say what might be the cause. — eeq

Steffen Harbich Steffen Harbich · Accepted Answer · 2018-03-26T09:41:00

As soon as you include add-ons in your Vaadin project, you need to compile the widgetset and the widgetset needs to include the add-on widgetsets.

I have the following src/main/resources/widgetsets/AppWidgetset.gwt.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Vaadin//DTD Vaadin 7//EN" "https://raw.github.com/vaadin/gwt/master/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.vaadin.DefaultWidgetSet"/>

    <!-- include widgetsets of external add-ons here -->
    <inherits name="org.vaadin.hene.popupbutton.widgetset.PopupbuttonWidgetset"/>
</module>

This includes the Vaadin PopupButton add-on. Of course you need to adapt it to include your desired add-ons. My gradle build looks like:

configurations {
    vaadinAddOns
    widgetSetCompilation
    themeCompilation
}

dependencies {
    themeCompilation('com.vaadin:vaadin-spring-boot-starter')
}

task compileWidgetSet(type: JavaExec) {
    // execution of Vaadin GWT compiler
    classpath configurations.vaadinAddOns
    classpath configurations.widgetSetCompilation
    classpath file("${projectDir}/src/main/resources/widgetsets")
    main = 'com.google.gwt.dev.Compiler'
    args '-war', "${projectDir}/src/main/resources/VAADIN/widgetsets"
    args '-strict'
    args '-logLevel', 'WARN'
    args 'AppWidgetset'
    jvmArgs '-Xmx1024M'

    doLast {
        // clean up unnecessary stuff
        file("${projectDir}/src/main/resources/VAADIN/gwt-unitCache").deleteDir()
        file("${projectDir}/src/main/resources/VAADIN/widgetsets/WEB-INF").deleteDir()
    }

    // for the up-to-date check of gradle
    outputs.dir("${projectDir}/src/main/resources/VAADIN/widgetsets/AppWidgetset")
}

clean.dependsOn cleanCompileWidgetSet
processResources.dependsOn compileWidgetSet

// on-the-fly theme compilation is disabled in Vaadin production mode, so we do the compilation ourselves
task compileThemes {
    def themesFolder = file("${projectDir}/src/main/resources/VAADIN/themes")
    new FileNameFinder().getFileNames(themesFolder.toString(), '**/styles.scss').each { path ->
        def themeFolder = file(path).getParentFile()
        def fileIn = new File(themeFolder, 'styles.scss')
        def fileOut = new File("${buildDir}/resources/main/VAADIN/themes/${themeFolder.getName()}/styles.css")
        dependsOn tasks.create("compileTheme${themeFolder.getName().capitalize()}", JavaExec) {
            classpath configurations.themeCompilation
            main = 'com.vaadin.sass.SassCompiler'
            args fileIn, fileOut
            inputs.dir(themesFolder)
            outputs.file(fileOut)
        }
    }
}

processResources.dependsOn compileThemes

And finally the annotation:

@Widgetset("AppWidgetset")
public class MyUI extends UI {
    ...
}

This is a lot of manual stuff. You can omit the theme compilation if you do not run in Vaadin production mode for now. I am almost sure that there is a Vaadin gradle plugin out there that simplifies the widgetset and theme compilation but when I was looking for it it didn't match my requirements.

Btw: Vaadin 7 widgetset is not appropriate for Vaadin 8 :)

Vaadin 8 - widgetset

2 Answers