java - Eclipse Vaadin 设计器 10+ html 模板

Question

我正在尝试学习版本 14 中的 Vaadin。为此，我安装了 Eclipse 的 Vaadin 设计器插件。一切正常，直到我尝试启动服务器并测试第一页。

我开始收到这些错误:

There was an exception while trying to navigate to '' with the exception message 'Error creating bean with name 'com.project.gym.vaadin.MainPageDesign': Instantiation of bean failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.project.gym.vaadin.MainPageDesign]: Constructor threw exception; nested exception is java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file'
    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'com.project.gym.vaadin.MainPageDesign': Instantiation of bean failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.project.gym.vaadin.MainPageDesign]: Constructor threw exception; nested exception is java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file
        at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.instantiateBean(AbstractAutowireCapableBeanFactory.java:1320)
        at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBeanInstance(AbstractAutowireCapableBeanFactory.java:1214)
        at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:557)
        at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:517)
        at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:307)
        at com.vaadin.flow.spring.SpringInstantiator.getOrCreate(SpringInstantiator.java:117)
        at com.vaadin.flow.di.Instantiator.createRouteTarget(Instantiator.java:158)
        at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.lambda$getRouteTarget$1(AbstractNavigationStateRenderer.java:127)
        at java.util.Optional.orElseGet(Optional.java:267)
        at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.getRouteTarget(AbstractNavigationStateRenderer.java:126)
        at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.createChain(AbstractNavigationStateRenderer.java:314)
        at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.handle(AbstractNavigationStateRenderer.java:195)
        at com.vaadin.flow.router.Router.handleNavigation(Router.java:223)
        at com.vaadin.flow.router.Router.navigate(Router.java:194)
        at com.vaadin.flow.router.Router.initializeUI(Router.java:92)
        at com.vaadin.flow.server.BootstrapHandler.createAndInitUI(BootstrapHandler.java:1489)
        at com.vaadin.flow.server.BootstrapHandler.synchronizedHandleRequest(BootstrapHandler.java:459)
        at com.vaadin.flow.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:40)
        at com.vaadin.flow.server.VaadinService.handleRequest(VaadinService.java:1540)
        at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:247)
        at com.vaadin.flow.spring.SpringServlet.service(SpringServlet.java:95)
        at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
        at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:712)
        at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:459)
        at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:352)
        at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:312)
        at org.springframework.web.servlet.mvc.ServletForwardingController.handleRequestInternal(ServletForwardingController.java:141)
        at org.springframework.web.servlet.mvc.AbstractController.handleRequest(AbstractController.java:177)
        at org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter.handle(SimpleControllerHandlerAdapter.java:52)
        at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1040)
        at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:943)
        at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006)
        at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:898)
        at javax.servlet.http.HttpServlet.service(HttpServlet.java:634)
        at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:883)
        at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
        at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
        at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:100)
        at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
        at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:93)
        at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
        at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:201)
        at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
        at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:202)
        at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
        at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:541)
        at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)
        at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
        at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74)
        at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
        at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:367)
        at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65)
        at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:860)
        at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1598)
        at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
        at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
        at java.lang.Thread.run(Thread.java:748)
    Caused by: org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.project.gym.vaadin.MainPageDesign]: Constructor threw exception; nested exception is java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file
        at org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:216)
        at org.springframework.beans.factory.support.SimpleInstantiationStrategy.instantiate(SimpleInstantiationStrategy.java:87)
        at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.instantiateBean(AbstractAutowireCapableBeanFactory.java:1312)
        ... 70 more
    Caused by: java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file
        at com.vaadin.flow.component.polymertemplate.NpmTemplateParser.getTemplateContent(NpmTemplateParser.java:140)
        at com.vaadin.flow.component.polymertemplate.TemplateDataAnalyzer.parseTemplate(TemplateDataAnalyzer.java:200)
        at com.vaadin.flow.component.polymertemplate.TemplateInitializer.<init>(TemplateInitializer.java:91)
        at com.vaadin.flow.component.polymertemplate.PolymerTemplate.<init>(PolymerTemplate.java:88)
        at com.vaadin.flow.component.polymertemplate.PolymerTemplate.<init>(PolymerTemplate.java:103)
        at com.project.gym.vaadin.MainPageDesign.<init>(MainPageDesign.java:31)
        at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
        at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
        at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
        at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
        at org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:203)
        ... 72 more

据我了解，我的设计是错误的。我在 webapp/frontend、frontend 和 template 目录以及带有 .java 文件的目录中尝试了它。总是出现同样的错误。因此我的问题是，我应该把我的设计放在哪里？

我的目录屏幕:

设计:

<link rel="import" href="polymer.html">
<link rel="import" href="../../../../../bower_components/vaadin-button/src/vaadin-button.html">



<dom-module id="main-page-design">
    <template>
<style include="shared-styles">
            :host {
                display: block;
                height: 100%;
            }
        </style>
<div id="div" style="width: 100%; height: 100%;">
 <vaadin-button id="loginButton"></vaadin-button>
</div>
</template>

    <script>
        class MainPageDesign extends Polymer.Element {
            static get is() {
                return 'main-page-design';
            }

            static get properties() {
                return {
                    // Declare your properties here.
                };
            }
        }
        customElements.define(MainPageDesign.is, MainPageDesign);
    </script>
</dom-module>

设计.java文件:

package com.project.gym.vaadin;

import com.vaadin.flow.templatemodel.TemplateModel;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;
import com.vaadin.flow.dom.Element;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.component.polymertemplate.Id;
import com.vaadin.flow.component.button.Button;

/**
 * A Designer generated component for the main-page-design template.
 *
 * Designer will add and remove fields with @Id mappings but
 * does not overwrite or otherwise change this file.
 */
@Route("")
@Tag("main-page-design")
@HtmlImport("context://src/main/resources/frontend/main-page-design.html")
public class MainPageDesign extends PolymerTemplate<MainPageDesign.MainPageDesignModel> {

    @Id("div")
    private Element div;
    @Id("loginButton")
    private Button loginButton;

    /**
     * Creates a new MainPageDesign.
     */
    public MainPageDesign() {
        // You can initialise any data required for the connected UI components here.
    }

    /**
     * This model binds properties between MainPageDesign and main-page-design
     */
    public interface MainPageDesignModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }
}

Answer 1

您是否在 compatibility mode 中使用 Vaadin ？在你的错误中它指出

Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using @JsModule annotations.

所以我猜你不会。在这种情况下，您应该使用 @JsModule 导入模板，模板本身就是一个 .js 文件。

看来您使用了 V13 版本的示例。 Vaadin 14 已迁移到 Polymer 3(之前是 Polymer 2)，并且版本之间的语法已发生变化。

但你也是对的，文件应该放在另一个目录中。您应该使用项目根目录下的 /frontend 目录。这里对所有类型的资源都有一个很好的概述:Ways of importing

有关使用模板 API 创建组件的文档可以在这里找到:Creating a Simple Component Using the Template API