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 our website. Then a web page can incorporate that applet using the HTML tag <applet> (for older browsers) or the XHTML tag <object> (for newer browsers) anywhere in the web page. For some browsers, an <embed> tag is used. It can be tricky making a web page that supports all browsers. See http://download.oracle.com/javase/1,5.0/docs/guide/plugin/developer_guide/using_tags.html
For purposes of this web page, we will use the <applet> tag, be be warned that such use is deprecated, and will not work on some modern browsers.
<applet width="350" height="150" code="name.class"> </applet>
When you write a java applet you have a choice of the Abstract Window Toolkit (AWT) by having your applet extend java.applet.Applet or Swing by having your applet extend java.swing.JApplet.
The approach to drawing in AWT 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:
Click on the Start button.
Move the mouse to Programs -> Accessories -> paint and click on paint
Go to Options -> Edit Colors and click
Press the Define Custom Colors>> bar
Now just find your color in the rainbow display and click
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!
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!
