LayoutPanel holding ResizeComposite widgets showing odd behavior

[Ulas]

Hi,

I have a LayoutPanel containing two custom widgets. The widgets both extend ResizeComposite in order to be able to receive the onResize call. The main idea is illustrated in the code below. The two widgets share the same space and depending on user input they are shown in one of three different ways: widget #1 taking up the entire width, widget #1 & #2 are displayed side by side (sharing the available width 50/50) and widget #2 taking up the entire width.

LayoutPanel viewPanel = new LayoutPanel();

CustomWidgetExtendingResizeComposite1 custom1 = new CustomWidgetExtendingResizeComposite1();

CustomWidgetExtendingResizeComposite2 custom2 = new CustomWidgetExtendingResizeComposite2();

viewPanel.add(custom1;)

viewPanel.add(custom2);

public void onClick(String mode)

{

if (mode == "show widget #1")

{ 

this.viewPanel.setWidgetLeftWidth( custom1  , 0, Unit.PCT, 0, Unit.PCT);

this.viewPanel.setWidgetLeftWidth( custom2  , 0, Unit.PCT, 100, Unit.PCT); 

} 

else if (mode == "show widget #1 and #2")

{

this.viewPanel.setWidgetLeftWidth( custom1  , 0, Unit.PCT, 50, Unit.PCT);

this.viewPanel.setWidgetLeftWidth( custom2  , 50, Unit.PCT, 50, Unit.PCT); 

} 

else if (mode == "show widget #2") 

{

this.viewPanel.setWidgetLeftWidth( custom1  , 0, Unit.PCT, 100, Unit.PCT);

this.viewPanel.setWidgetLeftWidth( custom2  , 100, Unit.PCT, 0, Unit.PCT); 

} 

}

Now to the weird part: When the parent (viewPanel) fires the onResize event it doesn't actually change the child widgets' size immidiately, but only does so after a while. I know this because I've overriden the onResize functions in both the custom widget classes and at the time of the onResize they still have their old width values. However, if I introduce a timer into my code that after a small time period (say 100 ms) manually fires the  viewPanel's onResize function it works. By then the custom widgets have both somehow had their width set to the correct valules.

How can this be? Why don't the child widgets have their width values changed immidiately when the parent fires their respective onResize functions?

[Jens]

If I remember correctly, whenever you call setWidgetLeftWidth() or any of the other layout methods, the LayoutPanel will call animate(0); internally. This schedules a LayoutCommand using Scheduler.get().scheduleFinally() which means the layout change happens after all of your code in the current event loop has done its work. 

Its implemented that way for performance: Inside the current event loop you can call as many layout methods as you like and the layout is done all at once in a finally command and not after every layout method call. If you need the changes to take effect immediately you have to call LayoutPanel.forceLayout().

Also sometimes you just need a Scheduler.get().scheduleDeferred() command to read changed width/height values because the browser needs some time to re-render your widget. Only when its re-rendered the browser can give you the new, correct width/height values. So if you ever see strange width/height values, try a scheduleDeferred.

-- J.

[Thomas Broyer]

There are a few issues with LayoutPanel:

http://code.google.com/p/google-web-toolkit/issues/detail?id=7188

http://code.google.com/p/google-web-toolkit/issues/detail?id=5424

[Ulas]

Thank you for the help. Using scheduleDeferred solved the issue.

/Ulas