时间戳

首页 > 解决方案 > Eclipse Vaadin 设计器 10+ html 模板

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

问题描述

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

标签： javavaadin

解决方案

您是否在兼容模式下使用 Vaadin ？在您的错误中，它指出

@JsModule在使用注释声明的任何模板文件中找不到带有标签“main-page-design”的元素的定义。

所以我假设你没有。在这种情况下，您应该使用模板来导入模板，@JsModule并且模板本身就是一个.js文件。

您似乎使用了 V13 版本中的示例。Vaadin 14 已迁移到 Polymer 3（之前是 Polymer 2），并且版本之间的语法发生了变化。

但你也是正确的，文件应该放在另一个目录中。您应该使用/frontend项目根目录下的目录。这里对所有类型的资源都有很好的概述：导入方式

可以在此处找到有关使用模板 API 创建组件的文档：使用模板 API创建简单组件

推荐阅读