Module 9: AWT, Part I

In this module, we will only consider simple image features.

About image formats

• Images consist of pixel values: each pixel is determined by its "RGB" values, typically 8-bits for each value.
  
  
• Images are typically stored in compressed format.
  
  
• GIF (Graphical Interchange Format) is one such format:
  • GIF (created by CompuServe) uses the lossless Lempel-Ziv-Welch (LZW) algorithm.
  • GIF is probably the most popular format.
  • However, there is a patent controversy surrounding GIF.
    (Unisys holds the LZW patent).
  
  
  
• JPEG (Joint Photographic Experts Group) is another format:
  • JPEG uses lossy compression based on a number of image-processing techniques such as transforms (DCT) and quantization.
  • JPEG is free.
  • JPEG is really an algorithm spec rather than a file spec.
  
  
  
• PNG (Portable Network Graphics) format:
  • Lossless format, like GIF.
  • Slightly better compression than GIF.
  • Free of patent issues.
  • Support for transparency and progressive display.
  
  
  
• Java handles GIF, JPEG and PNG formats and decides based on the extensions .gif, .jpeg or .jpg, and .png.

• Image:
  • An Image instance is used to store and maintain pixels from an image.
  • The full set of pixels is not necessary -- any subset will do.
  • Image does not provide access to the raw pixels.
  • To actually get at the pixels, you need to use PixelGrabber.
  
  
  
• Toolkit:
  • Toolkit is a motley collection of useful methods bundled together into a single class, in package java.awt.
  • You cannot create an instance, but must instead use the method Toolkit.getDefaultToolkit().
  • The getImage() method is the most important method of the Toolkit instance.
  • getImage() comes in two flavors:

    
       public Image getImage (String filename);
       public Image getImage (URL u);
          

  • Both methods return an Image instance.
  
  
  
• MediaTracker:
  • The getImage() method above is written to return immediately.
  • Thus, as the image loads, it starts filling up the window, typically, top-down.
  • If you want to wait until the entire image has loaded, use a MediaTracker instance.
  
  
  
• Graphics:
  • As with any rendering, the Graphics instance passed to the paint() method is used.
  • The method drawImage() (and its variants) is is used to display an image.
  
  
  
• ImageObserver:
  • ImageObserver is really an interface in java.awt.
  • It has just one method.
  • The method is used by a image-rendering process to report on progress, on errors etc.
  • An instance must be passed to drawImage().
  • The class Component (and therefore Frame) implements this interface.
  • Thus, the Frame instance itself is usually passed via this.

Let's look at a simple example: (source file)

import java.awt.*;

class NewFrame extends Frame {

  // Constructor. 
  public NewFrame (int width, int height)
  {
    // Set the title and other frame parameters. 
    this.setTitle ("Bugs");
    this.setResizable (true);
    this.setBackground (Color.cyan);
    this.setSize (width, height);

    // Show the frame. 
    this.setVisible (true);
  }

  // Override paint(): 
  public void paint (Graphics g)
  {
    // Get a Toolkit instance. 
    Toolkit tk = Toolkit.getDefaultToolkit ();

    // Provide a filename to the getImage() method. 
    Image img = tk.getImage ("bugs.gif");

    // Use the drawImage method. 
    g.drawImage (img, 0, 0, this);
    // Note: we pass "this" as a parameter. 
  }

} // End of class "NewFrame" 

public class TestAwt13 {

  public static void main (String[] argv)
  {
    NewFrame nf = new NewFrame (300, 200);
  }

}
  

The result produced is:

Note:

• The format is GIF.
  
  
• The file is assumed to be in the same directory.
  
  
• Since the insets were not used, part of the image gets clipped.
  
  
• The definition of drawImage() used is:

  
    public void boolean drawImage (Image img, int x, int y, ImageObserver I);
      

  Here:
  • You pass an Image instance (img).
  • You pass the point where the topleft corner of the image is to be located.
  • You pass an ImageObserver instance.
  • Note that Component implements the ImageObserver interface:

    
      public abstract class Component 
        implements ImageObserver, MenuContainer, Serializable {
    
        // ... 
    
      }
          

  • Thus, Frame, which is a subclass of Component, also implements ImageObserver.
  • Therefore, we can pass the current Frame instance (via this) as the fourth parameter:

    
        g.drawImage (img, 0, 0, this);
          

  • You don't really need to understand the purpose of ImageObserver at this time.

In the next example, we will fetch an image from a URL: (source file)

import java.awt.*;
import java.net.*;  // For class URL. 

class NewFrame extends Frame {

  // Constructor. 
  public NewFrame (int width, int height)
  {
    // Set the title and other frame parameters. 
    this.setTitle ("Gif image");
    this.setResizable (true);
    this.setBackground (Color.cyan);
    this.setSize (width, height);

    // Show the frame. 
    this.setVisible (true);
  }

  // Override paint(): 
  public void paint (Graphics g)
  {
    Toolkit tk = Toolkit.getDefaultToolkit ();

    // try-catch needed since URL constructor throws an exception. 
    try {
      // URL is in java.net. 
      URL u = new URL ("http://www.seas.gwu.edu/~drum/canyon.jpg");

      // Load the image using the second form of getImage(). 
      Image img = tk.getImage (u);

      // Display image. 
      g.drawImage (img, 0, 0, this);
    }
    catch (MalformedURLException e) {
      System.out.println (e);
    }
  } // "paint" 

} // End of class "NewFrame" 

public class TestAwt14 {

  public static void main (String[] argv)
  {
    NewFrame nf = new NewFrame (600, 300);
  }

}
  

Note:

The result produced is:

Note:

• The button occupies the entire visible area of the frame.
  (This is a result of the layout method used).
  
  
• This button does flash when clicked, but nothing happens.
  (We haven't created a button-pressed event-handler yet).
  
  
• Class Button is used to create a button instance:
  • Here is (part of) the definition of Button:

    
      public class Button extends Component {
    
        // Constructors. 
        public Button ();
        public Button (String label);
    
        // Methods. 
        public synchronized void addActionListener (ActionListener a);
        public String getLabel ();
        public synchronized void setLabel (String label);
    
        // ... 
      }
          

  • The label inside a button is passed as a String to the Button constructor:

    
         Button b = new Button ("Quit");
       

  • Since Button extends Component, it inherits a whole bunch of methods, e.g.,
    • setBackground (Color c) - set the background color of the button.
    • setForeground (Color c) - set the font color.
    • setFont (Font) - set the font used.
  
  
  
• Each container, like a Frame uses a layout manager to arrange components for display:
  • Layout managers don't let you control exact locations, but give you some options in controlling the layout.
  • Layout managers also ignore sizes of components
  • There are five layout managers:
    1. BorderLayout: this manager tries to place components either in one of five locations: North, South, East, West or Center (default).
    2. FlowLayout: this manager places components left to right and row-by-row (in standard scan order).
    3. CardLayout: this manager displays only one component at a time, like a rolodex.
    4. GridLayout: this manager places components in a grid.
    5. GridBagLayout: this manager uses a grid-like approach that allows for different row and column sizes.
  • Each layout manager is a class in java.awt.
  • We will cover layout managers later.
  
  
  
• The setLayout() method is used to choose the layout manager.
  
  
• The default layout manager for a Frame is BorderLayout, so the setLayout() call was not really necessary, but was used here to highlight the layout manager.
  
  
• The add method is used to add a component:
  • The add method above has this signature:

    
        public Component add (Component c);
          

  • Since Button derives from Component, it can be passed as a parameter.
  • Note: we did not use the return value (it has an esoteric purpose).
  
  
  
• Finally, the code for creating and adding a button is inside the constructor of NewFrame:
  • An alternative would have been to place the code in paint(): (source file)

    
      public void paint (Graphics g)
      {
        // Create a Button instance and pass the button  
        // label as a parameter to the constructor. 
        Button b = new Button ("Quit");
    
        // Set the layout manager for our Frame. 
        this.setLayout (new BorderLayout());
    
        // Add the button to the frame. 
        this.add (b);
    
        // Call validate to re-compute what's 
        // inside a container. 
        this.validate();
      }
          

  • This works, but creates new Button and BorderLayout instances each time paint() is called - it is very inefficient!
  • An alternative (also not desirable) is to place the button outside the frame, e.g., (source file)

    
    public class TestAwt18 {
    
      public static void main (String[] argv)
      {
        NewFrame nf = new NewFrame (300, 200);
    
        // Create a Button instance and pass the button 
        // label as a parameter to the constructor. 
        Button b = new Button ("Quit");
    
        // Set the layout manager for the frame. 
        nf.setLayout (new BorderLayout());
    
        // Add the button to the frame. 
        nf.add (b);
    
        // Call validate to reset: 
        nf.validate();
      }
    
    }
          

  • Note that we used the validate() method of Container (inherited by NewFrame that is needed to "reset" the interior, so that the button can be displayed.

Next, let us try making small changes in the layout:

1. First, we will explicitly ask BorderLayout to place the button in the "South" area of the window: (source file)

   
     // Constructor.
     public NewFrame (int width, int height)
     {
       // Set the title and other frame parameters. 
       this.setTitle ("Button example");
       this.setResizable (true);
       this.setBackground (Color.cyan);
       this.setSize (width, height);
   
       // Create a new button. 
       Button b = new Button ("Quit");
   
       // BorderLayout is already the manager so  
       // we leave the setLayout commented out.
       // this.setLayout (new BorderLayout()); 
   
       // Add the button to the frame. 
       this.add (b, BorderLayout.SOUTH);
   
       // Show the frame.
       this.setVisible (true);
     }
       

   This produces:
   
   Note:
   • This time, the button has a "normal" height, but is stretched to occupy all available width.
   • A different version of add is used: a constant is passed as parameter to indicate "South".
   • To see where BorderLayout places items, let's insert five buttons with this code: (source file)

     
         this.add (new Button ("South"), BorderLayout.SOUTH);
         this.add (new Button ("North"), BorderLayout.NORTH);
         this.add (new Button ("East"), BorderLayout.EAST);
         this.add (new Button ("West"), BorderLayout.WEST);
         this.add (new Button ("Center"), BorderLayout.CENTER);
         

   • Here is the result:
     
     
   
   
   
2. Next, let's use FlowLayout:
   • The following code is used: (source file)

     
         // Create a new button. 
         Button b = new Button ("Quit");
     
         // Use a FlowLayout manager. 
         this.setLayout (new FlowLayout());
     
         // Add the button to the frame. 
         this.add (b);
     
         // Show the frame. 
         this.setVisible (true);
        

   • Here is the result:
     
     

Next, we will make two improvements:

• We will add code to change the button's colors and font.
  
  
• We will add an event-listener that handles the case when the button is pressed.

import java.awt.*;
import java.awt.event.*; // Needed for ActionListener. 

class NewFrame extends Frame implements ActionListener {

  // Constructor. 
  public NewFrame (int width, int height)
  {
    // Set the title and other frame parameters. 
    this.setTitle ("Button example");
    this.setResizable (true);
    this.setBackground (Color.cyan);
    this.setSize (width, height);

    // Create a new button. 
    Button b = new Button ("Quit");

    // Set the background color of the button. 
    b.setBackground (Color.red);

    // Set the font of the button label. 
    b.setFont (new Font ("Serif", Font.PLAIN | Font.BOLD, 15));

    // Add an ActionListener to the button. 
    b.addActionListener (this);

    // BorderLayout is already the manager so  
    // we leave the setLayout commented out. 
    // this.setLayout (new BorderLayout()); 

    // Add the button to the south of the frame. 
    this.add (b, BorderLayout.SOUTH);

    // Show the frame. 
    this.setVisible (true);
  }

  // This method is required to implement the  
  // ActionListener interface. 
  public void actionPerformed (ActionEvent a)
  {
    // Button must have been pressed - so really quit. 
    System.exit (0);
  }

} // End of class "NewFrame" 


public class TestAwt22 {

  public static void main (String[] argv)
  {
    NewFrame nf = new NewFrame (300, 200);
  }

}
  

Note:

• Since Button derives from Component, it inherits methods like setBackground and setFont.
  
  
• Button has a method called addActionListener:

  
    public class Button extends Component {
  
      // ... 
  
      public synchronized void addActionListener (ActionListener a);
  
      // ... 
    }
     

• Exactly what is an ActionListener?
  • The definition can be found in package java.awt.event:

    
        public interface ActionListener extends EventListener {
          public abstract void actionPerformed (ActionEvent e);
        }
            

  • Note: interface EventListener is empty.
  • Thus, an implementor of ActionListener needs to implement only one method: actionPerformed().
  • This method will be called whenever an "action" takes place.
  • In the above case, the method is called when the button is pressed.
  
  
  
• We have made our frame (NewFrame) itself implement the ActionListener interface.
  
  
• Since NewFrame is an ActionListener, we register it with our button:

  
      // Add an ActionListener to the button. 
      b.addActionListener (this);
     

  This tells the button, that the listener has a method called actionPerformed that can be called when the button is pressed.
  
  
• Note that actionPerformed is actually called when the button is pressed:
  • The only thing that needs to be done is to actually quit.
  • The parameter ActionEvent contains some information (that is not needed in this case).
  • This information can be used as follows (an alternative to method actionPerformed():

    
      public void actionPerformed (ActionEvent a)
      {
        String event_desc = a.getActionCommand();
        if (event_desc.equalsIgnoreCase("Quit"))
          System.exit (0);
      }
         

  • Here, we make doubly sure that it is the Quit button that generated the event.
  • If multiple buttons are used, we can distinguish between them, e.g.,

    
      public void actionPerformed (ActionEvent a)
      {
        String event_desc = a.getActionCommand();
        if (event_desc.equalsIgnoreCase("Quit"))
          System.exit (0);
        else if (event_desc.equalsIgnoreCase ("Redraw")) {
          this.repaint ();
        }
      }
          

In-Class Exercise 9.7: In this example, you will create a frame with some truly awful color combinations. Use the following template to create a frame in which you post four buttons using the FlowLayout manager:

1. Quit - quit when this button is pressed.
2. Orange - write "Hello World" at location (100,100) in orange color when this button is pressed.
3. Pink - write "Hello World" at location (100,100) in pink color when this button is pressed.
4. Yellow - write "Hello World" at location (100,100) in yellow color when this button is pressed.

  public void paint (Graphics g);
  

Interaction: mouse clicks

We will now write a simple program to perform some drawing based on mouse-clicks:

• Whenever the user clicks the mouse inside the frame, a line is drawn from the last click-place to the current click place.
• The starting point for the first segment will be (0,0).
• The frame will have a quit button.

To "listen" for mouse-clicks, we need an object that implements the MouseListener interface:

• Interface MouseListener is defined as:

  
     public interface MouseListener extends EventListener {
       public abstract void mouseClicked (MouseEvent e);
       public abstract void mouseEntered (MouseEvent e);
       public abstract void mouseExited (MouseEvent e);
       public abstract void mousePressed (MouseEvent e);
       public abstract void mouseReleased (MouseEvent e);
     }
     

  
  
  
• These five methods have to be overridden to successfully implement the interface.
  
  
• However, we are only interested in mouse-click events.

Here is the code: (source file)

class NewFrame extends Frame 
  implements ActionListener, MouseListener {

  // Constructor. 
  public NewFrame (int width, int height)
  {
    // Set the title and other frame parameters. 
    this.setTitle ("Button example");
    this.setResizable (true);
    this.setBackground (Color.cyan);
    this.setSize (width, height);

    // Create a quit button. 
    Button b = new Button ("Quit");
    b.setBackground (Color.red);
    b.setFont (new Font ("Serif", Font.PLAIN | Font.BOLD, 15));
    b.addActionListener (this);
    // this.setLayout (new BorderLayout()); 
    this.add (b, BorderLayout.SOUTH);

    // Add mouse-listening to the frame itself. 
    this.addMouseListener (this);

    // Show the frame. 
    this.setVisible (true);
  }

  // This method is required to implement the  
  // ActionListener interface. 
  public void actionPerformed (ActionEvent a)
  {
    // Button must have been pressed - so really quit. 
    System.exit (0);
  }

  int current_x=0, current_y=0;

  // These methods are required to implement  
  // the MouseListener interface. 
  public void mouseClicked (MouseEvent m)
  {
    System.out.println ("mouseClicked event: " + m.paramString());
    int x = m.getX();
    int y = m.getY();
    Graphics g = this.getGraphics();
    g.drawLine (current_x, current_y, x, y);
    current_x = x;
    current_y = y;
  }

  // We need to implement these methods, but 
  // don't actually have to do anything inside. 
  public void mouseEntered (MouseEvent m) {}
  public void mouseExited (MouseEvent m) {}
  public void mousePressed (MouseEvent m) {}
  public void mouseReleased (MouseEvent m) {}

} // End of class "NewFrame" 
  

The result (after a few random mouse clicks):

Note:

• To handle mouse events (clicking, dragging, entering etc), a "mouse listener" needs to be passed to the widget that "sees" the events:
  • The mouse events take place in the frame.
  • Thus, we need to pass a "mouse listener" to the frame:

    
       this.add ( /* mouse listener */ );
           

  • In our example, the frame itself implements MouseListener.
  • Therefore, we pass the frame itself:

    
        // Add mouse-listening to the frame itself. 
        this.addMouseListener (this);
           

  • The MouseListener interface was implemented by overriding all the abstract methods in the interface.
  • The only one we were really interested in was mouseClicked().
  • For the others, we provided empty bodies:

    
      public void mouseEntered (MouseEvent m) {}
      public void mouseExited (MouseEvent m) {}
      public void mousePressed (MouseEvent m) {}
      public void mouseReleased (MouseEvent m) {}
           

  
  
  
• The method MouseClicked is called whenever the mouse is clicked within the frame:
  • The parameter MouseEvent carries information, e.g., the pixel coordinates of the place the mouse was clicked.
  
  
  
• Observe that it is possible to draw in methods other than paint:
  • We drew in the method MouseClicked():

    
        Graphics g = this.getGraphics();
        g.drawLine (current_x, current_y, x, y);
        

  • To get the Graphics context, simply call the getGraphics() method of Component (inherited by NewFrame).

---

Panels and canvases

AWT provides several widgets for GUI's. We will look at two of these now:

• Panel:
  • A Panel is used to "contain" other components.
  • Example: you may want to organize a collection of buttons into one unit.
  • Another use: you can use a different layout manager within a panel.
  
  
  
• Canvas:
  • A canvas is used for drawing or displaying an image.
  • Since a canvas does not have a border, you don't have to worry about insets at all.
  • Drawing can be localized to the canvas and does not interfere with other components in a frame.

In our example, we will:

• create a white canvas for drawing (with blue lines);
• use the quit button in the previous example;
• create a start button that must be pressed to start drawing;
• create a clear button that resets the canvas;

Here is what we want the frame to look like:

The code: (source file)

import java.awt.*;
import java.awt.event.*; // Needed for ActionListener. 

class NewFrame extends Frame 
  implements ActionListener, MouseListener {

  // Data. 
  Button quitb, clearb, startb;
  Canvas c;
  Panel p;
  boolean start = false;

  // Constructor. 
  public NewFrame (int width, int height)
  {
    // Set the title and other frame parameters. 
    this.setTitle ("Panel and canvas example");
    this.setResizable (true);
    this.setBackground (Color.cyan);
    this.setSize (width, height);

    // Create a quit button. 
    quitb = new Button ("Quit");
    quitb.setBackground (Color.red);
    quitb.setFont (new Font ("Serif", Font.PLAIN | Font.BOLD, 15));
    quitb.addActionListener (this);
    // this.setLayout (new BorderLayout()); 
    this.add (quitb, BorderLayout.SOUTH);

    // Create a white canvas. 
    c = new Canvas ();
    c.setBackground (Color.white);
    c.setForeground (Color.blue);
    c.addMouseListener (this);

    // Add canvas to frame in the center. 
    this.add (c, BorderLayout.CENTER);

    // Create a Panel 
    p = new Panel ();
    p.setLayout (new FlowLayout());

    // Create a clear button. 
    clearb = new Button ("Clear");
    clearb.addActionListener (this);
    clearb.setBackground (Color.green);

    // Add clear button to panel. 
    p.add (clearb);

    // Create a start button. 
    startb = new Button ("Start");
    startb.addActionListener (this);
    startb.setBackground (Color.green);

    // Add start button to panel. 
    p.add (startb);

    // Now add the panel to the frame. 
    this.add (p, BorderLayout.NORTH);

    // Show the frame. 
    this.setVisible (true);
  }

  // This method is required to implement the  
  // ActionListener interface. 
  public void actionPerformed (ActionEvent a)
  {
    String s = a.getActionCommand();
    if (s.equalsIgnoreCase ("Quit"))
      System.exit(0);
    else if (s.equalsIgnoreCase ("Clear")) {
      // Note: must call repaint() of canvas 
      // to reset the background. 
      c.setBackground (Color.white);
      c.repaint ();
      current_x = current_y = 0;
    }
    else if (s.equalsIgnoreCase ("Start"))
      start = true;
  }

  int current_x=0, current_y=0;

  // These methods are required to implement  
  // the MouseListener interface. 
  public void mouseClicked (MouseEvent m)
  {
    if (!start) // User must click start once to draw. 
      return;
    int x = m.getX();
    int y = m.getY();
    Graphics g = c.getGraphics();
    g.drawLine (current_x, current_y, x, y);
    current_x = x;
    current_y = y;
  }

  // We need to implement these methods, but 
  // don't actually have to do anything inside. 
  public void mouseEntered (MouseEvent m) {}
  public void mouseExited (MouseEvent m) {}
  public void mousePressed (MouseEvent m) {}
  public void mouseReleased (MouseEvent m) {}

} // End of class "NewFrame" 


public class TestAwt24 {

  public static void main (String[] argv)
  {
    NewFrame nf = new NewFrame (300, 200);
  }

}
  

Note:

• The frame continues to use a BorderLayout:
  • The canvas is placed in the center (BorderLayout.CENTER).
  • The quit button is placed SOUTH.
  • The panel (containing the other two buttons) is placed NORTH.
  
  
  
• Since the frame implements the listeners, the frame itself is passed via this to the add-listener methods:

  
      quitb.addActionListener (this);
      c.addMouseListener (this);    
      

  
  
  
• Since we want only the canvas to react to mouse-clicks, we set only its mouse-listener (to this).

  
      c.addMouseListener (this);    
      

• We used a FlowLayout for the Panel:
  • A FlowLayout does not "stretch" buttons (or other components).
  • Note: the default layout for a Panel is FlowLayout.
  • Here is what we could do with a GridLayout: (source file)

    
        // Create a Panel 
        p = new Panel ();
        // Set the Panel's layout to a GridLayout  
        // with one row and two columns 
        p.setLayout (new GridLayout(1,2));
    
        // Create the start and clear buttons ... 
    
        // Add start and clear buttons to panel. 
        p.add (clearb);
        p.add (startb);
          

    The result:
    
    
  
  
  
• Observe that every button-press (for any button) results in a call to the same method: actionPerformed() in the frame:
  • To know which button was pressed, the parameter is used.
  • The String corresponding to the button name can be extracted from the parameter:

    
        String s = a.getActionCommand();
          

  • Alternatively, the method getSource() in the event can be used, for example:
    • The quit button was declared as:

      
      class NewFrame extends Frame 
        implements ActionListener, MouseListener {
      
        Button quitb, clearb, startb;
      
        // ... 
      
      }
      	

    • Then, inside actionPerformed():

      
        public void actionPerformed (ActionEvent a)
        {
          if (a.getSource() == quitb) {
            // ... etc 
          }
      
          // ...  
      
        }
      	

    • Here, the getSource() method returns the (pointer to the) object for which the event occured.
  
  
  
• To clear the canvas' background, we set the background color and repaint the canvas:

  
        c.setBackground (Color.white);
        c.repaint ();
       

  
  
  
• To draw on the canvas, we must use the graphics context of the canvas:

  
      Graphics g = c.getGraphics();
      g.drawLine (current_x, current_y, x, y);
       

In-Class Exercise 9.8: Use the following template to modify the above drawing canvas so that a user may select a line color from among orange, pink and yellow. Place buttons with those names (as you did in Exercise 9.7) and when a color button is clicked, change the canvas' Foreground color.

---

The methods paint(), repaint() and update()

The class Component defines methods called paint(), repaint() and update().

The way these methods interact can sometimes create strange results.

First, consider what the methods are intended for:

• paint():
  • paint() is where you place code for drawing, writing etc.
  • Initial placement of buttons and other widgets should not be done in paint().
  • Whenever a rendering is thought to be "damaged" (e.g, partially covered by another window), paint() is called to re-draw the scene.
  • Note: AWT maintains information about the size of the "drawn" area, so that if a portion of the window outside this area is covered and un-covered, paint() may not be called.
  • Thus, if buttons are created in paint, new buttons will be created each time paint() is called. This is why you shouldn't create buttons in paint().
  • Note: paint() is given a Graphics context as a parameter.
  
  
  
• update():
  • update is called when the window is re-sized.
  • The default implementation of update():
    • first clears the background;
    • then calls paint().
  
  
  
• repaint():
  • The repaint() is intended to allow various methods to call for a re-rendering of the component.
  • No graphics context is needed for repaint().
  • A call to repaint() calls update().

Here's an example of a weird effect:

• The code below responds to mouse-clicks and draws line segments.
• After each mouse click, repaint() is called. (A mistake).

The code: (source file)

class NewFrame extends Frame 
  implements ActionListener, MouseListener {

  // Constructor. 
  public NewFrame (int width, int height)
  {
    // Set the title and other frame parameters. 
    this.setTitle ("Paint and Update");
    this.setResizable (true);
    this.setBackground (Color.cyan);
    this.setSize (width, height);

    // Create a quit button. 
    Button b = new Button ("Quit");
    b.setBackground (Color.red);
    b.setFont (new Font ("Serif", Font.PLAIN | Font.BOLD, 15));
    b.addActionListener (this);
    // this.setLayout (new BorderLayout()); 
    this.add (b, BorderLayout.SOUTH);

    // Add mouse-listening to the frame itself. 
    this.addMouseListener (this);

    // Show the frame. 
    this.setVisible (true);
  }

  public void actionPerformed (ActionEvent a)
  {
    System.exit (0); // Quit button pressed. 
  }

  int current_x=0, current_y=0;
  int new_x, new_y;

  // These methods are required to implement  
  // the MouseListener interface. 
  public void mouseClicked (MouseEvent m)
  {
    new_x = m.getX();
    new_y = m.getY();

    // Call repaint to reflect new line. 
    repaint();
  }

  public void mouseEntered (MouseEvent m) {}
  public void mouseExited (MouseEvent m) {}
  public void mousePressed (MouseEvent m) {}
  public void mouseReleased (MouseEvent m) {}

  public void paint (Graphics g)
  {
    System.out.println ("Paint: cx=" + current_x + ",cy=" + current_y
			+ ", nx=" + new_x + ",ny=" + new_y);
    g.drawLine (current_x, current_y, new_x, new_y);
    current_x = new_x;
    current_y = new_y;
  }

} // End of class "NewFrame" 
 

Note:

• The call to repaint ends up calling update.
  
  
• But update clears the screen before calling paint().
  
  
• Thus, only the most recent line segment will be visible.

This problem can be fixed by calling paint instead of repaint:

  public void mouseClicked (MouseEvent m)
  {
    new_x = m.getX();
    new_y = m.getY();

    // Instead of calling repaint(), 
    // call paint() directly, with the 
    // correct graphics context. 
    Graphics g = this.getGraphics();
    paint (g); 
  }
 

Note:

• Note that a Graphics instance needs to be passed to paint.
  
  
• The getGraphics() is used to retrieve the instance.
  
  
• Now the problem is eliminated.
  
  
• However, this code still has a problem: every time the frame is re-sized, the background is cleared (overwritten).
  
  
• This is because update is called and update clears the background.

To solve the above problem, we simply override update() and make sure the background is not cleared: (source file)

  // Override update() and make sure the 
  // background is not cleared. 
  public void update (Graphics g)
  {
    paint (g);
  }
  

Note:

• Since repaint() calls update() and we have made update "safe", we can now go back to calling repaint() in mouseClicked().
  
  
• Generally, many programs that perform animations will want to avoid flicker by redefining update as above.

---

Applets - a first look

Applets are Java's mechanism for executing code inside a browser.

An applet is created by extending the class Applet in the package java.applet.

As an example, let us create an applet version of the mouse-click drawing code we created in a frame:

• The first step is to create the HTML file (let's call it TestApplet.html):

  
  <html>
    <body>
  
    An applet to test mouse-clicks:
  
    <applet code="TestApplet.class" width=300 height=200>
  
      <!-- The line below will appear if Java is not supported-->
      Browser does not support Java 1.1.
  
    </applet>
  
    </body>
  </html>
      

  Note:
  • The HTML tag applet is used to invoke an applet.
  • The applet code is specified by the name of the bytecode file, TestApplet.class.
  • The width and height are specified in the HTML command.
  • Any text between the HTML applet-tags will appear in browsers that do not support Java.
  
  
  
• Next, we need to write the applet code and compile it to the file TestApplet.class in the same directory.
  
  
• To create an applet:
  • Extend the class Applet in package java.applet.
  • Note: Applet is a subclass of Panel and thus, is both a Container and a Component:
    • Thus, Applet is similar to a Frame in that you use paint() to draw.
    • Applet's are different from Frame's in that there is no title and you cannot set the size.
  • Instead of using a constructor, put all initialization code in the method init().
  • Implement listener interfaces as you would for a frame.
  • Do not implement a main method in the applet.
  
  
  
• Note: there are other important aspects about applets that we will consider later when we go into applets in detail.

Here is the applet code, in TestApplet.java: (source file)

import java.awt.*;
import java.awt.event.*; 
import java.applet.*;      // Must import the Applet class in here. 

public class TestApplet extends Applet
  implements ActionListener, MouseListener {

  // Data. 
  Button quitb, clearb, startb;
  Canvas c;
  Panel p;
  boolean start = false;

  // Constructor. 
  public void init()
  {
    // Title and size cannot be set in an applet. 
    this.setBackground (Color.cyan);

    // Create a quit button. 
    quitb = new Button ("Quit");
    quitb.setBackground (Color.red);
    quitb.setFont (new Font ("Serif", Font.PLAIN | Font.BOLD, 15));
    quitb.addActionListener (this);

    // Default for an applet is FlowLayout. 
    this.setLayout (new BorderLayout());
    this.add (quitb, BorderLayout.SOUTH);

    // Create a white canvas. 
    c = new Canvas ();
    c.setBackground (Color.white);
    c.setForeground (Color.blue);
    c.addMouseListener (this);

    // Add canvas to frame in the center. 
    this.add (c, BorderLayout.CENTER);

    // Create a Panel 
    p = new Panel ();
    p.setLayout (new FlowLayout());

    // Create a clear button. 
    clearb = new Button ("Clear");
    clearb.addActionListener (this);
    clearb.setBackground (Color.green);

    // Create a start button. 
    startb = new Button ("Start");
    startb.addActionListener (this);
    startb.setBackground (Color.green);

    // Add start and clear buttons to panel. 
    p.add (clearb);
    p.add (startb);

    // Now add the panel to the frame. 
    this.add (p, BorderLayout.NORTH);

    // Show the frame. 
    this.setVisible (true);
  }

  // This method is required to implement the  
  // ActionListener interface. 
  public void actionPerformed (ActionEvent a)
  {
    String s = a.getActionCommand();
    if (s.equalsIgnoreCase ("Quit"))
      System.exit(0);
    else if (s.equalsIgnoreCase ("Clear")) {
      // Note: must call repaint() of canvas 
      // to reset the background. 
      c.setBackground (Color.white);
      c.repaint ();
      current_x = current_y = 0;
    }
    else if (s.equalsIgnoreCase ("Start"))
      start = true;
  }

  int current_x=0, current_y=0;

  // These methods are required to implement  
  // the MouseListener interface. 
  public void mouseClicked (MouseEvent m)
  {
    if (!start) // User must click start once to draw. 
      return;
    int x = m.getX();
    int y = m.getY();
    Graphics g = c.getGraphics();
    g.drawLine (current_x, current_y, x, y);
    current_x = x;
    current_y = y;
  }

  public void mouseEntered (MouseEvent m) {}
  public void mouseExited (MouseEvent m) {}
  public void mousePressed (MouseEvent m) {}
  public void mouseReleased (MouseEvent m) {}

} // End of class "TestApplet" 
  

To execute the applet, there are several options:

• You can use the standalone program appletviewer and give it the HTML file:

  
     % appletviewer TestApplet.html
      

  This produces a window containing the applet. For example, here is what we get after a few mouse-clicks:
  
  
  
  
• Alternatively, you can use a browser that supports Java 1.1. For example, here is what you get with Netscape (4.0 and higher):
  
  
  
  
• Note: SUN's hotjava browser supports Java 1.1, and actually is a browser written in Java.

---