CSC1012 Introduction to Computer Science

Applets

A java applet is similar to a java application, but runs within a browser window. Keyboard and mouse input and text and graphics output are all routed through the browser. The applet provides a drawing window within the browser window.

We tell the browser to incorporate a java applet by first compiling the java source code of the applet to make the bytecode of a class, and placing the class on out website. The a web page can incorporate that applet using the HTML tag <applet> anywhere in the web page:

<applet width="350" height="150" code="name.class">
</applet>

The approach to drawing is similar to that used in an application. A coordinate system is imposed on the window the applet opens within the browser window.   The origin (point (0,0)) is located at the top left hand corner.  The x-axis goes to the right and the y-axis goes down.  The units of measure on this grid is the pixel.  There are approximately 72 pixels per inch. You can imagine a few hundred pixels (or units) along the x-axis and a few hundred pixels (or units) down the y-axis.  Armed with this important piece of information, we'll be able to draw messages (Strings), boxes, ovals, and lines.  We can make them appear anywhere in the applet and we can even fill them in.   Furthermore, we can change the color of the graphic figures we draw. All of this is accomplished by creating a Graphics graphics object and telling it what we want to do. 

The program source of the java applet must be a class that extends the java class Applet. It put images on the screen by providing a method called paint whose argument is a Grpahics object.

Let's look at a couple of examples.

Exercise 1.  Write an applet that displays the message Hello World!!!!!!

//File:    HelloApplet.java

//The following packages are necessary for any applet
import java.applet.*;
import java.awt.*;

public class HelloApplet extends Applet
{
    //The paint() method is called by the browser whenever the applet must be redrawn
    public void paint (Graphics g)
    {
        Dimension d = new Dimension();
        d=getSize();    //the size of the applet that is....
       
        int w = d.width;
        int h = d.height;
       
        String message = new String();
        message = "Hello World!!!!!!";
       
        g.drawString (message, w/2, h/2);
        //NOTE: Using the coordinates w/2 and h/2 allows
        //    us to center the message.
    }
}

The output applet looks like:

Note that the size of the applet window does not affect the centering of the letter "H" in "Hello World", accomplished by using the coordinates (w/2, h/w).

The size of the applet was determined by the html file

<!-- File:    HelloWorld.html    -->
<html>
<head>
<title>Hello World Applet</title>
</head>
<body>
<p>This is a test of my first applet. I hope it works.
<applet code=HelloApplet.class width=350 height=150></applet>
</body>
</html>

The prescription "WIDTH=350 HEIGHT=150" determines that the applet will be 300 pixels wide by 150 pixels high.  Note also that if the applet is maximized, the message "Hello World!!!!!!" is centered.

Exercise 2.  Write an applet that incorporates several graphic figures.

//File:    Play.java
import java.applet.*;
import java.awt.*;
public class Play extends Applet
{
    //The paint() method is called by the browser whenever the applet must be redrawn
    public void paint (Graphics g)
    {
        //In the following comments, I'll use the convention that
        //x1, y1, x2, y2 are the x and y coordinates of
        //points 1 and 2 respectively
        g.setColor (Color.blue);
        g.drawLine (30, 60, 60, 30);
            //(x1, y1, x2, y2)
       
       
        //In the following, all of the figures are based on a
        //rectangle defined by the x and y coordinates of the
        //top left corner and the width and height of the rectangle
        g.drawRect (90, 30, 40, 30);
            //(x, y, width, height)
        g.fillRect (150, 30, 50, 30);
            //(x, y, width, height)
        g.drawOval (220, 30, 70, 30);
            //(x, y, width, height)
       
       
        //NOTE: You can create your own colors as follows:
        Color matt = new Color (200, 100, 250);
        g.setColor (matt);
       
        //g.setColor (Color.red);
        g.fillOval (30, 80, 70, 30);
            //(x, y, width, height)
        g.fillArc (110, 80, 40, 30, 45, 315);
            //(x, y, width, height, starting angle, sweep angle)       
        g.drawRoundRect(170, 80, 60, 30, 30, 10);
            //(x, y, width, height, xpixels, ypixels)
            //where xpixels and ypixels are the number
            //of pixels in from the corners where rounding
            //begins to occur
        g.fillRoundRect (250, 80, 50, 30, 20, 20);
            //(x, y, width, height, xpixels, ypixels)
       
    }
}

Incidentally, if you'd like a painless way to choose those mystifying 3 numbers (0 to 255) required to define a new color.  It goes like this:

  1. Click on the Start button.

  2. Move the mouse to Programs -> Accessories -> paint and click on paint

    wpe20.jpg (17434 bytes)

  1. Go to Options -> Edit Colors and click

wpe22.jpg (15537 bytes)

  1. Press the Define Custom Colors>> bar

wpe23.jpg (25336 bytes)

  1. Now just find your color in the rainbow display and click

wpe24.jpg (25402 bytes)

  1. You'll notice there is now star in the display where you clicked.   Also, the bar on the right hand side of the display has a continuous variation in the spectrum around your choice of colors.  You can now move the pointer on the lower right hand corner of the display until you find the precise shade you desire.  You'll notice that there are now 3 values in the Red, Green, and Blue boxes respectively.   Just copy those into your java program and you've got it!

wpe25.jpg (25836 bytes)

Color myColor = new Color (129, 223, 123);     //will give my choice of color

It's nice to be able to connect the Windows environment to our fun with Java activities!


Lab Exercise. Redo problem 3 on page 53 as an applet

Write an applet that draws the International Olympic Committee logo:

If you have trouble with this, feel free to examine a simple-minded solution, Olympic.java


Back to CSC 1012 Syllabus


Adapted 26 October 2003 from the 2001 web page by Bill Steinmetz.