CPSC 124, Fall 2001
Lab 7: Applets and Objects

In this lab, you will be creating and using objects to create a "bouncing ball" applet like the one shown here. You'll also be working a bit more on understanding applets and on your Web portfolio.

The files for this lab can be found in the directory /home/cs124/lab7. Begin by copying this directory into your own account, and cd into your copy of the directory.

This lab is due next Wednesday, October 17. I will grade Exercise 3 from the previous lab along with this lab, so you don't have to complete that exercise until next Wednesday.


Simple Objects

The file Balls.java in your lab7 directory defines the applet shown at the right. This file will be a starting point for your work on a more complex bouncing ball applet. You can view the applet at larger size with the command appletviewer Balls.html. Like some other applets that you have seen in this class, Balls.java is based on SimpleAnimationApplet. It has an init() method that initializes the applet and a drawFrame() applet that is called over and over again to draw successive frames of the animation. The bouncing ball in this animation is represented by an object. This MovingBall object is created in the init() method. Each time drawFrame() is called, the ball is moved and is drawn in a new location.

Balls.java makes use of objects in several ways. Consider this command in the drawFrame() method:

         g.setColor( new Color(180,180,255) );

This sets a drawing color for the Graphics object g, but in this case, the color is defined as "new Color(180,180,255)". This is an expression that represents a newly created Color object. The new operator is used to create objects. The syntax for this operator is

        new class_name ( parameter_list )

The object that is created belongs to the class named class_name. The actual parameters in the parameter_list are used to customize the object that is created. (In some cases, the parameter list can be empty.) In the expression "new Color(r,g,b)", the parameters r, g, and b specify the red, green, and blue components of the color. They must be integers in the range from 0 to 255 inclusive. Another example of constructing an object is found in the init() method where the bouncing ball object is created:

    ball = new MovingBall( 0, getSize().width, 0, getSize().height );

The new operator here creates a new MovingBall object, which is assigned to the variable named ball.

There are two ways to get objects in Java. One is to use the new operator to construct a new object. The other is to call a function that returns an object as its return value. This is what's done in the above statement for the parameters getSize().width and getSize().height. Here, getSize() is a function that is defined in every applet, which can be used to determine the actual size of the applet. It returns a value which is an object of class Dimension. Every Dimension object contains two int member variables, width and height. So, getSize() is a an object, and getSize().width is a variable in that object. By using getSize().width and getSize().height instead of actual numbers, you can write an applet that will work well for an applet of any size. Of course, doing so requires extra calculations.


Exercise 1: Bouncing Balls

The bouncing balls in the above applet are represented by objects belonging to the class MovingBall. An object in this class can be constructed with 

        new MovingBall(xmin,xmax,ymin,ymax)

where the parameters specify a rectangular region. The ball will move around in this region, bouncing off the sides so that it stays inside the rectangle. More specifically, the the rectangle extends from xmin on the left to xmax on the right in the horizontal direction and from ymin on the top to ymax on the bottom in the vertical direction. The values of xmin, xmax, ymin, and ymax are given in pixels.

When a MovingBall ball is first created, it is positioned at the center of its rectangular enclosure. It has a radius of 5 pixels. Its color is set to red. And it has a randomly assigned speed and direction. These properties can be changed by calling subroutines in the object. If mBall refers to any object of type MovingBall then

A MovingBall does not actually move by itself, and it doesn't get drawn automatically. The MovingBall class is meant to be used with SimpleAnimationApplet. A MovingBall object, mBall should be moved and drawn in the drawFrame() method by calling these subroutines:

This is illustrated in Balls.java. There are other subroutines in the MovingBall class. You can read about them in the source code, MovingBall.java.

For the exercise, you should edit Balls.java so that the applet shows a number of balls that move in at least two different rectangular areas. Each rectangular area should either be filled in with color or outlined in color. You should have a minimum of five balls, and they should display a variety of sizes and colors.

You will have to declare a variable to represent each moving ball, as is already done for the variable named ball in the original version. (These variables are not static. This is because applets are objects rather than classes -- a fine distinction that you should come to appreciate soon.) In the init() method, you must create each ball and set its size and color. In the drawFrame() method, you must draw the rectangular areas and you must move and draw each ball. You can assume that the applet is 400 pixels wide and 300 pixels high.

One thing to be careful of: The parameters for setting the limits on a ball are different from the parameters for drawing a rectangle. For the ball, you specify a rectangular area by specifying xmin, xmax, ymin, and ymax. When you draw a rectangle, you specify the x and y coordinates of the upper left corner and the width and height of the rectangle.

(If you want to make your applet more interesting, you might consider trying to make balls that change size. You could do this by making the size of the ball depend on the frame number. As you saw in Lab 5, the frame number can be obtained in drawFrame() by calling the getFrameNumber() function. For something even more ambitious, you could have a rectangle that moves or changes shape. This is more complicated since in addition to changing the rectangle, you have to change the limits on the MovingBalls that it encloses.)

You should turn in a printout of your source code and post your applet on your Web site in a place where I will easily find it.


Colors and Images on Web Pages

As in Java, colors for Web pages can be specified either by using a common color name (like "red" or "white") or by specifying the red, green, and blue components of the color numerically. Unlike in Java, colors are specified numerically using hexadecimal numbers rather than ordinary, base-10 integers. Hexadecimal, or base-16, numbers use the digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F for the numbers that are represented in base-10 by 0, 1, ..., 15. The format for a hexadecimal color specification is "#RRGGBB" where RR, GG, and BB stand for two-digit hexadecimal numbers that give the red, green, and blue components of the color. For example, the background of this page has color "#FFFFDD" and the headlines have color "#990000". Fortunately, you don't actually have to learn hexadecimal numbers to use them for colors. Just click on this color table link for a table of 216 different colors and their hexadecimal codes.

You can use hexadecimal color codes in the <body> tag of an HTML page to specify the background color of the page and the default colors for text and links on the page. For example:

     <body bgcolor="#CCFFCC" text="#009900" 
                        link="#0000CC" vlink="#999999" alink="#990000">

This gives a light green background with dark green text. Links are shown in blue, while links that have already been visited are gray. Links that are active (i.e., the user has pressed the mouse on the link) are dark red.

To show colored text on your page, use the <font> tag to enclose the text like this:

         <font color="#00CCCC">colored text</font>

You can do this in headlines as well as in paragraphs.

Another way to add interest to a Web page is to use images. Typically, you will use image files with names ending in gif, png, jpg, or jepg. Gif files can contain animated images, like the one on the left. This image comes from http://www.iconbazaar.com. You should try to avoid using files that are very large. You can include an image onto a Web page with the <img> tag. The tag for the image shown at left is:

     <img src="cake.gif" align=left 
                             width=74 height=64 hspace=10 vspace=8>

Only the src is required. It specifies the URL of the image. Usually, this is just a file name, and the image file is stored in the same directory with the Web page. The modifier "align=left" means that the image will displayed at the left margin and text will wrap around the image. You can use "align=right" to put the image on the right margin of the page. The width and height modifiers specify the size of the image, and hspace and vspace leave space between the image and the surrounding text. If you want an image that is centered on the page with no text on either side, the easiest way to do it is to put the image in a centered paragraph with no other text. For example:

     <p align=center>
     <img src="back-to-school.gif" align=left 
                  width=76 height=76 hspace=10 vspace=8>
     </p>

It's also possible to use an image as the background for your page. The image will be repeated to fill the entire page. This is done by adding background="file-name" to your page's <body> tag. A large number of images that are suitable to be used in this way can be found at http://www.grsites.com/textures/. (But please keep in mind that no one wants to struggle to read the text on your page. Use a background image that makes the text readable.)


Applets on Web Pages

Applets are similar to images. An applet is placed on a Web page using an <applet> tag. Instead of src, the <applet> tag uses code to specify the .class file for the applet. For an applet, the width and height are not optional. The width and height specification in the applet tag is the only thing that determines the size of the applet. There is no way to specify this is the Java source code. You can use align=left or align=right to position an applet at the margin of a page, with text wrapped around it. You can use hspace and vspace to leave space around the applet. One difference between the <img> tag and the <applet> tag is that <applet> requires a matching closing tag, </applet>. (Later, we will see that you can add "applet parameters" between the <applet> and the </applet> to customize the behavior of the applet.) On this page, the applet at the top of the page is specified with the tag:

     <p align=center>
     <applet code="Balls2.class" width=400 height=300>
     </applet>
     <p>

while the smaller applet that shows just a single ball uses 

     <applet code="Balls.class" width=150 height=150 align=right hspace=10>
     </applet>

Exercise 2: More Work on Your Web Site

For the second exercise of this lab, you should continue to work on your Web portfolio for this course. Add some colors to your pages. Add at least one image, and possibly a background image, to one of your pages. Add the applet that you created for Exercise 1 to your portfolio. (Note that this applet requires three .class files: Balls.class, MovingBall.class, and SimpleAnimationApplet.class.) Your portfolio should also contain the drawing applet and the animation applet that you wrote for previous labs. Consider adding your source code for the first programming assignment. You should have a plan about how this portfolio will grow as the course progresses.

To grade this Exercise and Exercise 3 from Lab 6, I will visit the index.html page on your site. I should be able to reach your CS 124 portfolio through that page, either directly or through an intermediate page such as cs124.html. I will look at your portfolio sometime on or after Wednesday, October 17.

David Eck, 11 October 2001