Vaadin - sending multiple requests

Hi there,

something really interesting would be to know, if vaadin provides some features for sending requests in different ways.
To be more specific: When I use some textfields in my own vaadin application, the server doesn’t receive any requests until I click on enter or click on a button. Clicking on a button or using the enter command usually sends one or two requests at once. My questions is… is this the default way?

There are some other applications (not only vaadin) which send one request for exactly one character, which is typed even when the user doesn’t click on soemthing. As far I as know, more and more AngularJS applications use this behaviour.

I know that I can use some java code and other libraries to do that in the same way somehow. But for me, it is important to know if vaadin offers such functionality out of the box?

Best regards,
Natar Medeiros

Hi,

you can get that functionality if you add a TextChangeListener to your TextField.

-Olli

There are some default implementation to optimize the app. Sending all key could be slow.

But this can be change by the method setTextChangeEventMode

See TextChangeEventMode enumeration for values.


https://vaadin.com/api/7.7.3/com/vaadin/ui/AbstractTextField.TextChangeEventMode.html

EAGER
An event is triggered on each text content change, most commonly key press events.

LAZY
An event is triggered when there is a pause of text modifications.

TIMEOUT
Each text change event in the UI causes the event to be communicated to the application after a timeout.

I used the TextChangeListener but it is not working the way I want. Here is my example code:

[code]
TextChangeListener textChangeListener = new TextChangeListener() {

            @Override
            public void textChange(TextChangeEvent event) {
                service = new CustomerService();
                List<Customer> customers;
                try {
                    System.out.println(firstName.getValue());
                    customers = service.findByName(firstName.getValue(),lastName.getValue());
                    System.out.println(customers);
                    grid.setContainerDataSource(new BeanItemContainer<>(Customer.class, customers));
                } catch (ClassNotFoundException | SQLException e) {
                    e.printStackTrace();
                }
            }
        };
        
        firstName.setTextChangeEventMode(TextChangeEventMode.EAGER);
        firstName.addTextChangeListener(textChangeListener);

[/code]So I have a TextField “firstName” which should call the service.findByName(…) exactly for each character which is typed. Therefore I am using the TextChangeListener and set the TextChangeEventMode to EAGER. Anyway it doesn’t give me the current TextField value.

For example: I type “Mario” but I do not receive “Mario” until I type a character again (like Marios). I also recognized that the value only updates when I leave the TextField.
What can I do?

Best regards,
Nazar

You’re using firstName.getValue(), but the value of the field is not yet updated in the TextChangeListener. Instead, you’ll want to get the String from event.getText(). Once the value of the field is fully validated and changed, you’ll get a ValueChangeEvent, but that won’t happen after each keypress.

-Olli

Thanks Olli, now I know what my mistake was. You said the ValueChangeEvent doesn’t work after each keypress. Is this something general or does it regard to my example code above?

Nazar Medeiros

TextField’s ValueChangeEvent is fired once you leave the field and the content validates correctly, or the value is changed from the server side.

-Olli