Adding resize listener/handler to VerticalPanel in

Question

How do I add a listener/handler to a VerticalPanel such that it is triggered when the VerticalPanel changes in size?

I've basically tried the following:

VerticalPanel myPanel = new VerticalPanel();
//... code to add child widgets that may change the size of the parent vertical panel ...

myPanel.addHandler(new ResizeHandler() {
  public void onResize(final ResizeEvent event) {
    //... code to handle resize of vertical panel ...
  }

}, ResizeEvent.getType() );

but the handler doesn't get triggered.

Answer 1

The VerticalPanel does not fire any events. Adding those events is not really possible since the browser does not support resize events on a Table (or DIV or almost any HTML element in fact).

What is the effect that you would like to get ? Do you want to get notified when the myPanel is modified ? then maybe you should extend the VerticalPanel and fire a custom event when widgets are added or removed.

Answer 2

What works reliably is the window-level resize listener:

Window.addResizeHandler(new WindowResizeHandler())

Your resize handler will be called when the user resizes the browser window:

public void onResize(ResizeEvent event)

You can use event.getHeight() and event.getWidth() to get the updated window dimensions.

Since you're only getting the event for the window as a whole, you'll have to do your own propagation to the components you want to lay out. I usually just call a doLayout() method of my own. This method doesn't even need the resize event's height and width because as DLH already comments, you can ask most components for their dimensions when you get notified, and do your calculations with that.

Unfortunately, some browsers don't do the onResize thing very often. In trying not to go crazy with updates, they may sometimes hold on to the event for some seconds, leaving your application visibly ugly while waiting for "proper" layout. Thus, where possible you should try to leave layout to CSS and possibly, depending on your stance in the "tables vs. CSS" war, tables.