Cs120 lab 6, applet shapes

Names:

CS 120 Lab 06
Applets, Colors and a bit of HTML
Tom Linton, http://www.cs.moravian.edu/~linton
Moravian College, Spring 1999

Introduction

In order to create our own GUIs or build interesting applets, we'll need to learn the basics of Java's AWT (Abstract Windowing Toolkit). This package includes hundreds of useful predefined classes for creating menus, check boxes, drop down lists etc.-most of the common interactive devices in modern applications are present in the AWT. Today we'll look at basic shapes, colors and a minimal HTML file to display an applet.

Five Minutes of HTML

Hyper Text Markup Language (HTML) is used to create web pages in plain text format. The basic idea is to use tags to designate the style or content of a certain region of a web page. Most tags come in pairs, one tag to start a region and another to end the region. For example, if you'd like to display a few words centered, you would just enter <CENTER>a few words</CENTER> in an HTML document. The center tags instruct all browsers to display the material between them in the middle of the web page. HTML is not case sensitive, so we could have just as well used <center>a few words</center>. There are hundreds of good (and just as many not so good) basic introductions to HTML on the web. The one I used was http://www.davesite.com/webstation/html/. You can see the HTML that created any webpage, just load the page into Netscape and select "Page Source" from the "View" menu. You might try viewing the source for this web page, since it is fairly simple. Many pages are created by high level programs which make "reading" the HTML very difficult. If you're interested in learning more about HTML (later), follow the link above, or use Netscape's "Search" menu to search for "html introduction". The link here points to a minimal HTML document which you should save (right click and choose "Save Link As" from the ensuing menu) and modify as needed. I'd suggest renaming the file to match the name of the applet class you want to display (one new copy for each applet) and changing the title and perhaps the dimensions (WIDTH and HEIGHT) as well. Here is a brief explanation of what the file contains, after a display of the actual contents.

<HTML> <HEAD> <TITLE>Your short text goes here</TITLE> </HEAD>
<BODY>
<HR>
<APPLET CODE = "Picture.class" WIDTH = 400 HEIGHT = 300>
</APPLET>
<HR>
<A HREF = "Picture.java">The source file.</A>
</BODY>
</HTML>

A good HTML document has things enclosed in an <HTML> ... </HTML> tag pair, which pretty much indicate the region that the browser pays attention to. The head of an HTML document contains a variety of information. It is used by search engines to locate relevant pages, by authors to pass along information, and many other things. One important part of the head is the title. This gets displayed at the top of your browser window, and it's the title that is saved when you set up a bookmark to a page. Short and informative titles are the norm. The HTML above does little more than display an applet (named Picture), so a good title might be "The Picture applet". The body of an HTML document is what actually gets displayed by the browser. The horizontal rule tag, <HR>, displays a line (or horizontal rule) across the web page. The applet tag indicates the path (from the location of the HTML document) to the source or byte code file of the applet. In the example above, it is indicated that the Picture.class file resides in the same directory as the HTML source file (since there is no path, just a filename). Also included in the applet tag are the dimensions (in pixels) of the region in which the applet is displayed. There are usually about 800 x 600 pixels (width x height) on a monitor, so the HTML code above indicates a region of roughly 1 / 2 the width and 1 / 2 the height of most monitors. The third from last line is an anchor tag to designate a link. You provide a URL (universal resource locator) which can be either a path (from the location of the HTML source file) to the linked document, or an absolute URL (like http://www.cs.moravian.edu/~linton, which is my home page). The text after the HREF (hyperlink reference) and before the closing anchor tag, </A>, is what gets displayed as the "text link". Thus, the words "The source file." will appear as a link when the page is displayed, and clicking on the link will take you to the file in the same directory named Picture.java. If you create your own applets, you'll need to modify the HTML filename, the title, the path to the applet's byte code, the dimensions, and the hyperlink reference path.

Drawing Colored Shapes with Applets

The Graphics class in Java has methods for drawing basic shapes. Most shapes are drawn by specifying certain coordinates for key locations of the shape. The coordinates start at (0,0) in the upper left corner of the applets display, and the coordinates are in pixels. The point (50, 125) would be 50 pixels to the right (of the top left corner) and 125 pixels down. The coordinate arguments to these "shape methods" should all be ints. Simple pictures can be created by defining a class which extends the Applet class, has the following two import statements (at the top of the file),

import java.awt.*;

import java.applet.Applet;

and defines a method called paint, with the following declaration:

public void paint(Graphics g) {... various drawing commands...}

Here are template examples of several of the simple shape drawing methods of the Graphics class.

To draw a red line from (x1, y1) to (x2, y2), use:
g.setColor(Color.red);
g.drawLine(x1, y1, x2, y3);

To draw a blue (outline only) rectangle with upper left corner at (left_x, top_y), which is width pixels wide and height pixels tall, you would use:
g.setColor(Color.blue);
g.drawRect(left_x, top_y, width, height);

To draw a filled in green rectangle use:
g.setColor(Color.green);
g.fillRect(left_x, top_y, width, height);

To draw black text, whose lower left corner is located at (x, y), use:
g.setColor(Color.black);
g.drawString("text", x, y);

Ovals (for circles use height = width) are described by designating the top-left corner, along with the height and width of a rectangle which encloses them (see page 156 of our text) via the command:
g.drawOval(left_x, top_y, width, height);

To get a circle with center at (x, y) and radius r, use:
g.drawOval( x - r, y - r, 2*r, 2*r);

To get a pink filled-in oval, use:
g.setColor(Color.pink);
g.fillOval(left_x, top_y, width, height);

Java graphics objects (lines, rectangles, ovals, text etc.) can be rendered in several predefined colors:

black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, or yellow.

The current color remains in effect until you change it with the setColor method (several examples are given above). You can also create your own new colors. One way to do this is to specify the amount of Red, Green and Blue (sometimes called an RGB value) to mix together. Each of the color levels (red, green and blue) should be an integer from 0 (include none of the color) to 255 (maximal saturation). Be warned that not all colors can be displayed on all computers or web browsers. Here is a template for creating your own colors, it assumes the existence of a Graphics instance called g:, and makes a color by mixing 200 units of red, 20 units of green and 100 units of blue (it looks reddish purple on my screen).

Color myColor1 = new Color(200, 20, 100);
g.setColor(myColor1);

The linked file, Picture.java, contains Java code which defines the color above and draws a filled rectangle of that color, with a white oval in its center (objects drawn later in the paint method end up on top of earlier drawn objects). Your assignment is to edit this file (call it Picture.java) so that it contains the six faces of a die (so far it has the "1" die face created), nicely spaced and nicely colored. Make up your own colors or use the predefined colors. Each die face should consist of a square of some color (different faces should have different colors) and a single color for "dots" (the dots may change colors from die face to die face however). Submit the file using grade. You'll need to use the HTML file above, and you can test your Picture.java file by first compiling it, then giving the command

appletviewer Picture.html in a Terminal window (make sure the Picture.class file and the Picture.html file are in the same directory).