如何在 Vaadin 7 表中实现滚动侦听器 [英] How To Implement Scroll Listener In Vaadin 7 Tables

问题描述

在 Vaadin 中，当您在表格 (com.vaadin.ui.Table) 中向下或向上滚动时，不会触发任何事件来告诉您用户正在滚动.

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.

让我们先来看看这个 Vaadin 示例(仪表板演示)之后你打开链接直接点击登录，你会自动跳转到交易页面，这个页面显示了一个金融交易表，这些交易会在你滚动的时候一批批地显示出来，实际上发生的是数据在 UI 启动时加载(所有事务).

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

现在，假设我们有数千或数百万笔交易.启动 UI 时将它们全部加载在一起是否符合逻辑?在等待所有事务加载时一点一点地加载它们以防止减慢 UI 是不是很明智?

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?.

这个问题的最佳解决方案是获取第一个(比如 100 个事务)然后在向下滚动时获取更多的事务，但是这个解决方案只有一个问题，即 Vaadin 不支持 滚动事件处理在com.vaadin.ui.Table中！！

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 !! 

推荐答案

Vaadin Table 的滚动事件

仪表板演示(GitHub repo) 项目实际上依赖于 Vaadin 表，正如您在 this 文件在 53、 我们要做的是扩展 com.vaadin.ui.Table 并实现我们自己的行为，从现在开始支持滚动 Vaadin 表.

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.

首先，让我们创建新的简单接口ScrollingTableScrollListener该接口将负责实现滚动事件，其代码如下所示:

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.

现在，让我们创建我们的表格，我们的表格名称是 (ScrollingTable) 并且它扩展了 (com.vaadin.ui.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();
    }
}

其实这张表和 Vaadin 的一样，但有以下不同:

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

1. 它覆盖了超类(Vaadin Table:com.vaadin.ui.Table)的changeVariables()方法，实际上这里奠定了我们将启动滚动行为的核心业务.我们在这里所做的是调用超类的changeVariables()，然后调用fireSrollEvent() 方法.
2. 另一个区别是它多了两个成员:

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)此方法将负责向表的滚动事件添加新的侦听器.
2. private void fireSrollEvent() 此方法是由 changeVariables() 方法调用的方法，并将调用方法 doTableScroll() 在此表通过调用方法 addScrollListener() 添加的每个已注册侦听器上.

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().

现在为了利用我们添加的新东西，我们将更改上述仪表板演示的原始代码(特别是文件 TransactionsView.java).在这个文件中，只有几行需要添加和修改.

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.

首先，我们将修改第 49 行 通过添加该类将实现的新接口，即我们的新接口 (ScrollingTableScrollListener)，并通过在该类的末尾添加以下几行来实现其单一方法:

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!");
}

然后，我们将更改这两行 53 和 66 使用新的继承类 (ScrollingTable) 而不是超类 (Table):

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() {

最后，我们应该将监听器添加到我们的 ScrollingTable 的 scrolls :) ，这是通过在定义表后调用表 (t) 上的 addScrollListener 方法来完成的 (我们新类的第 89 行):

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

这一行表示这个类(TransactionView)正在监听ScrollingTable(t)滚动事件，每当用户向下/向上滚动ScrollingTable(t)时它都会调用doTableScroll方法.

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 ...
}

这是 GitHub 上新仪表板的链接.

Here is the link of the new Dashboard on GitHub.

我的博客

这篇关于如何在 Vaadin 7 表中实现滚动侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！