Vaadin：單擊按鈕后，將文本字段中的文本設置為標簽

Question

我正在嘗試編寫簡單的Vaadin表格。 我想在用戶單擊按鈕后將文本從TextField寫入Label。

我有以下代碼：

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);       

    }
}

但是在我單擊“按鈕”后，標簽不會發生，但是Web瀏覽器顯示錯誤：

通信問題請記錄所有未保存的數據，然后單擊此處繼續。（SyntaxError）堆棧：eval @ [native code] Jda BR Zc Xc行：340：意外令牌'<'-原始JSON文本：html>

我做什么不好？

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());
     }
 });