Eclipse Vaadin 设计器 10+ html 模板

Eclipse Vaadin designer 10+ html template

我正在尝试学习版本 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(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.
    }
}

您是否在 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