Question

I’m trying to understand the timing of the event loop with animate() and DeferredCommand. I’ve got LayoutPanel that has a navigation column on the left (like Outlook) and then the remainder of the screen can toggle between being split vertically between 2 panels, or the bottom panel (when it is split) can be set to fill the rest of the screen. I’ve got the layouts and basic animation between them working, but I’m trying to delay the resizing of the bottom screen with a DeferredCommand. The reason for this is that when going from fullscreen to half screen for the bottom panel, I want to resize the bottom panel after reducing it down to half size. If this doesn’t happen, the bottom panel is resized to halfsize while still being displayed full screen, and then the animate happens.

However, this is exactly what is happening, and which I was trying to avoid with the DeferredCommand. So it appears that the DeferredCommand is executing before the animate.

Here’s the code snippet

setWidgetTopHeight(...make top panel half size)
setWidgetTopHeight(...make lower panel half size, positioned halfway down)
animate(500); 
DeferredCommand.addCommand(new Command() {
    public void execute() {
         ...resize Widget inside lower Panel
    }
});

The lower panel that is being resized in the animate is a FlowPanel around the actual widget that is being resized in the DeferredCommand. Could this be part of the problem?

Answer 1

animate() is implemented by a successive number of ScheduledCommands (or the equivalent) – i.e. an animation does not complete in a single iteration of the browser event loop. Note that DeferredCommand is deprecated in GWT 2.1 – Scheduler provides the same functionality. The correct way to perform an action after the animation completes is with an AnimationCallback:

animate(500, new Layout.AnimationCallback() {
  @Override
  public void onAnimationComplete() {
    // Perform post-animation action.
  }

  @Override
  public void onLayout(Layout.Layer layer, double progress) {
    // Ignored.
  }
});