Fade Out, Update, Fade In?

[Josh]

Hello, I'm trying to use gwt-fx to fade out a panel, update it while
it is invisible, and fade it back in. The best I've been able to get
is to fade it out, update it, and then it never fades in again. When I
try and update it again, it flashes back to completely visible (with
the updated values), and fades back out.

Here is my code, am I doing something wrong, or does this just not
work with GWT FX yet?

package org.taco.carzy.client.view;

import org.adamtacy.client.ui.effects.events.EffectCompletedEvent;
import org.adamtacy.client.ui.effects.events.EffectCompletedHandler;
import org.adamtacy.client.ui.effects.impl.Fade;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
* @author pardsbane
*
*/
public class FadeTestPanel extends VerticalPanel {

Label panel = new Label("no clicks");
int clicks = 0;

public FadeTestPanel() {

getElement().setId("effectPanel");

this.setHeight("100%");
this.setWidth("100%");

panel.getElement().setId("wipe");

panel.addClickHandler(new ClickHandler() {

// @Override
public void onClick(ClickEvent event) {
clicks++;
fadeOutUpdateFadeIn("clicks: " + clicks);
}
});

this.add(panel);

}

private void fadeOutUpdateFadeIn(final String newText) {
final Fade effect = new Fade(panel.getElement());
effect.addEffectCompletedHandler(new EffectCompletedHandler()
{
public void onEffectCompleted(EffectCompletedEvent event)
{
panel.setText(newText);
effect.getHandlers().removeHandler(event.getType(),
this);
effect.play(1, 0);
}
});

effect.play(0, 1);
}
}

[Adam T]

Hi Josh,

There's nothing wrong with your code, but there is some sort of "race"
in gwt-fx/gwt which stops the reversing of the effect (it's too early
on Sunday morning to find it right now :) )

I can get your code to work if I introduce a Deferred command to give
everything a chance to settle down (I also changed a little how the
effect object is created to stop adding a new effect on every click)

Fade effect;

private void fadeOutUpdateFadeIn(final String newText) {

if(effect==null)effect = new Fade(panel.getElement());

effect.addEffectCompletedHandler(new EffectCompletedHandler() {
public void onEffectCompleted(EffectCompletedEvent event) {
panel.setText(newText);
effect.getHandlers().removeHandler(event.getType(), this);

// instead of
"effect.play(1,0)" wrapping in deferred command appears to work.
DeferredCommand.addCommand(new Command(){
public void execute() {
effect.play(1, 0);
}
});



}
});
effect.play(0, 1);
}
}


Hope that helps!

//Adam

[Joshua ChaitinPollak]

Thanks, that works great! I have refactored the method to take an effect and a runnable, so that different views in my application can use the same code to do their effect, update, and refresh. For example, one view might use a Wipe, another might use a Fade.

I'm nervous about the removeHandler though: If a view calls outRunIn() in the same effect twice quickly (before the first event finishes playing), I think the first handler could be leaked.

Is there a way to protect against this? I would be happen with a removeAllHandlers(event.getType()) call, but I don't see a method like that.

Thanks again for the help, here is my refactored code:

public class EffectUtils {

    public static void outRunIn(final NEffect effect, final Runnable runnable) {

        effect.addEffectCompletedHandler(new EffectCompletedHandler() {

            public void onEffectCompleted(EffectCompletedEvent event) {

                runnable.run();

                

                effect.getHandlers().removeHandler(event.getType(), this);