Vaadin 8 - 小部件集

Question

我将 Vaadin 谷歌地图插件添加到我的 Spring Boot 项目中。如果我想在现场显示地图，则会出现错误：

Widgetset 'com.vaadin.DefaultWidgetSet' 不包含 com.vaadin.tapio.googlemaps.GoogleMap 的实现。检查 连接器的@Connect 映射，widgetset 的 GWT 模块描述 文件并重新编译您的小部件集。如果您下载了一个 vaadin 附加包，您可能需要参考附加说明

如果我在 UI 类中添加 @Widgetset("com.vaadin.v7.Vaadin7WidgetSet") 注释，则会收到此错误：

未能加载小部件集： ./VAADIN/widgetsets/com.vaadin.v7.Vaadin7WidgetSet/com.vaadin.v7.Vaadin7WidgetSet.nocache.js?1521722356809

我有一个问题：一个小部件集应该是什么样子，如何构建它？我一直在寻找示例和教程，但我仍然无法做到这一点。 我读到在早期的 Vaadin 版本中，我应该做一个手动编译小部件，但在版本 8 中编译是自动化的。 也许这是重要信息，但我使用 gradle 而不是 maven。 请帮助我，因为我正在尝试修复它一个星期。

Answer 1

在您的 Vaadin 项目中包含插件后，您需要编译小部件集，并且小部件集需要包含插件小部件集。

我有以下 src/main/resources/widgetsets/AppWidgetset.gwt.xml 文件：

<?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>

这包括 Vaadin PopupButton 插件。当然，您需要对其进行调整以包含您想要的附加组件。我的 gradle 构建看起来像：

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

最后是注释：

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

这是很多手动的东西。如果您暂时不在 Vaadin 生产模式下运行，则可以省略主题编译。我几乎可以肯定有一个 Vaadin gradle 插件可以简化小部件集和主题编译，但是当我在寻找它时它不符合我的要求。

顺便说一句：Vaadin 7 小部件集不适用于 Vaadin 8 :)

Answer 2

听起来您的项目缺少需要客户端扩展（又名自定义小部件集）的 Vaadin 扩展的构建设置。这经常发生在新的 Spring 用户身上，因为 start.spring.io 目前不支持添加第三方 Maven 插件。添加 vaadin-maven-plugin 并进行完整构建应该可以解决此问题。

要查看配置了 vaadin-maven-plugin 的 Spring Boot 项目，我建议使用 viritin-spring-archetype 并查看生成的项目（尤其是项目生成的 pom.xml）。您也可以从官方的普通 servlet 项目模板（由默认原型或 IDE 插件生成）手动复制相关部分。

使用 Gradle 时，修复本质上是相似的。如果您使用 start.spring.io 创建了项目，您只需将 gradle-vaadin-plugin 添加到您的项目中，方法是将 follow sn-p 添加到您的 build.gradle 文件中，例如在 buildScript 部分之后：

plugins { id 'com.devsoap.plugin.vaadin' version '1.3.1' }

您还需要使用客户端扩展声明依赖项，如下所示（改用谷歌地图坐标）：

vaadinCompile("org.vaadin.addon:v-leaflet:2.0.6")