How to make synchronize scroll between two table in vaadin 7?

Question

I have two table in vaadin. One is as Table mainTable. Another is ScrollTable freezeTable. I need a synchronize scroll between two table. If i will scroll mainTable vertically the freezeTable should scroll as same but in case of horizontal scroll I don't want any synchronize scroll. I got some idea from vaadin forum like belows. But I am unable to proceed because of some deprecated method.

In MyViewPage.java I am adding this two table as

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 class is like this.

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

I have created another class VMyScrollTable and extend VScrollTable like this.

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

Here problem is VScrollTable class have no method like updateFromUIDL(...) and ApplicationConnection have no method like getPaintable(String). I am unable to proceed because of this. Please any body help me how to do this.

Answer 1

You're on the right track, but you seem to be confusing the Widget with the ComponentConnector. Here's a working version, modified from your code:

ScrollTable.java - identical to yours

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 - this is the connector class that sits on the client between the Widget and the server

@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 that's it. No need to modify the Widget; instead we're directly reusing VScrollTable. And your original test UI should work as-is since nothing on the server-side changed.

Now, ScrollTableConnector, being a ComponentConnector, is client-side code and should be placed in your client package—that is, the source path of your widgetset. For example, if your *.gwt.xml file is in the package com.example.foo, ScrollTableConnector should go to the package com.example.foo.client or one of its subpackages. That way the widgetset compiler will know where to look for it.

And finally, remember to recompile your widgetset. If you're using the Vaadin Eclipse plugin, just click the Compile Widgetset button. If you're using Maven, run mvn vaadin:compile.