Wait with style in Swing

You can WebStart the demo or download its source code. Only the AnimatedPanel.java and InfiniteProgressPanel.java files can be used freely without any restriction. Contact me for the other files.

UIs can be very annoying, especially when they seem to be doing something but they don't want to tell you what. Worse, some don't even bother telling you how much time they will need to complete the current task. As a user I experienced this way too often. As a programmer I know how hard it can be to determine the duration of a task.

That is why some applications, like Mozilla's installer, use an infinite progress bar. This kind of component ususally looks like a standard regular bar but act a little bit differently. In Mozilla's case you can see a rectangle bouncing within the bar's bounds. I've also seen infinite progress bars acting like regular progress bar but going backward once filled or starting over again. Although the infinite progress bar is a good idea, these implementations suck. There is no way for the user to understand at once that the progress bar is in fact “infinite”.

Hopefully, there are easy way to work around this limitation. I've built two examples to show what kind of infinite progress components can be created with Swing. The first one simply shows glowing picture and label:

I really suggest you to run the WebStart demo to show it in action. Once the application is started, click onto View Sale and then on the Search button. The source code of this effect lies in org.progx.salesmanagers.ui.AnimatedPanel. Such a panel is made of a message and a picture. An animation thread changes the transparency of the message and the brightness of the picture back and forth. The source code is fairly easy to understand.

This first solution is nice but not as powerful as it could be. In this example, the UI remains active during the animation. A complete program should take care of disabling all the “dangerous” components. My second solution relies on the glass pane of the window. As you might know, a glass pane is a component sitting on top of all the other layers of the window, especially the content pane. By intercepting all the mouse events in the glass pane, you block all the application (key events should also be handled to prevent the use of accelerators).

I also chose another way to render an infinite progress bar. Inspired by MacOS X, org.progx.salesmanagers.ui.InfiniteProgressPanel draw a circular set of rotating bars. And guess what? A circle is just the perfect shape to show the infinite property of the progress components. Finally I added a white veil to show the UI cannot be manipulated anymore. Here is what it looks like:

You should really try the online demo for this one :) Once the application is started, click onto New Sale and then on the Perform Sale button. You'll notice the fade in and fade out of the panel. The default constructors allow you to set up the transparency of the veil and to change the duration of the fade in and fade out animations. The code uses some Java2D operations but remains easy to understand.

One remark though: the InfiniteProgressPanel was written very quickly and the code is a mess, particularily the animation thread (which should have been splitted into three threads). The sleep delays used in the animation thread tend to consume a lot of processor power on not-so-recent computers (P4 1.5 Ghz). It definitely needs some tweaking and optimization :)

2 Responses to “Wait with style in Swing”

  1. Venkat says:

    It’s really good….
    I got some ideas to work after looking the demo….
    I will progress with them

  2. Diego Cabrera says: