Question

在我的vaadin应用程序中，我需要实现一个固定的标头，该标头的大小取决于UI的滚动位置。

尽管Vaadin 8中有滚动位置的获取程序，但似乎没有实现监听滚动事件的功能。因此，我尝试实现一个JavaScript连接器，该连接器仅通知服务器端UI用户已经滚动，因此服务器端UI随后可以将header作为滚动监听器通知

。

到目前为止，这是我计划的，但我仍然无法确定如何以这种方式实现连接器。

在客户请求该网站后有效。
能够调用我的服务器端UI.onScrollEvent（）方法。

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

谢谢您的帮助。

Answer 1

在遇到有关实现自定义窗口小部件的一些问题后，我选择了另一种方法，即在vaadin-sense中使用扩展。这是我所做的截断的代码。

（Vaadin要求本文后面显示的客户端连接器代码位于Widget程序包中。我不确定服务器端组件是否也必须位于一个组件中，但出于一致性考虑和通常的widget-skeleton一起放入）

因此在小部件的包装中：

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

}

通常是package文件夹中的.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
  ...

}

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

Answer 2

几年前，我通过扩展布局组件来做到这一点，该组件将UI部分包裹在需要的地方。在GWT中，有gwtproject.org/javadoc/latest/com/google/gwt/event/dom/client/…可以在DOM处理程序中使用。是的，GWT提供了合适的客户端事件。然后，我使用了对服务器端的RPC调用，在其中触发了相应的服务器端事件，该事件可以在应用程序的其他部分监听。该代码不是公开的，但是有LazyLayout加载项具有类似的实现类型，您可以将其检查为实现的参考。

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

如何使UI接收滚动事件

2 个答案: