如何在vaadin 7中的两个表之间进行同步滚动？

Question

我在 vaadin 有两张桌子。一种是作为表主表。 另一个是ScrollTable freezeTable。 我需要两个表之间的同步滚动。如果我将垂直滚动 mainTable，则 freezeTable 应该滚动相同但在水平滚动的情况下我不想要任何同步滚动。 我从 vaadin 论坛得到了一些想法，如下所示。但由于某些已弃用的方法，我无法继续。

在 MyViewPage.java 我将这两个表添加为

addComponent(loadTables());
public HorizontalSplitPanel loadTables(){
    final HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();
    Table mainTable = new Table();
    ScrollTable freezeTable=new ScrollTable();
    freezeTable.setDependentTable( mainTable );
    freezeTable.setWidth( "300px" );
    mainTable.setWidth( "800px" );
    freezeTable.setContainerDataSource(myContainer);
    freezeTable.setVisibleColumns(viscol);
    freezeTable.setColumnHeaders(vishead);
    freezeTable.setPageLength(15);
    mainTable.setContainerDataSource(myAnotherContainer);
    mainTable.setVisibleColumns(viscolmain);
    mainTable.setColumnHeaders(visheadmain);
    mainTable.setPageLength(15);
    splitPanel.setFirstComponent(freezeTable);
    splitPanel.setSecondComponent(mainTable);
    return splitPanel;
}

ScrollTable 类是这样的。

ScrollTable.java

package com.abhiram.app.myproject.freezetable;

import com.vaadin.data.Container;
import com.vaadin.server.PaintException;
import com.vaadin.server.PaintTarget;
import com.vaadin.shared.ui.Connect;

import com.vaadin.ui.Table;

@SuppressWarnings("serial")
public class ScrollTable extends Table{
private Table mainTable;

public ScrollTable()
 {
   super();
 }
public void setDependentTable( Table mainTable)
 {
   this.mainTable= mainTable;
 }

@Override
public void paintContent( PaintTarget target ) throws PaintException
  {

    target.addAttribute( "scrollPane", this );
    if ( table != null ) target.addAttribute( "dependentTable", mainTable);
    super.paintContent( target );
  }
}

我创建了另一个类 VMyScrollTable 并像这样扩展 VScrollTable。

VMyScrollTable.java

package com.abhiram.app.myproject.freezetable.client.ui;

import com.google.gwt.event.dom.client.ScrollEvent;
import com.google.gwt.event.dom.client.ScrollHandler;
import com.abhiram.app.myproject.freezetable.ScrollTable;
import com.vaadin.client.ApplicationConnection;
import com.vaadin.client.UIDL;
import com.vaadin.client.ui.FocusableScrollPanel;
import com.vaadin.client.ui.VScrollTable;
import com.vaadin.shared.ui.Connect;
@Connect(com.abhiram.app.myproject.freezetable.ScrollTable.class)
public class VMyScrollTable extends VScrollTable{
public VMyScrollTable()
 {
   super();
 }

@Override
public void updateFromUIDL( final UIDL uidl, final ApplicationConnection client )
 {
  super.updateFromUIDL(uidl,client );
  final String tableId = uidl.getStringAttribute( "dependentTable" );
  if ( tableId == null )
     return;
  String id = uidl.getStringAttribute( "scrollPane" );

  VScrollTable scrollPane = (VScrollTable) client.getPaintable(id);
  final FocusableScrollPanel scrollBody = (FocusableScrollPanel) scrollPane.getWidget(1);
  scrollBody.addScrollHandler( new ScrollHandler()
   {
     @Override
     public void onScroll( ScrollEvent event )
      {
        VMyScrollTable.this.onScroll( event );
        VScrollTable dependentPane = (VScrollTable)  client.getPaintable(tableId );
        FocusableScrollPanel scrollToBeBody = (FocusableScrollPanel) dependentPane.getWidget( 1 );
        scrollToBeBody.setScrollPosition( scrollBody.getScrollPosition() );
      }
     } );
   }
}

这里的问题是 VScrollTable 类没有像 updateFromUIDL(...) 这样的方法，而 ApplicationConnection 没有像 getPaintable(String) 这样的方法。 因此，我无法继续。请任何人帮助我如何做到这一点。

Answer 1

您在正确的轨道上，但您似乎将Widget 与ComponentConnector 混淆了。这是根据您的代码修改的工作版本：

ScrollTable.java - 和你的一样

public class ScrollTable extends Table {
    private Table mainTable;

    public void setDependentTable(Table mainTable) {
        this.mainTable = mainTable;
    }

    @Override
    public void paintContent(PaintTarget target) throws PaintException {

        target.addAttribute("scrollPane", this);
        if (mainTable != null) {
            target.addAttribute("dependentTable", mainTable);
        }
        super.paintContent(target);
    }
}

ScrollTableConnector.java - 这是位于Widget 和服务器之间的客户端上的连接器类

@Connect(ScrollTable.class)
public class ScrollTableConnector extends TableConnector implements
        ScrollHandler {

    private VScrollTable dependentPane = null;

    @Override
    public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
        super.updateFromUIDL(uidl, client);
        String tableId = uidl.getStringAttribute("dependentTable");
        if (tableId == null) {
            return;
        }
        if (dependentPane == null) {
            FocusableScrollPanel scrollBody = (FocusableScrollPanel) getWidget()
                    .getWidget(1);
            scrollBody.addScrollHandler(this);
        }
        dependentPane = ((TableConnector) client.getConnector(tableId, 0))
                .getWidget();
    }

    @Override
    public void onScroll(ScrollEvent event) {
        FocusableScrollPanel scrollBody = (FocusableScrollPanel) getWidget()
                .getWidget(1);
        FocusableScrollPanel scrollToBeBody = (FocusableScrollPanel) dependentPane
                .getWidget(1);
        scrollToBeBody.setScrollPosition(scrollBody.getScrollPosition());
    }
}

...就是这样。无需修改Widget；相反，我们直接重用 VScrollTable。由于服务器端没有任何变化，因此您的原始测试 UI 应该可以正常工作。

现在，ScrollTableConnector，作为ComponentConnector，是客户端代码，应该放在您的客户端包中，即您的小部件集的源路径。例如，如果您的*.gwt.xml 文件位于包com.example.foo 中，则ScrollTableConnector 应转到包com.example.foo.client 或其子包之一。这样，widgetset 编译器就会知道在哪里寻找它。

最后，记得重新编译您的小部件集。如果您使用的是 Vaadin Eclipse 插件，只需单击 Compile Widgetset 按钮。如果您使用的是 Maven，请运行 mvn vaadin:compile。