CS 1054: Lab 13

Lab meeting 13: Applets

This exercise is to introduce you to Java applets. Applets are Java programs that run within a web browser and allow us to add “dynamic” content to our websites. We will start with a simple applet and practice using some of the graphical classes.

Tasks

Open the BlueJ environment. Create a new project and name it AppletsLab. Create a new class, select its type as Applet and name it FirstApplet. Double-click to open the file and delete all the default code from the class.

Type in the following code into the file

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

public class FirstApplet extends Applet {
	public void paint(Graphics g) {
		Color c;
		c = new Color(180,10,120);
		g.setColor(c);
		g.fillOval(20,20,60,30);
	}
}

Compile this applet. When you right click on it, select the "Run Applet" option. Select the "Run Applet in web browser" option. This should show you a purple colored oval on a gray background in Internet Explorer. The applet is running in the webpage and displaying what you asked it to display. You can see that BlueJ named the html page FirstApplet.html.
Now that you’ve got an applet running, let’s make it do something more interesting (relative to what it is doing now). For now we will work on making the applet draw other objects. Notice that the messages our program passes are to an instance of the class Graphics. By sending other messages, we can draw other images. Our choices include the methods:
- fillOval() – draw an oval filled with a color
- fillRect() – draw a rectangle filled with a color
- drawOval() – draw the outline of an oval
- drawRect() – draw the outline of a rectangle
- drawLine() – draw a line
In our applet, we could include the following statement that paints the outline of an oval
```
g.drawOval(x, y, ovalWidth –1, ovalHeight – 1);
```
or, this statement that paints a filled oval of the same size
```
g.fillOval(x, y, ovalWidth, ovalHeight);
```
(The reason for subtracting one for the drawOval method is that the painting system draws lines just below the specified dimensions, instead of within the specified dimensions. The same rule of specifying one less than the desired width applies to other drawXxx methods. For the fillXxx methods, on the other hand, you specify exactly the desired width and height in pixels.) The drawLine method also takes four arguments with the arguments being four integers specifying x, y coordinates of the start and end of the line:
```
g.drawLine(xstart, ystart, xend, yend);
```
The program above draws a filled oval with an x position of 20, a y position of 20, a width of 60 and a height of 30. [code snippet: g.fillOval(20,20,60,30); ] Also in the program, we specify a color by defining a new Color c and defining it to be the color formed by mixing 20 units of red, 120 units of green and 160 units of blue (on a scale of 0 to 255). This produced a dark pink color. By varying the amounts of red, blue, and green you can define your own color. However, if you just want to use standard colors, there is a simpler way of doing this:
```
g.setColor(Color.yellow);
```
The argument to setColor using preset colors can be any of the following:
```
Color.black   Color.blue       Color.cyan     Color.darkGray  Color.gray 
Color.green   Color.lightGray  Color.magenta  Color.orange    Color.pink 
Color.red     Color.white      Color.yellow  
```
Modify the applet in the file FirstApplet.java to draw a stoplight using the Graphics methods named above along with the setColor() method. You will need to draw a large rectangle and 3 circles (using fillOval) with the colors red, yellow and green. You will have to think about the coordinates where the circles need to be drawn.
Show your working stoplight to the GTA.