Displaying Graphics in Applets

Overview

Java provides a straighforward (but advanced) mechanism for loading images. Just to put the difficulties in context with loading images in applets; As you are aware, applets are downloaded from an Internet site, which implies that if we are to use images in our applets, they must also be downloaded from an Internet site as separate files. So the image loader must be 'Internet aware', but that's only the start; what if we have a very slow connection between your computer (onto which the applet downloads) and the site with the image. Our applet needs to download the image, before it runs, or does it? - well no in fact, as a threaded application it can continue doing other tasks while it is waiting for the image to download completely.

Applets have built in support for images, including the ability to decode and display GIF (.gif) and JPEG (.jpg) image format files. Image files are assumed to be relative to where the applet was loaded from, i.e. the base directory. A good way to determine the base directory that the applet is located by using the getDocumentBase() method of the Applet class, that returns the base directory as a URL (uniform resource locator) object. You can then pass this URL object to a special Applet method for loading an image. It requires a URL and an optional filename of the image to load. For Example:


  Image myImage = this.getImage (this.getDocumentBase(),"theImage.gif");

This method call will create an Image object called myImage and in effect place the loaded image in this image object. This operation actually creates a separate thread, allowing the paint() method of the applet could be called, even though the entire image may not have been loaded. The image will not be drawn until it is completely loaded.

To draw this image to the screen use the drawImage() method of the Graphics class. You would usually place this call in the paint() method of your applet. The syntax of this call is:


  (within the java.awt.Graphics class)
   
  boolean drawImage(Image img, int x, int y, ImageObserver observer) 

Where img is your image object, x and y represent the position to draw the top-left corner of the image. The observer is the object to be notified as more of the image is decoded. The drawImage returns a false value if the image has not yet been completely loaded and then returns true when the image has finally loaded.

So an example use of drawImage() might be:


  g.drawImage(myImage, 20, 20, this);

allowing us to draw the image object that we loaded above to the (x,y) position (20,20) and sets the image observer as this. The Java keyword this refers to "this object of the current Class" - so in our case it would refer to "this instance of our Applet class". So our applet is concerned with notification of the image loading.

An Image Display Example

Here is an example of using the methods just discussed to display an image twice in an applet. This applet assumes that the image file "test.gif" is in the same directory as the applet class file "ImageApplet.class".

Figure 8.1. Image Display Applet

Image Display Applet

The Source code is below and in the ImageApplet.java. You can see the applet running here.


 // The ImageApplet that displays an example image "test.gif"

 import java.awt.Graphics;
 import java.awt.Image;
 import java.applet.Applet;

 public class ImageApplet extends Applet
 {
    private Image theImage;
	
    public void init()
    {
      this.theImage = this.getImage( this.getDocumentBase(), "test.gif" );
    }
	
    public void paint(Graphics g)
    {
      g.drawImage( this.theImage, 10, 10, this);
      g.drawImage( this.theImage, 100, 100, this);
    }
 }

In this code segment theImage object has been made a state of the class to allow it to be accessed from both the init() and the paint() methods of our applet ImageApplet. Note that we have not called a constructor for theImage object as the getImage() method actually returns a constructed Image object.