Effet de clignotement ou d'animation dans gwt

Question

Je suis en train de construire une application web intra-net qui a besoin d'un bouton clignotant (cela a été discuté en profondeur et c'est notre décision de conception, alors s'il vous plaît, ne me faites pas la leçon à ce sujet). Notre cadre d'interface utilisateur est le suivant GWT .
Actuellement, dans le prototype, cet effet est obtenu en programmant une minuterie qui ajoute ou supprime un style css, créant ainsi l'effet. (La minuterie peut être aussi rapide qu'une répétition programmée de 200 ms).
Cette conception me pose quelques problèmes :
1. S'appuie très fortement sur une hiérarchie css spécifique et il est donc problématique de reproduire ce comportement dans différents widgets de l'application.
2. Je pense que cela ne sera pas bien adapté lorsque j'aurai 10 boutons qui exécutent tous ces minuteries sur la même page.
3. Très difficile à déboguer.

J'ai passé pas mal d'heures à essayer d'enquêter. GWT Les bibliothèques offrent cette possibilité, mais je n'ai pas vraiment trouvé de solution qui me satisfasse.
Ce que je recherche essentiellement, ce sont des conseils concernant les éléments suivants GWT ou peut-être des idées sur la manière dont cet effet peut être mis en œuvre plus judicieusement.

Merci d'avance

Answer 1

Avez-vous envisagé d'utiliser la méthode CSS décoration du texte : clignotant ?

Sinon, vous pouvez créer une minuterie qui modifie l'attribut de style du bouton, quelque chose comme ça :

   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

Si vous êtes préoccupé par la réutilisation, vous pouvez écrire une classe d'enveloppe pour un objet UIO et avoir un temporisateur qui ajoute/supprime un nom de style dépendant. (Note : j'ai écrit le code ci-dessous dans le navigateur, il n'est donc probablement pas parfait mais il devrait vous donner une idée de ce que je veux dire).

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();

Ensuite, pour les différents types d'éléments, vous pouvez les styliser différemment

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

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