2.2.2 The Letter Applet

Step by step we shall build our example applet of a letter a that randomly changes font size and position on the screen when the randomize button is pressed. The applet will finally look as follows:

  1. Drawing a Letter on the Screen
    1. The LetterApplet Class
    2. The Font Class
  2. More Interaction
    1. The randomize Method
    2. The draw Method
    3. The New Letter Class
    4. The New LetterApplet Class

Drawing a Letter on the Screen

We begin with writing an applet that draws the letter a on the screen. It uses the same Letter class as in the previous section. The code can be found in LetterApplet.java.

The LetterApplet Class

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

public class LetterApplet extends Applet {

  Letter c;

  public void init() {
    c = new Letter("a", 36, 0, 0); // create a default letter
    c.translate(50,50); // re-position the letter
  }

  public void paint(Graphics g) {
    g.setFont(new Font("Helvetica", Font.BOLD, c.size));
    g.drawString(c.name, c.x, c.y);
  }
}
One declaration of an instance variable and two definitions of methods: The Graphics class, which is part of the AWT package, provides methods for drawing simple geometric shapes, text, and images to the graphics destination. In our case, the applet included in the Web page comes with a Graphics object that represents the pixels on the screen. The paint is defined for any Graphics object, but it applies here when the applet calls it for a screen refresh.

The Font Class

You can give the Graphics object additional properties about the font to be used when drawing text. The Font class in the AWT package supports the choice of the font family (Helvetica, Courier, ...), style (bold, italic), and font size. For example, if you want to draw the letter in boldface Helvetica font at size 36, then you create a Font object with these properties and you make this the font choice of the Graphics object: 

void paint (Graphics g) {
  g.setFont(new Font("Helvetica", Font.BOLD, 36));
  g.drawString(c.name, c.x, c.y);
}
In order to load the Font class, you must insert the statement import java.awt.Font; at the beginning of the LetterApplet.java file.

More Interaction

The above applet becomes more interesting when we add a button that randomly chooses the position and size of the letter. Below you find the Java code and the explanation of the new language elements in the boldface statements.

The randomize Method

We add a randomize method to the code of the Letter class. It looks like 
  void randomize() {
    x = (int) (20  + Math.random()*80);
    y = (int) (40  + Math.random()*80);
    size = (int) (8 + Math.random()*36);
  }
We use the mathematical method random from the java.lang.Math class. random generates a random floating-point number uniformly distributed over the segment [0,1]. Because the package java.lang is automatically imported it suffices to use the "short" name Math.random.

Because the random method yields an objects of type double, i.e., a double precision floating-point number, but the instance variables x, y, and size are of type int, i.e., default-size integers, we have to explicitly perform type casting by a command of the following format

newobject = (Type) object;

where newobject is an object belonging to the class Type. Casting a floating-point number to an integer is simply ignoring what comes behind the decimal point.

The draw Method

At this point we have put the code for the drawing of the letter in the LetterApplet class, while the code for the randomization is in the Letter class. This is contrary to the object-oriented philosophy. We should collect all code that really has to do with the letter in the Letter class, and we will make a draw method for this purpose. In the LetterApplet paint method, we will only refer to this draw method of the Letter class. 

void draw(Graphics g) {
  g.setFont(new Font(fontname, Font.BOLD, size));
  g.drawString(name, x, y);
}
The drawString method draws the letter with given name at position (x, y). If you had wished to underline the character, assuming that the letter width is 10 pixels and that the line should be two pixels lower than the character itself, then you would have added the statement g.drawLine(x,y+2, x+10, y+2);. Putting a box around the character could be accomplished with the drawRect method. Other shapes are available in the Graphics class.

The New Letter Class

The new code for the Letter class includes the methods randomize and draw. It looks as follows. 
import java.awt.*;

class Letter {
  String name;
  String fontname;
  int size;
  int x,y;

 Letter(String c, int s, int a, int b) { 
    // constructor to initialize letter and position
    name = c;
    fontname = "Helvetica";
    size = s;
    x = a;
    y = b;
  }

  void draw(Graphics g) {
    g.setFont(new Font(fontname, Font.BOLD, size));
    g.drawString(name, x, y);
  }

  void randomize() {
    x = (int) (20  + Math.random()*80);
    y = (int) (40  + Math.random()*80);
    size = (int) (8 + Math.random()*36);
  }
 
  void translate(int a, int b) {
    x = x+a;
    y = y+b;
  }

}

The New LetterApplet Applet

In the new code of the LetterApplet Class the paint method only passes its argument g on to the draw method of the letter. Moreover, we add a button with the title "randomize" and an action method to handle the click on the button. 
import java.applet.Applet;
import java.awt.*;

public class LetterApplet extends Applet {

 Letter c;

 public void init() {
   add(new Button("randomize"));
   c = new Letter(); // create default letter a
 }

 public boolean action(Event evt, Object arg) {
   c.randomize(); // choose random properties of letter
   repaint(); 
   return true;
 }

 public void paint(Graphics g) {
   c.draw(g);
 }
}

Let us have a closer look at the new parts in the above Java code that are highlighted: