Source

import java.applet.*;
import java.awt.*;

public class AnAppletWithCanvas extends Applet {
	public void init() {
		Button larger = new Button("Larger");
		add(larger);

		Button smaller = new Button("Smaller");
		add(smaller);

		add(new CircleCanvas(larger, smaller));
	}
}

import java.awt.*;
import java.awt.event.*;


public class CircleCanvas extends Canvas implements ActionListener {
	CircleCanvas(Button larger, Button smaller) {

		this.larger = larger;
		larger.addActionListener(this);

		this.smaller = smaller;
		smaller.addActionListener(this);

		setSize(100, 100);

		setBackground(Color.yellow);
	}

	public void paint(Graphics g) {
		g.setColor(Color.blue);
		g.drawOval(upperLeftX, upperLeftY, diameter, diameter);
	}

	public void actionPerformed(ActionEvent e) {
		if (e.getSource() == larger)
			diameter++;
		else 
			diameter--;
		repaint();
	}

	Button larger, smaller;

	int 
		upperLeftX = 10, 
		upperLeftY = 20, 
		diameter = 10;
}

Description and Objective

• Illustrates how Canvas may be used to prevent overlapping of conponents and graphics
• Demonstrates how to subclass the Canvas class

Notes

• An applet's surface can typically contain
  • Interface components, such as Button
    • These are placed on the applet's surface by the layout manager
  • Graphics, such as lines, rectangles, circles, drawn text
    • These are are drawn by the paint method
  • The above two placements are performed independently of each other
    • This leads to graphics and components overlapping and blocking each other on the surface

• The Canvas class provides a dedicated area for graphics to be drawn
  • In fact, that is all a Canvas does: provide a drawing surface
• The Canvas can be laid out like any other component
  • Once created, it's simpled added to the applet (or panel)
• Since it is its own component (with its own surface), no other components with overlap to block the drawn graphics on the canvas surface

• While the Canvas class provides the drawing support, the precise nature of what is to be drawn differs from applet to applet.
• To achieve this customization, the Canvas class must be subclassed
  • This is analogous to subclassing the Applet class to get customized applet behavior
• The primary responsibilies of the Canvas subclass are to:
  • Have a constructor to perform initialization
    • Canvas subclasses typically receive information from the applet in the form of parameters to its consturctor
  • Have a paint method
    • It is here that the applet-specific drawing is performed

This Applet's Behavior

• The init Method
  • Creates two buttons and places them on the applet
  • Creates a new LineCanvas and places it on the applet
    • Note: The applet does not register as a listener for either of the buttons.
      • Since the canvas will be using the buttons to control what it draws, it will be the canvas that will be the listener
      • On the other hand, it is the applet that should lay out these components (since they are being laid out on the applet's surface), and thus the applet creates the buttons and passes them to the LineCanvas constructor.
      • This arrangement-- applet creating components, passing them to a canvas, which listens to the components-- is common in applets containing a canvas.
    • Note: The applet declares the Button objects as local variables in the init method
      • Since the applet will not be listening to the buttons, it has no need to hold on to their references beyond sending them to the canvas.
      • There is thus no need to declare instance variables for the Buttons.
      • Similarly, the applet doesn;t even bother with a local variable for the LineCanvas object
        • It simply creates it and places it all in the same statement
        • Since there is no further need to refer to the LineCanvas, ther is no need to store a reference to it in a variable

• Class Header
  • The LineCanvas is responsible for drawing the graphics
  • Since the buttons control how the graphics are to be drawn, the LineCanvas declares itself to be an ActionListener for the buttons
• The Constructor
  • The constructor saves the button references sent as parameters to instance variables
    • Recall that an applet executes within a Web page
      • A consequence of this is that the use of a constructor to initialize the applet is inappropriate (why this is so is a bit beyond us)
    • However, the applet creates the LineCanvas object and thus it is perfectly acceptable to have a constructor to initialize the LineCanvas
    • Since the LineCanvas requires the buttons (so it can listen to them), they are passed as parameters to the constructor
  • The constructor also registers with each button as a listener
  • The size of the canvas is set
    • Whereas an applet gets it size from the embedding Web page, the constructor is created by the applet
    • The default size of a newly created Canvas (and thus LineCanvas) is 0 by 0 pixels.
    • Thus, if you forget to set the size, the canvas will be essentially invisible
  • The background color is set
    • This is purely for illustratove purposes so the LineCanvas' real estate can be seen in contrast to the rest of the applet
    • Typically, the background of the canvas is deliberately set to be the same as that of the canvas so that it blends in with the applet.
• The paint Method
  • The paint methid sets the 'pen' color to blue and paints a circle whose size is taken from the diameter instance variable.
    • The value of diameter is changed as a result of the user clicking the buttons (see below)
• The actionPerformed Method
  • The value of diameter is incremented/decremeneted depending upon which button generated the vent

Things to Do

• The Canvas class
  • What package is it in?

1. Modify the AnAppletWithCanvas, adding buttons to move the circle up and down
2. Add a second canvas that does the same thing as the first canvas, but displays a rectangle rather than a circle (as your starting point you can use either the original applet or the one in #1-- with the up/down buttons)
3. (Optional) It was mentioned that the canvas subclass usually listens to the buttons that control its graphic behavior. Change the structure of the applet and canvas subclasses so that the applet listens to the buttons and informs the canvas (via method calls) of the changes to be made.
4. (Optional-- don't bother unless you've done the first optional) Add a second canvas and have both canvases react to the larger/smaller buttons