Scrolling two panels

Hi,

I am trying to simulate table style scrolling using two panels. I have a panel which displays a set of labels, think of it as table header. I have another panel below the first panel where I have many absolute layouts. Think of them like table rows. Each of the absolute layouts contain a set of other widgets.

In the second panel, I have a vertical scrollbar as well as horizontal scrollbar. Both vertical and horizontal scrolling in the second panel are as desired. However, when the second panel is scrolled using horizontal scrollbar, I also want to scroll first panel horizontally as it contains labels which are aligned to a label of the second panel. This is similar to Vaadin Table.

I do not find any way to handle this situation without modifying Vaadin client-side classes.

Is there a way by which I can scroll first panel programmatically when the second panel is scrolled?

Thanks
Chir

Like you said the only way to accomplish this is to do client-side coding. You have two options: 1) Modify a Panel so that it takes a reference to another Panel and then handle scrolling of Panels in VPanel. 2) Create a general purpose scrolling widget that listens scroll events in scrollable Vaadin components (Panel, Table) and also scrolls those components.

I know that there are only few occassion

I would like to go with option-2 but for now I will go with option-1. As per your comment, I need to modify both Panel and VPanel classes in order to make this work. Generally, only content is set but in this case I need to set not only content but reference of another widget. If I set a reference of Panel B in Panel A, How do I get reference of VPanel B in VPanel A?

Thanks
Chir

Please reply ASAP.

Thanks

Hi you can communicate a reference to another Vaadin component like this:

Server-side:


public void paintContent(PaintTarget target) throws PaintException {	
	..
	
	target.addAttribute("mycomponent", component);
	
	..
}

Client-side:



public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
	..
	
	Paintable componentPaintable = uidl.getPaintableAttribute("mycomponent", client);
	
	..
}

Thanks you for quick reply. However, I found another way to do the same.

Server-side


public void paintContent(PaintTarget target) 
{
      myComponent.paint(target);   

}

Client-side


public void updateFromUIDL(UIDL uidl, ApplicationConnection client) 
{
     Paintable myComponent = client.getPaintable(uidl.getChildUIDL(0));
     // In my case, there is no need to call following method.
     //myComponent.updateFromUIDL(uidl.getChildUIDL(0), client); 
}

It looks like your approach is better. I will try it out.

Thanks