How To Implement Scroll Listener In Vaadin 7 Tables

In Vaadin, when you scroll down or up in tables (com.vaadin.ui.Table) there is no event that will be fired to tell you that user is now scrolling.

Why would we need scroll event in table?

Let’s first take a look at this example of Vaadin (Dashboard Demo) after you open the link just click sign in, and you’ll be automatically redirected to the transactions page, this page shows a table of financial transactions, these transactions will show a batch after another while you are scrolling, what actually happened is that the data was loaded on UI initiation (all the transactions).

Now, let’s assume that we have thousands or say millions of transactions. Is it logic to load them all together when the UI is initiated? isn’t it of wisdom to load them bit by bit to prevent slowing down the UI while it waits for all transactions to load?.

The best solution to this problem is to get the first (say 100 transactions) then get more transactions while scrolling down, but this solution have only one problem, that is Vaadin does not support Scroll Event Handling in com.vaadin.ui.Table !! Yes, but that’s only the bad news, the good news is that we have a solution to work this out.

Vaadin Table’s Scrolling Event

The Dashboard Demo (GitHub repo) project actually depends on Vaadin tables as you see in the code in this file in line 53, what we are going to do is to extend com.vaadin.ui.Table and implement our own behavior that will support scrolling Vaadin tables from now on.

First of all, let’s create new simple interface ScrollingTableScrollListener this interface will be responsible for implementing scroll events and its code will look like this:

package com.vaadin.demo.dashboard.scrolling;

public interface ScrollingTableScrollListener {
     public void doTableScroll();
}

This interface should be implemented whenever you have a table in your view and you want to add a scroll event handler for it. But wait a minute this is not applicable to any kind of tables, this is only applicable to our own table.

Now, let’s create our table, our table’s name is  (ScrollingTable) and it extends (com.vaadin.ui.Table) this class code is:

package com.vaadin.demo.dashboard.scrolling;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import com.vaadin.ui.Table;

public class ScrollingTable extends Table {

	private static final long serialVersionUID = 5007124121625961567L;
	List listeners = new ArrayList();

	private void fireSrollEvent() {
		for (ScrollingTableScrollListener listener : listeners) {
			listener.doTableScroll();
		}
	}

	public void addScrollListener(ScrollingTableScrollListener listener) {
        listeners.add(listener);
    }

	@Override
	public void changeVariables(Object source, Map variables) {
		super.changeVariables(source, variables);
		fireSrollEvent();
	}
}

Actually, this table is the same as Vaadin’s one, but it has the following differences:

  1. It overrides the method changeVariables() of the super class (Vaadin Table : com.vaadin.ui.Table), actually here lays our core business that will initiate the Scrolling Behavior. What we did here is that we invoked the changeVariables() of the super class and then we invoked the fireSrollEvent() method.
  2. Another difference is that it has two more members:
    1. public void addScrollListener(ScrollingTableScrollListener listener) this method will take care of adding new listeners to table’s scrolling event.
    2. private void fireSrollEvent() this method is the one that will be invoked by changeVariables() method and will invoke the method doTableScroll() on every registered listener that this table has added by invoking the method addScrollListener().

Now to make use of the new stuff that we have added, we will change the original code of the aforementioned Dashboard demo (specifically the file TransactionsView.java). In this file there are only few lines to add and modify.

First, we will modify the line 49 by adding new interface that this class will implement, which is our new interface (ScrollingTableScrollListener) and implement its single method by adding the following lines in the end of this class:

@Override
public void doTableScroll() {
	// TODO Auto-generated method stub
	Notification.show("You are scrolling!\nYou can add your own behavior here!");
}

Then, we will change both lines 53 and 66 to use the new inherited class (ScrollingTable) rather than the super class (Table):

//Line 53 in the original class
Table t;
//Line 55 in our class
ScrollingTable t;
....
....
....
//line 66 in the original class
t = new Table() {
//line 68 in our class
t = new ScrollingTable() {

Finally, we should add the listener to our ScrollingTable’s scrolls 🙂 , this is done by invoking the method addScrollListener on the table (t) after defining the table (line 89 of our new class):

t.addScrollListener(this);

this line means that this class (TransactionView) is listening on the ScrollingTable (t) scroll event, and it will invoke the method doTableScroll whenever the user scrolls down/up the ScrollingTable (t).

Here you go, you have now a table that will tell you whenever the user is scrolling, your task now is to do what you want when the table fires scrolling event and put your stuff between the curly brackets {} of the method that we defined in the first step:

@Override
public void doTableScroll() {
      // Put your own code here ...
}

Here is the link of the new Dashboard on GitHub.

Thanks for reading 🙂

Advertisements

4 thoughts on “How To Implement Scroll Listener In Vaadin 7 Tables

  1. Vaadin Table has already lazy loading built in and is enabled in the demo, so there is no need to reimplement this feature. As a second point, that scroll event will be fired on any event that is communicated back from Table’s client side.

    Like

    • Hi Johan,

      Thanks for the comment, I am glad that you Vaadin guys are reading this 😀

      Maybe you are talking about a newer demo, but when I wrote the post this was not implemented. However, the idea is not lazy loading (I mean I put the wrong example), it is more about implementing scroll listener, which is still not implemented in Vaadin up to this moment I think 🙂

      Still you are right ! This listener is catching any event that changes variables (i.e. changes on Client side: Clicks, and Scrolls). Actually I was writing something new to catch only scroll event, but I started long tie ago and never finished, because recently I was working very long hours.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s