CSC 551: Web Programming
Spring 2004

HW4: Java Applet Programming

The Histogram class defines an applet for drawing histograms in a Web page. The idea is to have the user enter data in a textarea and then submit that data to the Histogram applet. The applet code will then parse the data and display the corresponding histogram. For example, the following screenshot shows a histogram of grades received by a student:

An HTML document that would produce this page is listed below:

<html> <!-- Dave Reed Histogram.html 3/15/04 --> <head> <title>Histogram Page</title> </head> <body bgcolor="gray"> <form name="HistoForm"> <table align="center"> <tr><td> <applet name="HistoApplet" code="Histogram.class" height=200 width=200> You must use a Java-enabled browser to view this applet. </applet> </td> <td align="center"> <textarea name="data" rows=8 cols=20 wrap="virtual"></textarea> <p> <input type="button" value="Generate Histogram" onClick="document.HistoApplet.drawHistogram(document.HistoForm.data.value);"> </td> </tr> </table> </form> </body> </html>

Part 1

Copy the source for the Histogram class into a file named Histogram.java and compile it into byte code. Using JCreator Lite, compiling a single Java file is relatively simple. First, open the file in the JCreator editor by selecting Open under the File menu. To compile, select Compile File under the Build menu.

To test your applet, cut-and-paste the HTML text above into a file named Histogram.html and load that page.


Part 2

Currently, all of the bars in the histogram are the same color: yellow. Modify the applet code so that bars alternate in color. For example, the odd numbered bars might be yellow, while the even numbered bars are green.

When you are testing your code, be aware of the fact that browsers do not always reload applets when a page is reloaded. You may need to exit the browser completely (close all windows) then restart the browser in order to load changes.


Part 3

Currently, the labels for the histogram bars are displayed over the bars. While this is fine for long bars, the label text can be obscured by the edge of the bar if the bar is short (or the label is very long). Modify the histogram applet so that the label for each bar appears to the right of the bar. Note that bar lengths will need to be adjusted in order to allow room for the labels. However, the bars must still be proportional in length, and should be as wide as possible. This will require you to determine which (bar + label) combination would be the widest, and adjust all bar widths accordingly.


Part 4

Add the Histogram applet to your GPA page so that, in addition to displaying the user's grade points, credit hours, and grade point average, it also displays the number of each letter grade in a histogram applet. The histogram should combine all failing grades (F, AF, and WF) and display them as simply F's.