April 24, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Introducing a Lightweight UI Toolkit: Shake Your User Interface, Page 6

  • September 25, 2008
  • 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;
         currentImage++;
         if (currentImage == animation.length) {
             currentImage = 0;
         }
         setIcon(animation[currentImage]);
         setAlignment(Component.CENTER);
         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(),
         bar.getHeight()));
      bar.setBorderPainted(false);
      bar.getStyle().setBgTransparency(0);
      bar.getStyle().setMargin(Component.TOP,
         Display.getInstance().getDisplayHeight()/10);

      Label label = new Label("Requesting...");
      label.getStyle().setFont(res.getFont("bold"));
      label.getStyle().setMargin(Component.TOP,
         Display.getInstance().getDisplayHeight()/3);
      label.setAlignment(Component.CENTER);

      cont.addComponent(label);
      cont.addComponent(bar);

      downForm.addComponent(cont);
      downForm.registerAnimated(bar);

      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



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel