Vaadin 8 - widgetset - spring-boot

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.

Answer 1

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 :)

Answer 2

I sounds like your project is missing build setup for Vaadin extensions requiring client side extensions (aka custom widgetset). This happens often with new Spring users as start.spring.io don't currently support adding third party Maven plugins. Addin vaadin-maven-plugin and doing full build should fix the issue.
To see a Spring Boot project with vaadin-maven-plugin configured, I suggest to use the viritin-spring-archetype and see the generated project (and especially the pom.xml generated by the project). You can also manually copy the relevant parts from the official plain servlet project template (generated by the default archetype or IDE plugins).
When using Gradle the fix is similar in nature. If you created the project using start.spring.io, you can just add the gradle-vaadin-plugin to your project, by adding follow snippet to your build.gradle file, e.g. after buildScript section:
plugins {
id 'com.devsoap.plugin.vaadin' version '1.3.1'
}
You will also need to declare dependencies with client side extensions as follows (use google maps coordinates instead):
vaadinCompile("org.vaadin.addon:v-leaflet:2.0.6")