CPSC 124: Lab 6
Applets, Events, and Components

A LARGE PART OF CREATING APPLETS is working with components and events. Components are things like buttons and text-input boxes that can be added to applets. Events are asynchronous events such as mouse clicks and key presses that are handled by calling event-handling routines in the classes you write. In this lab, you'll continue your exploration of applets, components, and events.

You will need two folders from Math/CS Server: "SimpleSum Applet" and "SimpleSketch Applet". These folders contain applets that you will be working on in this lab. The exercises for this lab are as follows:

Exercise 1: The SimpleSum applet lets the user type numbers into a text-input box. Every time the user presses return, the number in the box is added to a running sum, which is displayed in the applet. You are to improve this applet so that it also displays: the count of numbers entered, the average of the numbers entered, and the standard deviation of the numbers. To keep track of these statistics, you should use a slightly improved version of the StatCalc applet that you wrote for the last lab. (This version of StatCalc is included in the SimpleSum Applet folder.) You will have to read the rest of this lab worksheet to understand how to do this exercise.

Exercise 2: The SimpleSketch applet lets the user draw freehand curves on a rectangular drawing area, using the mouse. The applet has a pop-up menu for selecting a color, but the menu doesn't do anything. Your job is to make the pop-up menu work, so that each curve drawn by the user is in the currently selected color.

Exercise 3: Write an essay of at least one page discussing the topic, "Programming with Events and Components". The essay should discuss what it's like to program by creating components that can handle events, and it should explain how such programming differs from the type of programs you have written previously in the course.

Extra-credit Exercise: For this lab, I am giving you the opportunity of doing an extra credit exercise (for up to five extra points). The idea is to have a little square (or other figure) on a canvas, and a text-input box where you can type in commands to the square. For example, if you type "up" -- and press return -- then the square should move upwards a bit on the screen. You might have color-changing commands, size-changing commands, etc. Use your imagination. (You can use a BorderLayout with a canvas in the "Center" and a TextField to the "South".)

The HTML File

When you are working with applets in CodeWarrior, you'll notice that the project contains an HTML file. This file must be there. When you "Run" the applet, it's the HTML file that Metrowerks Java actually looks at. This file includes an <applet> tag that defines which applet is to be run and what its size should be. This means that if you want to either

then you need to edit the HTML file. In particular, when you do Exercise 1 for this lab, you will need to edit the HTML file to make the applet bigger. (You need to do this to make room for the extra data that you are going to display in the applet.) The applet tag in the HTML file for SimpleSum looks like this:

     <applet codebase="CompiledFiles" code="SimpleSum.class" width=350 height=105>
     </applet>

This says that the applet that is to be run is in the file named SimpleSum.class, and that it is to be displayed as a rectangle that is 350 pixels wide and 105 pixels tall. To accommodate three extra lines in the applet you write for Exercise 1, you should probably change the height to about 180, allowing 25 pixels per line. (The "codebase" is the name of the folder that contains the class files. If the class files were in the same directory as the HTML file, you wouldn't need to specify a codebase.)

Note that you can open the HTML file with Netscape, as well as with Metrowerks Java. You can either drag the HTML file onto the Netscape program icon, or you can start up Netscape and use the Open File command from Netscape's File Menu.

Layouts

When you add a components to an applet they are, by default, just dumped onto the applet one after the other. Often, you want more control than this, and one way of getting such control is to install a new "Layout Manager" for the applet. Two particularly useful types of layout manager are defined by the classes GridLayout and BorderLayout. A grid layout divides the applet into a grid of equal sized rectangles and puts one component into each rectangle. A border layout consists of a central component surrounded by up to four additional components above, below, to the left, and to the right of the central component. If you want to use a GridLayout in an applet, for example, you could just use the following command in the applet's init() method:

          setLayout( new GridLayout(rows, columns, rowGap, columnGap) );

where rows is the number of rows of rectangles in the grid, columns is the number of columns, rowGap is the size in pixels of the gap that you want to leave between rows in the grid, and columnGap is the gap that you want to leave between columns. (Gaps can make the layout look neater, but are not required.) Note that the number of components in the applet should be equal to (rows * columns), which is the number of rectangles in the grid.

The SimpleSketch Applet uses a BorderLayout; you can read how it is used, but you will not have to change it in any way. The SimpleSum Applet uses a GridLayout with 4 rows and just 1 column. You are going to be adding 3 extra rows so that you have room for the extra information you want to display.

TextField, Choice, and Label

In the last lab, you saw how to use a Button in an applet and how to respond to the "action event" generated by a Button. In this lab, you'll see several new types of components.

An object of type TextField is a text-input box where the user can type a single line of text. If the user presses return while typing, an action event is generated. The TextField is the "target" of the action event, and the arg is a String that contains the contents of the text field. In many applications, you don't need to respond to the action event -- you just look at the text field whenever you need to use the value that it contains. There are a number of useful methods for TextField objects, including methods to read the text from the box, to change the text to a new string, and to hilite the text. You can see how these are used in the SimpleSum Applet. (There's one nasty bit in this applet: converting the String typed by the user into a double number. You can pretty much ignore the details for now.)

A Label object displays uneditable text. The user can read the text in the Label but can't change it. However, your program can change the text by using the method setText(). The SimpleSum Applet already uses a Label. You will need to create three more Labels to display the count, the average, and the standard deviation of the numbers entered by the user.

A Choice object is particularly neat. It represents a "pop-up menu" containing a list of items. The user can click on the menu and select one of the items. When the user does so, an action event is generated. The target for the event is the Choice object. The arg for the event is a String that gives the item that has just been selected by the user. This means that your program can react every time the user selects a new item. (Alternatively, you could just check which item is selected whenever you need that information.) The SimpleSketch Applet uses a Choice object. You have to figure out what to do when the user makes a choice from the menu.

Canvases and Graphics

A Canvas object is a component on which you can draw. Actually, you can draw on any component, but a canvas is meant specifically for drawing and isn't good for much else. In fact, to get a canvas that's useful for anything at all, you usually have to make a subclass of the built-in canvas class. This is what is done in the SimpleSketch Applet: A subclass named SketchCanvas is defined. In the subclass, mouseDown(), mouseDrag(), and mouseUp() methods are defined which allow the user to sketch freehand curves by clicking-and-dragging the mouse. The only problem with the class as it exists is that all the curves that the user draws will be black. You have to make it possible for the user to sketch curves in a variety of colors. To do this, you will have to modify both the SimpleSketch class and the SketchCanvas class.

By the way, although you won't really need to understand them to do this lab, you should start learning about objects that belong to the class Graphics. These objects are often referred to as "graphics contexts". In all modern GUI environments, in order to draw anything at all, you need a graphics context. In Java, a graphics context is an object, and all drawing commands are methods in the Graphics class. Before you can draw anything on a canvas (or any other component), you have to get a graphics context from somewhere. One way to do this is with the getGraphics() method, which returns a graphics context that you can use for drawing in a component. All this will be discussed in more detail the course continues, but you can see an example of using a graphics context in the SketchCanvas class.

[ Lab Index | Online Notes ]