Java Lab: Applets

Parts of an Applet

The most important part of an applet, in fact the very thing that designates it as an applet, is which class it extends. There are two classes that you can extend for this purpose, the one we will use is the newer one: javax.swing.JApplet

The second important part of an applet is the paint() method. The paint() method is called to draw your applet on the screen. The paint() method receives a Graphics object as input. It uses the methods in the Graphics object to "paint" things on the screen.

HTML files

Because applets are designed to run inside of a web browser, your applet must be referenced from a HTML file in order to run. Use the <APPLET> tag inside of a HTML file to tell your web browser to download and run an applet. Netbeans automatically creates the HTML file required to run your applet in the Netbeans' applet viewer. None-the-less, we will still discuss the parts of this HTML file later in this lab.

Stonehenge Applet

To Get Started ...

Create a new project called Stonehenge. Create the directory structure csci/201/Stonehedge and then mount the Stonehedge directory (Help). Now create a new JApplet file called Stonehenge (Help)

Your Assignment ...

You should now have the Stonehenge file displayed on your screen. Copy the code for the paint() method given below and paste it into the Stonehenge class.

  public void paint( Graphics g )
  {
    g.setColor( Color.blue ) ;
    g.fillRect( 100, 150, 100, 300 ) ;
    g.fillRect( 300, 150, 100, 300 ) ;
    g.fillRect( 450, 150, 100, 300 ) ;
    g.fillRect( 650, 150, 100, 300 ) ;

    // New stuff goes here

    // End of new stuff
  }

Paste the following code at the beginning of the file:

import javax.swing.JApplet ;
import java.awt.* ;

Now compile and run the file. You may have to resize the new window. And there you have an applet. If you look in the explorer window, a new HTML file should have been created called Stonehenge.html. Double click on this file to open it. You should see the following line in it:
<APPLET code="Stonehenge.class" width=350 height=200></APPLET>

This is the line that tells your browser to download and display the Stonehenge applet. But there is a problem, the width and height are much to small to see your full applet, change them to the following values: width=800 height=500. Now, save the HTML file. Finally, right click on it in the explorer window and select View. This should load your web browser and display your page.

Instructor Checkoff ...

Show your lab instructor the browser with your applet in it. If all goes well, you should see an incomplete Stonehenge:
First Run

Completing Stonehenge

Your job is to modify your program so that it gives a more accurate (though boring) rendition of Project Stonehenge, as shown below.
Later Run

You improve Stonehenge by adding two rectangles to the applet. To help you out, let's talk a little about your present Java file. The file starts by importing classes from two packages, the class JApplet from the package javax.swing, and all classes from the package java.awt. We need the classes in the package java.awt to draw objects. We need the JApplet class because all swing applets are created by extending this class. Notice the line of code:



  public class Stonehenge extends JApplet {

This is where we tell the compiler that our applet is called Stonehenge and that it will be a subclass of the JApplet class. Incidently, the JApplet class is itself a subclass of the Applet class. JApplet is an updated version of the Applet class that uses the new Java Swing interface. Since web browsers are written to load any applet, you should be able to run Stonehenge in any up-to-snuff browser.

Our applet contains only one method. This method is not main(). Applets do not need a main() method because their execution is controlled by the Web browser. When we write an applet, we need to define a paint() method which is responsible for creating the applet display. This method always receives a single parameter, a Graphics object. We can give the parameter any name we choose, but it this case we have named it simply g. We use methods belonging to this Graphics object to render text and shapes in our applet display. Let's take a look at the Graphics object's methods that we use in the body of paint().



  public void paint(Graphics g) {
    g.setColor( Color.blue ) ;
    g.fillRect( 100, 150, 100, 300 ) ;
    g.fillRect( 300, 150, 100, 300 ) ;
    g.fillRect( 450, 150, 100, 300 ) ;
    g.fillRect( 650, 150, 100, 300 ) ;

First we set the color to blue with g's setColor() method, giving it the object Color.blue as input. Then we draw rectangles and fill them with our chosen color using the method fillRect(). This method has four parameters corresponding to the four pieces of input it needs to do its job. Let's take a look, in order, at the four parameters used in our first call to fillRect().



    g.fillRect( 100, 150, 100, 300 ) ;

The x coordinate of the upper-left corner of the rectangle which is 100 pixels from the left edge of the drawing area.
The y coordinate of the upper-left corner of the rectangle which is 150 pixels down from the top of the drawing area.
The rectangle's width which is 100 pixels.
The rectangle's height which is 300 pixels.

Your Assignment ...

You now know enough to add the two additional rectangles needed to complete this assignment. You may have to dust off your high school geometry skills to figure out how to size and place them. But give it a try.

Since it would be rather boring just to paint it all in blue, you might want to look at the Java documentation for the Color class to see how you could make a rainbow of stones. If you are really adventurous, you could think about using the drawSting method of Graphics to add your name to the drawing.

Instructor Checkoff ...

Show your instructor your final applet.