Blink/Flash effect or animation in gwt

Question

Hi, I'm building an web intra-net application which has the need for a flashing/blinking button (this has been discussed in depth and is our design decision so please do not lecture me about it). Our UI framework is GWT.
Currently in the prototype this effect is achieved be scheduling a timer which adds or removes a css style thus creating the effect. (The timer can be as fast as having 200ms scheduled repeating).
This design contains a few problems for me:
1. Leans very heavily on a specific css heirarchy and thus is problematic to reproduce this behaviour in different widgets of the application.
2. I think it will not scale nicely when I have 10 buttons which all run these timers on the same page.
3. Very uncomfortable to debug.

I've spent quite a few hours trying to investigate GWT libraries offring this ability but I have not really found one that I am satisfied with.
Basically what I'm looking for is advice regarding specific GWT libraries or maybe ideas how this effect can be implemented more wisely.

Thanks in advance

Answer 1

Have you considered using the CSS text-decoration: blink?

Otherwise you can create a timer wich switches the button style attribute, someting like that:

   blinkTimer = new Timer()
    {
        @Override
        public void run()
        {
            changeStyle();
        }
    };

    blinkTimer.scheduleRepeating(1000);


...

public void changeStyle()
{
   for (Button b: blinkButtons)
   {
        if (b.getStyleName().equals(blinkOn)
               b.setStyleName(blinkOff);
           else
               b.setStyleName(blinkOn;        
    }
}

Answer 2

Nice post, give a sample output flash.

Answer 3

Hi, If you're concerned about reusability you could write a wrapper class for a UIObject and have a timer add/remove a dependent style name. (Note I wrote the code below in the browser so it is probably not perfect but should give you an idea of what I mean).

public class BlinkAnimation {

  private UIObject obj;

  private Timer timer;

  private int interval, iteration, stopIter;

  private boolean blink;

  public BlinkAnimation(UIObject obj) {
    this(obj, 200);
  }

  public BlinkAnimation(Element elm, int interval) {
    this.obj = obj;
    this.interval = interval;

    timer = new Timer() {
      @Override
      public void run() {
        if (!blink) {
          obj.addStyleDependentName("blink");
          iteration++;
        } else {
          obj.removeStyleDependentName("blink");
          if (iteration == stopIter) {
            timer.cancel();
          }
        }
        blink = !blink;
      }
    };
  }

  public void animate() {
    anmiate(-1);
  }

  public void animate(int numTimes) {
    iteration = 0;
    stopIter = numTimes;
    blink = false;
    timer.scheduleRepeating(interval);
  }

  public void stop() {
    timer.cancel();
  }
}

// Usage
Widget widget = ....
BlinkAnimation ohTheHumanity = new BlinkAnimation(widget);
ohTheHumanity.animate();

Then for different element types you can style them differently

/* Normal widget styles */
.my-Widget {
  /* ... */
  border:none;
  /* ... */
}

.my-Widget-blink {
  border:1px solid red;
}