如何让UI接收滚动事件

Question

在我的 vaadin 应用程序中，我需要实现一个固定的 header，它根据 UI 的滚动位置改变大小。

虽然在 Vaadin 8 中有滚动位置的获取器，但似乎没有实现侦听滚动事件的功能。所以我尝试实现一个 JavaScript 连接器，它只通知 server-side UI，用户已经滚动，所以 server-side UI 可以通知Header 作为 scrollListener。

到目前为止，这就是我的计划，但我就是找不到如何按照它的方式实现我的连接器。

网站在客户请求后处于活动状态。
能够调用我的 server-side UI.onScrollEvent() 方法。

有谁知道如何实现所描述的行为？

提前感谢您的帮助。

Answer 1

几年前，我通过扩展包装 UI 部分我需要的布局组件来完成此操作。在 GWT 中有 gwtproject.org/javadoc/latest/com/google/gwt/event/dom/client/… 可以在 DOM 处理程序中使用。所以是的，GWT 提供了合适的客户端事件。然后我对服务器端使用 RPC 调用，在那里我触发了相应的服务器端事件，我可以在应用程序的其他部分收听。代码不是public，但是有类似实现类型的LazyLayout add-on，你可以检查它作为你实现的参考。

https://github.com/alump/LazyLayouts/blob/master/lazylayouts-addon/src/main/java/org/vaadin/alump/lazylayouts/client/LazyVerticalLayoutConnector.java

Answer 2

在我运行解决了实现自定义小部件的几个问题之后，我采用了不同的方法，在 vaadin 意义上使用扩展。这是我所做的截断代码。

（Vaadin 要求此 post 稍后显示的客户端连接器代码位于 Widget 包中。我不完全确定服务器端组件是否必须也是一个，但出于与通常的小部件骨架的一致性原因，我将其放入一个）

所以在小部件的包中：

package my.company.project.scrollUI;

import com.vaadin.server.AbstractExtension;
import com.vaadin.ui.UI;

import my.company.project.scrollUI.client.scrollUI.ScrollUIServerRpc;

public class ScrollUI extends AbstractExtension {

  private ScrollUIServerRpc rpc = new ScrollUIServerRpc() {

    @Override
    public void onScroll() {
      //do whatever you need for your implementation
      ... 
    }

  };

  public ScrollUI() {
    registerRpc(rpc);
  }

  public void extend(UI ui) {
    super.extend(ui);
  }

}

和往常一样，包文件夹中的 .gwt.xml 文件，这里没有什么特别的：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module>
  <inherits name="com.vaadin.DefaultWidgetSet" />
</module>

在编译客户端代码的包中JavaScript:

package my.company.project.scrollUI.client.scrollUI;

import com.vaadin.shared.communication.ServerRpc;

public Interface ScrollUIServerRpc extends ServerRpc {

  public void onScroll();

}

最后是扩展的连接器：

package my.company.project.scrollUI.client.scrollUI;

import com.google.gwt.event.dom.client.ScrollEvent;
import com.google.gwt.event.dom.client.ScrollHandler;
import com.google.gwt.user.client.ui.Widget;
import com.vaadin.client.ComponentConnector;
import com.vaadin.client.ServerConnector;
import com.vaadin.client.communication.RpcProxy;
import com.vaadin.client.extensions.AbstractExtensionConnector;
import com.vaadin.shared.ui.Connect;

@Connect(ScrollUI.class)
public class ScrollUIConnector extends AbstractExtensionConnector {

  ScrollUIServerRpc rpc = RpcProxy.create(ScrollUIServerRpc.class, this);

  @Override
  protected void extend(ServerConnector target) {
    final Widget ui = ((ComponentConnector) target).getWidget();

    ui.addDomHandler(new ScrollHandler() {

      @Override
      public void onScroll(ScrollEvent event) {
        rpc.onScroll();
      }

    }, ScrollEvent.getType());

  }

}

现在不要忘记编译小部件集，一切都很好，可以像所有其他 vaadin 扩展一样用于您的实际 UI：

public class MyUI extends com.vaadin.ui.UI {

  @Override
  protected void init(VaadinRequest vaadinRequest) {
    ScrollUI scrollUI = new ScrollUI();
    scrollUI.extend(this);

    //everything else that needs to be done
    ...
  }

  //everything else that Needs to be done
  ...

}

我希望这对遇到类似问题的任何人都有帮助。

如何让UI接收滚动事件

How to make UI receive scroll events

vaadin

vaadin8