CMSC 10200 - Winter 2006

Integrating Java into the Web Through Applets

An applet is a little Java program that runs inside a browser. You tell the browser by using the <APPLET> tag in your HTML page. In this lab you will write Java code to be used in an applet and create a Web page to deploy the applet. Here is an example of the applet in action:

PizzaXtreme
If you clicked on the link from a Linux machine you recieved a very boring Web page with the message: "Your browser cannot execute this page.". Open the browser using Mozilla Firefox. Running this applet requires Java 2, Standard Edition 5.0 (also called Java 1.5), which Firefox recognizes. Since a browser runs the applet on your home machine, this issue matters!! More on Java 1.5 later.

The lab is due Sunday, 11:59pm

Check-out the JavaBoutique, they have lots of free applets, including many with the source code included.

0. Getting Started

Create a directory lab2 wherever you want your work to be. This is your workspace. You will submit an Eclipse Project called Pizza created in your workspace. I assume you are now acquainted with KDE window environment, Unix commandline and Eclipse. You can go back to lab1 to refresh your memory with the tutorials there.

1. An Applet Tutorial

This Tutorial will explain how to run an applet in Eclipse and pass parameters to the applet in Eclipse. It will then explain how to write a Web page which deploys this applet. The rest of the Lab depends on your understanding the material in this tutorial. You will not submit the tutorial.

Step A: Creating the Welcome Project

Download the applet source code Welcome and save it to your workspace.
Open eclipse in your workspace and create a new Project called Welcome, and import the file Welcome.java from your workspace.

Step B: Running an applet in Eclipse

Follow the tutorial Running an applet. This will show you how to run an applet in Eclipse and pass parameters to the applet to change its functionality.

Step C: Deploying an applet in a Web page

You will create a simple Web page for your applet. You can use the Eclipse text editor to write your HTML document and call a browser to run it, but I recommend that you use a text editor. (I found that Eclipse often crashed when trying to open a browser on my home Mac.)

Open a text editor. I recommend KWrite on the Linux. KWrite color codes HTML: Tools-> Highlight Mode -> Markup -> HTML

Enter the following text (remember HTML is not case-sensitive, so you can put the tags in lower-case):

	<HTML>
	<BODY>

	<H1>The Java Welcome Page</H1>

	<APPLET CODE=Welcome.class WIDTH=400 HEIGHT=400> 
	    <PARAM NAME=MESSAGE VALUE="Welcome!!">
	</APPLET>

	</BODY>
	</HTML>

Here is an Applet tag reference to explain the HTML code.

Save the file using the suffix ".html" in your Welcome Project directory. I will call this file Welcome.html.
Open the file Welcome.html in the Firefox browser. If the browser does not display your applet, make sure Welcome.html is in the same directory as Welcome.class (the Java byte code for the applet.)
Change the parameter MESSAGE in Welcome.html and see how this changes the behavior of the applet. You can also change the HEIGHT and WIDTH fields as well.

2. The Pizza Project

You will create an eclipse Project Pizza in your workspace and write the code for a Pizza class. You will also write an HTML page which will deploy your applet.

A. Start Your Pizza Project

If you are working on the Linux machines or the Macs in the MacLab, you will have no difficulties satisfying the steps below. If you would like to work on your home machine, you will need to make sure you have Java 2, Standard Edition 5.0 (i.e. Java 1.5) on your machine. See Java 1.5 for more details.

Download the archived jar file, Pizza.jar into your workspace. This is a directory of four Java class files which have been archived into a single file (so you don't have to download and import four separate files into Eclipse.)
Create a new project in Eclipse, Pizza
Create a file called README (it is a simple text file) and place your name in this file. You may also write any comments you want me to read in this file.
Import Pizza.jar into your Project.
This file contains enum classes, which is only recognized by Java 2, Standard Edition 5.0 (i.e. Java 1.5). If you see a lot of red x's, you will have to direct Eclipse to use the new Java edition. See here for how.

B. Writing your Pizza class

You will find four class files in your Project

PizzaForm: A Java applet class. You do not need to see this code.
PizzaTopping, PizzaCrust, PizzaSize: These are enum classes, and you should study carefully the enum types in each class since you will have to use them in your code.

You will write a class called Pizza. A Pizza has

size of type PizzaSize: SMALL, MEDIUM or LARGE.
crust of type PizzaCrust: THICK or THIN.
toppings of type PizzaTopping:
- meat topppings: PEPPERONI, SAUSAGE HAMBURGER
- veggie toppings: ONION, OLIVE, GRPEPPER, XCHEESE
A Pizza object may have any combination of the toppings (including no toppings.)


It is up to you how to represent a PIZZA class through its
data fields. The data must be kept private.


You must provide
the following public methods for the Pizza class:

    public Pizza(PizzaSize, PizzaCrust):
      The constructor for your class.
   
 public void addTopping(PizzaTopping):
      This will add a topping to your pizza.
   
 public String toString():  Converts a 
      Pizza
      object into a string to be displayed in the applet, when
      the user makes a choice.  The format of the string should be
      (italized parts depend on the Pizza object):
      
            size crust crust with topping1 topping2 ...
      
      
      
   
public int price(): Compute the price of
     your pizza in pennies (hence, the int
     return value.)  The price is based on size, crust and meat
     topping choices and veggie topping choices:
     
 
 Price is in Dollars
  
   Item
   Small
   Medium
   Large
  

  
    Thin Crust
    7.00
    8.00
    9.00
  

  
   Thick Crust
   8.00
   9.25
   10.50
  
  
   per Meat Topping
   +1.50
   +2.00
   +2.50
  


  

   per Veggie Topping
   +1.00
   +1.25
   +1.50
  
 
     
  Here
  is why you are computing in pennies.

I encourage you to use private methods to simplify
your function bodies.  Such methods are called helper functions.


C. Testing your Code

Your code is not ready to be used by the applet until you
test it.  To test your code you write a driver class which
gives sufficient examples of using your code to convince you it works
properly.  A driver class consists of a main 
function, and can be run as a stand-alone program.  You can 
generate output to the Console pane using

   System.out.println(data)
   
price and toString methods in
     Pizza

Here is how to create the driver class

   Create a new class, PizzaDriver.  In the
    Class Wizard put the class name and select the main
    method stub
    

    
    


  
 Eclipse constructs the method stub for main, and the
  class.  You need only fill-in the body. You should create
  several Pizza objects with various topping choices.  Print
  the price and string description of these pizzas.

  
 Run PizzaDriver as a Java application.

  
The output will appear in the Console pane (middle, bottom of 
  workbench.)




D. Test Applet with your new code

When you feel confident your code works, try running the applet
PizzaForm.  This applet takes two parameters

   NAME:  The name of your pizza parlour.
   
COLOR: The color scheme for your applet header.  This
      should be a six-digit hexadecimal code (includes 0-9, A-F):
      
	#------ or 0x------
      
      See Colors
      for a long list of choices.  Try for example "#800000"--your school
      color (maroon!!)



E. Write an HTML page to deploy your applet

You are finally ready to deploy your applet.  You will need to write
an HTML Web page to display your applet.  Creativity matters here.
I retain propriety over the name (PizzaXtreme), 
color scheme (Fuschia) and  slogan
("Our Pizzas are Radical!!").  You can see my HTML page by selecting
the link at the start of the lab and viewing the source code
(View->Page Source on Firefox.) You are welcome to copy
the code displaying the table of prices, but you must choose a different
page layout from mine. Pay careful attention to the 
APPLET tag (remember, HTML is not case-sensitive.)
Make sure that you create your HTML page in the Pizza directory
created by Eclipse in your workspace and you call your HTML file
Pizza.html



3. Handin
The lab is due at 11:59pm on Sunday.
You will submit the Project Pizza.  You had to write

   README:  a file with your name and any comments you
   	want me to read.
    
Pizza class
    
PizzaDriver class
    
Pizza.html Web page

Make sure you are in the directory Pizza before you
run the 
handin procedure.

Item	Small	Medium	Large
Thin Crust	7.00	8.00	9.00
Thick Crust	8.00	9.25	10.50
per Meat Topping	+1.50	+2.00	+2.50
per Veggie Topping	+1.00	+1.25	+1.50