CSCI 201 Lab 4 -- Applets

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.

Creating the project

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.

Project creation checkoff

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.

Creating the needed files

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.

The Java source file

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.

The Java class file

This one is easy. Just compile your code.

The html file

Create a new file in jGRASP. This file will not be a Java code file. Use the FileNew FileOtherPlain Text (or sometimes just FileNew FilePlain 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>

Setting the "default" HTML

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 EditCSD Window SettingsFile 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.

BeforeAfter
before after

File creation checkoff

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.

Running your applet

Go back to the Stonehenge.java CSD window. Notice the Run applet for current file button, Run applet for current file. 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.
First Run

Lab Assignment

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 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 ) ;

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

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.

Applet execution checkoff

Show your instructor your running applet.

Applets without jGRASP

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 appletviewer

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.

Appletviewer execution checkoff

Show your instructor your running applet using appletviewer.

The browser -- from a local file

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.

Browser execution checkoff

Show your instructor your applet running within your browser.

The browser -- from a web location

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.