Exercise 1: Drawing Lines

Here's the source code for a first applet:

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

public class DrawingLines extends Applet {

   int width, height;

   public void init() {
      width = getSize().width;
      height = getSize().height;
      setBackground( Color.black );
   }

   public void paint( Graphics g ) {
      g.setColor( Color.green );
      for ( int i = 0; i < 10; ++i ) {
         g.drawLine( width, height, i * width / 10, 0 );
      }
   }
}

Start up a plain text editor and type in the source code. It's important that you use a plain ASCII text editor (such as "Notepad" on Windows, "SimpleText" on Mac, or "vi" or "emacs" on UNIX) to enter the source code; don't use a word processing application (such as "WordPerfect" or "Word") since they use a proprietary format for files. If you don't want to do any typing, you can download the source file. Save the file as DrawingLines.java. It's important that the filename match the class name in the source code.

Now, you have to compile the source code to generate a bytecode file called DrawingLines.class. If you're using Sun's Java Software Development Kit, you can compile by typing javac DrawingLines.java at a command prompt (on Windows, this is done within an MS-DOS shell). Check that the .class file was indeed generated.

Then, create a .html file containing the following line:

(If the .html file is not in the same directory as the .class file, you'll have to add a codebase="..." attribute specifying the path to the class file. More information on the <applet> tag can be found here.) When you view the .html file in a web browser, you should see something like this:

Here's a second version of the same source code, this time with comments:

import java.applet.*;
import java.awt.*;
 
// The applet's class name must be identical to the filename.
public class DrawingLines extends Applet {
 
   // Declare two variables of type "int" (integer).
   int width, height;
 
   // This gets executed when the applet starts.
   public void init() {

      // Store the height and width of the applet for future reference.
      width = getSize().width;
      height = getSize().height;

      // Make the default background color black.
      setBackground( Color.black );
   }
 
   // This gets executed whenever the applet is asked to redraw itself.
   public void paint( Graphics g ) {

      // Set the current drawing color to green.
      g.setColor( Color.green );

      // Draw ten lines using a loop.
      // We declare a temporary variable, i, of type "int".
      // Note that "++i" is simply shorthand for "i=i+1"
      for ( int i = 0; i < 10; ++i ) {

         // The "drawLine" routine requires 4 numbers:
         // the x and y coordinates of the starting point,
         // and the x and y coordinates of the ending point,
         // in that order.  Note that the cartesian plane,
         // in this case, is upside down (as it often is
         // in 2D graphics programming): the origin is at the
         // upper left corner, the x-axis increases to the right,
         // and the y-axis increases downward.
         g.drawLine( width, height, i * width / 10, 0 );
      }
   }
}