Vaadin：在按钮单击后将文本从 TextField 设置为 Label

Question

我正在尝试编写简单的 Vaadin 表单。我想在用户单击按钮后将文本从 TextField 写入标签。

我有这个代码：

package com.example;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class TestForm extends UI {

    @WebServlet(value = "/TestForm", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = TestForm.class)
    public static class Servlet extends VaadinServlet {
    }

    private TextField tf;
    private Label lbl;
    private Button btn;

    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        tf = new TextField("Enter text");
        lbl = new Label();
        btn = new Button("Click");    

        btn.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                lbl.setCaption(tf.getValue());
            }
        });

        layout.addComponent(tf);
        layout.addComponent(btn);
        layout.addComponent(lbl);       

    }
}

但是当我点击按钮后标签没有发生，但是网络浏览器显示错误：

通讯问题 记下任何未保存的数据，然后单击此处继续。(SyntaxError) 堆栈：eval@[native code] Jda BR Zc Xc line: 340: Unexpected token '

我做错了什么？

Answer 1

编辑 问题是您的 web.xml 中有两个 servlet 映射。 我注释掉了其中一个：

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="vaadinpokus" version="3.0">

  <display-name>vaadintest</display-name>
  <description>...</description>
  <context-param>
      <description>Vaadin production mode</description>
      <param-name>productionMode</param-name>
      <param-value>false</param-value>
  </context-param>
  <servlet>
    <servlet-name>myservlet</servlet-name>
    <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
    <init-param>
          <param-name>UI</param-name>
          <param-value>com.example.MyVaadinUI</param-value>
    </init-param>
    <async-supported>true</async-supported>
  </servlet>

  <servlet-mapping>
    <servlet-name>myservlet</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>

  <!--<servlet-mapping>
    <servlet-name>myservlet</servlet-name>
    <url-pattern>/VAADIN/*</url-pattern>
  </servlet-mapping>-->
</web-app>

现在应该可以了。 感谢您分享您的代码。这种方式更容易调试应用程序。

Answer 2

您应该尝试 lbl.setValue 而不是 lbl.setCaption。

btn.addClickListener(new Button.ClickListener() {
     public void buttonClick(ClickEvent event) {
         lbl.setValue(tf.getValue());
     }
 });