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

Question

我在金库有两张桌子。一个是表mainTable。另一个是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类没有像那样的方法，而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());
    }
}

...and就这样。不需要修改Widget；相反，我们直接重用VScrollTable。而您最初的测试UI应该以-原样工作，因为服务器端的任何内容都没有改变。

现在，ScrollTableConnector是一个ComponentConnector，它是客户端代码，应该放在您的客户端包中，也就是说，您的widgetset的源路径。例如，如果您的*.gwt.xml文件位于包com.example.foo中，ScrollTableConnector应该转到包com.example.foo.client或它的一个子包。这样，widgetset编译器将知道在哪里查找它。

最后，请记住重新编译您的widgetset。如果您使用的是Vaadin插件，只需单击编译Widgetset按钮即可。如果您正在使用Maven，请运行mvn vaadin:compile。