January 27, 2021
Hot Topics:

Introducing a Lightweight UI Toolkit: Shake Your User Interface

  • By Ibon Urrutia
  • Send Email »
  • More Articles »

An animated component

Observe your progress bar:

public class ProgressBar extends Label {

   private static final int REPAINT_TIME = 50;
   private Image progress;
   private Image[] animation = new Image[4];

   public ProgressBar(Resources res) {
      progress = res.getImage("progress.png");
      animation[0] = progress;
      animation[1] = progress.rotate(90);
      animation[2] = progress.rotate(180);
      animation[3] = progress.rotate(270);
   private long lastInvoke;
   private int currentImage = 0;

   public boolean animate() {
      long current = System.currentTimeMillis();
      if (current - lastInvoke > REPAINT_TIME) {
         lastInvoke = current;
         if (currentImage == animation.length) {
             currentImage = 0;
         return true;
      return false;

   public int getHeight() {
      return progress.getHeight();

   public int getWidth() {
      return Display.getInstance().getDisplayWidth();

It is a simple label in which you have overridden the animate component: Every 50 milliseconds, it changes the label's image by a 90 degree rotated image, and returns true to the repaint component on screen. You can change REPAINT_TIME to modify the animation speed without modifying the entire application's frame rate. You also overrode getHeight and getWidth. If you don't do it, the animation isn't painted, because, as you will see, you call setPreferredSize of your new component with those values.

To show animation on screen, I have created a Form that will be called every time you are going to access the Internet, to provide a visual hint to the user. You create a method on WeatherMidlet because it can be accessed from everywhere. It is shown in the following code and returns an initialized Form.

public Form getDownloadingPane() {
      Form downForm = new Form();
      Container cont = new Container();
      cont.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
      ProgressBar bar = new ProgressBar(res);
      bar.setPreferredSize(new Dimension(bar.getWidth(),

      Label label = new Label("Requesting...");



      return downForm;

You have to register where the animated components are placed on the Form. To place a "Requesting..." label on your progress bar approximately in the middle of the screen, you have set their top margins using a relative positioning dependent from the device's display height.

The following is the result on screen:

Figure 8: Downloading the Form

Page 6 of 7

This article was originally published on September 25, 2008

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date