Vaadin: set text from TextField to Label after Button click

Question

I am trying to write simple Vaadin form. I want write text from TextField to Label after user click on Button.

I have this code:

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

    }
}

But after I click on Button doensn't happen with label, but web browser display error:

Communication problem Take note of any unsaved data, and click here to continue.(SyntaxError) stack: eval@[native code] Jda BR Zc Xc line: 340: Unexpected token '<' - Original JSON-text: html>

What I do bad?

Answer 1

EDIT The problem is that you had two servlet mappings in your web.xml. I commented out one of them :

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>

Now it should work. Thank you for sharing your code. It's easier this way to debug apps.

Answer 2

You should try lbl.setValue instead of lbl.setCaption.

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