Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Updating UI from another thread

Artur Signell
1 decade ago Oct 13, 2010 3:16pm
Problem:

In an event listener data in e.g. a Table can be updated and will be visible to the user immediately. Doing the same thing in a background thread will not update the UI but if the user press refresh in the browser the UI is suddenly updated.

Reason:
Vaadin consists of a server side that runs in a servlet container and a client side that runs in a web browser. The application state is kept on server side but communication is initiated by the client side whenever needed e.g. when a button is clicked.

The server has no possibility to contact the web browser when the state has been updated by a background thread. Instead the change "waits" on the server until the client sends the next request e.g. clicks a button or requests a full repaint by refreshing the browser. At this point the change is sent to the client and the UI is updated.

How can this be solved:
There are two ways to deal with this: poll or push.

Poll can be accomplished using the Refresher add-on available in the Directory. The refresher causes the client to periodically poll the server to see if any changes have been made. If there are changes, they are rendered in the client.

Push can be accomplished using the ICEPush add-on available in the Directory. ICEPush causes the client to constantly keep a connection open to the server. If the changes take place in the server you can call the push() method to notify the client immediately that there are changes waiting. The client will then contact the server and fetch those changes.

Why are there two different approaches?
Push and poll both have different pros and cons.

Push will constantly keep a connection open to the server which is good for immediate updates but bad for the server if there are many clients connected. Most servlet containers allocate one thread per request, which consumes many threads and much memory when there are many clients. Servlet 3.0 contains asynchronous support which deals better with this.

A poller will not notice changes immediately but only when it happens to poll the following time. Setting a low polling time causes a lot of requests to the server and thus server load. A high polling time causes less server load but also longer times before the UI is updated.

What should I use?
What you should use really depends on your use case. If your data is seldom updated or you do not need immediate updates of the UI you will probably be fine with the Refresher. If immediateness is required then ICEPush is the way to go, provided your server can handle the long connections.

If you are using Google App Engine you should use Refresher as Google App Engine does not allow connections to stay open for more than 30s.

If you are creating portlets you cannot use ICEPush as there is currently no portlet support.

Other background thread considerations:
Remember to synchronize on the application instance whenever updating the UI from another thread.

Last updated on Aug, 11th 2014
wood bridge
1 decade ago Dec 13, 2010 6:27am
André Schild
1 decade ago Dec 13, 2010 7:29am

One work arround is to have the progressbar component be running.
This one (when activated) polls the server for status update to indicate the progress.

In your case you could have a progress indicator turning, just telling the user that the table data
is currently loading in background.

Using some of the non-polling solutions actually really needs one of the addons.

André

Michel Klein
1 decade ago May 17, 2011 6:16am
Henri Sara
1 decade ago May 19, 2011 9:58am
le phuong
1 decade ago Jun 27, 2011 10:47pm
Henri Sara
1 decade ago Jun 28, 2011 6:25am
Pierre Le Roux
1 decade ago Sep 29, 2011 10:09am
Henri Sara
1 decade ago Oct 03, 2011 10:28am
Bart B
10 years ago Oct 20, 2011 8:50pm
Sri L
10 years ago Apr 10, 2012 5:17pm
Vathsalya Sangam
9 years ago Jul 10, 2012 1:32pm
Johnie Greenwood
9 years ago Aug 17, 2012 5:31pm
Jens Jansson
9 years ago Aug 18, 2012 6:50am
Mark Fabie
9 years ago Sep 05, 2012 4:04am
Bobby Bissett
9 years ago Sep 11, 2012 9:16pm
Tobias Demuth
9 years ago Jan 02, 2013 11:14am
Henri Sara
9 years ago Jan 02, 2013 4:02pm
Vathsalya Sangam
9 years ago Feb 06, 2013 9:41pm
Niaz Showket
9 years ago Mar 08, 2013 4:40am
Guy Aloni
9 years ago Mar 13, 2013 10:05am
Jonathan Nash
8 years ago Apr 15, 2013 2:52pm

Can someone post an example for Vaadin 7 of adding a refresher to a page that just causes a refresh every second. I was unable to find one elsewhere on the site and Vathsalya's example doesn't work for Vaadin 7 because you cannot add an extension to a layout because it is protected. Thanks.

Jonathan

Pasquale Paolillo
8 years ago May 07, 2013 2:11pm
André Schild
8 years ago May 07, 2013 7:54pm
Pasquale Paolillo
8 years ago May 08, 2013 1:22pm
André Schild
8 years ago May 08, 2013 2:05pm
Pasquale Paolillo
8 years ago May 08, 2013 2:46pm
André Schild
8 years ago May 08, 2013 2:52pm
Pasquale Paolillo
8 years ago May 08, 2013 4:08pm
Muhammad Mubasher
8 years ago Sep 18, 2013 10:40am
Sercan Ozdemir
8 years ago Oct 25, 2013 8:57am
Henri Sara
8 years ago Oct 29, 2013 6:32am
Jon Inazio Sánchez Martínez
7 years ago Mar 06, 2015 8:41am
André Schild
7 years ago Mar 06, 2015 8:45am
Jon Inazio Sánchez Martínez
7 years ago Mar 06, 2015 9:06am
tony zhang
6 years ago Nov 06, 2015 9:38pm
tony zhang
6 years ago Nov 08, 2015 6:39am
Sekhar P
6 years ago Dec 28, 2015 10:59am
André Schild
6 years ago Jan 04, 2016 8:19am