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" or Notepad++ on Microsoft Windows, "TextEdit" on Mac OS X, or "vi" or vim or "emacs" on linux/UNIX, or the source code editor in your favorite IDE such as Netbeans or Eclipse. Don't enter the source code with a word processing application such as "Microsoft Word", since word processors use a different 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 the Java Software Development Kit, you can compile by typing
javac DrawingLines.java
at a command prompt (on Microsoft 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, or with the appletviewer command-line utility included with the JDK, you should see something like this:

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

(Download the below file: DrawingLines.java)

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 );
      }
   }
}

Did you encounter problems with this first exercise? Was there information missing? Do you have suggestions for how to make it easier for other first-time Java programmers? Feel free to email me with suggestions for improvements. I cannot promise to reply to your email, but I will eventually read it and try to improve this website.
October 2012