In this lab you will write your first Applet. An Applet is a java program that is intended to be embedded into an HTML document and executed using a web browser. In contrast, a java application, the kind of programs that we have written so far, is a stand-alone program executed using a java interpreter.
Start today's lab by opening up jGRASP and creating a new empty project called Stonehenge.gpj . You should create the project in csci/201/Lab04. If you need to review project creation, study the section Creating a project from Lab 2.
After you have created your project, direct your Browse panel to the directory containing the project.
Show your lab instructor the Browse and Project panels of jGRASP. The Browse panel should be pointed at the directory csci/201/Lab04. It should also have Stonehenge.gpj as its single file. The Project panel should show an empty project called Stonehenge located in the same directory shown in the Browse panel.
There are three files you'll need to get your applet running. First, you'll need Stonehenge.java, the Java source code. You'll compile your source into Stonehenge.class, the Java byte code. Finally, you'll need a file called Stonehenge.html that specifies how your applet will be loaded into your browser. Although jGRASP can run your applet without Stonehenge.html, you need to see how this file is used in real web applications so we're going to make you generate one today.
Within your jGRASP project create a new empty Java source file. Refer to the Creating a Java file of Lab 2 if you need more information about how to do this.
Cut and paste the following Java class definition into the Java window.
import javax.swing.JApplet ;
import java.awt.* ;
public class Stonehenge extends JApplet {
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
}
}
If the cut-and-paste does something really silly, like stick the entire program onto a single line. Download the text version of Stonehenge.java and then cut-and-paste it into the CSD window. We have no idea why this is necessary. It only seems to be a problem with some versions of Internet Explorer.
Once you have your Java class, save it in a new file called Stonehenge.java and then to add it to your project. We'll take a look at the methods of Stonehenge.java a bit later in the lab.
This one is easy. Just compile your code.
Create a new file in jGRASP. This file will not be a Java code file. Use the File ⇒ New File ⇒ Other ⇒ Plain Text (or sometimes just File ⇒ New File ⇒ Plain Text) menu choices to create the new CSD window for your file. Again, try to cut-and-paste the following HTML into your new window and store the windows contents under the name Stonehenge.html and then add it to your project.
<html>
<head>
<title>Applet for CSCI 201 Lab 4</title>
</head>
<body>
<h1>Applet for CSCI 201 Lab 4</h1>
<applet code="Stonehenge.class" width="850" height="450">
If you see this sentence, something ain't working.
</applet>
</body>
</html>
And again, if that doesn't work, create another new window and cut and paste using the text version of Stonehenge.html.
However you managed to obtain Stonehenge.html make sure it is open in an CSD window for the next part of this lab.
You've probably written HTML before, especially if you completed Lab 4 and Lab 5 of CSCI 107. An HTML file describes how text, images, and multimedia are to be displayed by a Web browser. Because Applets are designed to be run by internet browsers, each applet must be linked into the web by creating an HTML document that references the compiled applet, that is, the .class file. For example, notice how the Stonehenge.class is referenced from your HTML file; the reference states the location of the applet code along with the width and the height of the area in which the applet is allowed to run.
You can also use the <applet> tag to provide parameters to the applet or even the location of jar files containing an applet and its supporting cast of classes. For example, in Lab 3 the binary number applet was controlled with the following HTML fragment.
<applet
code="edu.unca.cs.csci255.TwosComp"
archive="TwosComp.jar"
width="700"
height="100"
>
<param name="BitWidth" value="8" />
</applet>
Unfortunately, jGRASP does not use Stonehenge.html to
control the Stonehenge
applet. Instead it has its own
generic HTML file it uses for all applets so we need to change that
file. First, make sure that Stonehenge.java is displayed
in the CSD window. Go
through the Edit ⇒
CSD Window Settings ⇒
File menu choices of
your Stonehenge.java CSD window to bring up the
Settings for file dialog box. Press on the
Languages tab near the top of the dialog box and then press
on the HTML tab in the center of the dialog box. The
width and height attributes of this default HTML
are both 400. These are too small for our applet.
Press the little box just to the right of HTML: that contains a small black dot. The text of the HTML disappears! Don't panic. Go back to your Stonehenge.html page and cut-and-paste its text into the HTML void. Use control-V to paste. Press the Apply and the new HTML is associated with your Java code. A before and after snapshot of replacing jGRASP's default HTML is shown below.
Before | After |
---|---|
Show your lab instructor that Stonehenge.java, Stonehenge.class, and Stonehenge.html are all created and stored in the correct locations and that you have the appropriate HTML associated with your project. You may then close the Settings for file dialog.
Go back to the Stonehenge.java CSD window. Notice the Run applet for current file button, . Go ahead and press it.
The Java Applet Viewer should raise a window. If the window is completely blank, move your mouse around inside the window. This odd behavior seems to be part of the latest version of the Java development kit.
If all is working well,
you should be rewarded with a view of Stonehenge in the
early stages of construction.
Your job is to modify your program so that it gives a more accurate
(though boring)
rendition of Project Stonehenge, as shown below.
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 modifying 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. It
is an updated version of the applet
that uses
the new Java Swing interface.
Since web browsers are written to load any applet
, you
should be able to use 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 methods we use.
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 ) ;
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.
Show your instructor your running applet.
Go ahead and terminate jGRASP.
It is possible to run the applet without running jGRASP. We're going to show you three ways to do this.
The Java development kit comes with an appletviewer, a small program that will display the applet when it is run with an HTML file as its argument. You have to be at the command line processor of either Windows or Linux to run the appletviewer so go back to your command line processor and type the following commands:
cd csci/201/Lab04 ls -l appletviewer Stonehenge.html
If this doesn't work, get the attention of your lab instructor.
Show your instructor your running applet using appletviewer.
Go back to your browser. Open your Stonehenge.html file by using the Open File... menu choices with Mozilla. Then you should navigate to your Stonehenge.html file and open it.
Show your instructor your applet running within your browser.
If you have completed the first HTML lab of CSCI 107, you
have "opened" your bulldog home page for access across
the Internet.
If you use FTP to transfer your Stonehenge.html and
Stonehenge.class into your bulldog
public_html, you will be able to run your
Stonehenge
applet from anywhere on the web.
If you have time, try this out. Otherwise, just head on home.