GWT Yellow Fade Technique (YFT)

This is a quick example of a fading technique which notifies that a change or update in your GWT app has happened.  Seems like every ajax site out there uses a technique similar to this to notify the user that something has happened.  As I write this post, Google Docs flashes up a yellow “Saving…” box for a couple of seconds to let me know my document was automatically saved.  This “Saving…” flash box functionality is actually something I was about to put into an application, so I did some searches to see what kind of information was out there.  I found nothing on doing it in GWT, actually all you’ll see out there is a bunch of finger pointing and chest bashing about who came up with the technique first (who cares?).  I put together a really fast example (which you can see and try below) and a handler that you can plug into your own app to accomplish the same thing. 


In case the iframe doesn’t show up in your browser you can see and try the example here.

First, let me explain how it’s all done.  Using a list of colors, in this case different shades of yellow, you add and remove styles (a color) of a widget.  The colors are stored in the CSS file.  The change is triggered by a timer.  The YellowFadeHandler class has an inner class called FadeObject which holds a color and a com.google.gwt.user.client.ui.UIObject. This UIObject is the super class of all major GWT widgets and has the methods:

addStyleName(java.lang.String style)
and
removeStyleName(java.lang.String style)

The FadeObject class

private class FadeObject {
	private UIObject uiObj = null;
	private int color = 0;
 
	public FadeObject(UIObject uiObj) {
		this.uiObj = uiObj;
		this.uiObj.addStyleName(yftStyles[color]);
	}
 
	public void nextColor() {
		if (color == transparent_color) return;
		uiObj.removeStyleName(yftStyles[color]);
		color++;
		uiObj.addStyleName(yftStyles[color]);
	}
	public int getColor() {
		return color;
	}
	public boolean isTransparent() {
		if (color == transparent_color) return true;
		return false;
	}
}// end class FadeObject

The YellowFadeHandler class

  private List<FadeObject> fadeObjectList = new LinkedList<FadeObject>();
 
  public YellowFadeHandler() {
    Timer t = new Timer() {
      public void run() {
        if (fadeObjectList.isEmpty()) return;
        for (Iterator<FadeObject> iter = fadeObjectList.iterator(); iter.hasNext(); ) {
          FadeObject fObj = iter.next();
          fObj.nextColor();
          if (fObj.isTransparent()) {
            //if it hits the transparent color then fading is done so remove it.
            iter.remove();
            GWT.log("fade object removed", null);
            continue;
          }
        }
      }
    };
    t.scheduleRepeating(120);
  }
 
  public void add(UIObject obj) {
    if (obj == null) return;
    FadeObject fo = new FadeObject(obj);
    fadeObjectList.add(0, fo);
    GWT.log("fade object added", null);
  }

My YellowFadeHandler class holds a List of these FadeObjects.  When the timer fires, it iterates through the list and changes (removes the old and adds the new) styles of the widgets.  When the style is changed to the last color in the chain (transparent), the widget is then removed from the list.  So to have a widget go through the yellow fade, all that needs to be done is call handler.add(widget);
Super simple. Here’s the source.
A couple of books worth checking out are: GWT in Actionand GWT in Practice


3 Comments

  1. Tahir says:

    Thanks.
    Nice to see a simple way of doing such animation.

  2. [...] /home/nick » Blog Archive » GWT Yellow Fade Technique (YFT) – Discussions on Programming, Linux, a… Alerts people of changes in the ui… its neat (tags: ui gwt) [...]

  3. Thanks by sharing your knowledge on this fade thing. I’m using your code with a couple of little modifications and it works wonderfully.

Leave a Reply