Copyright Chris Johnson, 1998.
This course must NOT be used for any commercial purposes without the express per mission of the author.

Human Computer Interface Design Using Java


Chris Johnson


The AWT Graphics class helps programmers to paint and fill shapes. It can also be used to draw strings and images as well as manipulate graphical regions. we have already used graphical components several times. For instance, the simple HelloWorld application contained the following:

public void paint (Graphics g){
	g.drawstring("Hello World", 80, 120);
Notice the way that this program overload the paint() method - this is by far the easiest means of altering the appearance of a graphical object. This is, typically, called as a result of AWT issuing update() requests on a partcular component. The image of a Component may also be painted when it first appears on screen or when it is uncovered by another window.

Graphical images are created with respect to a coordinate system in AWT. Each Component has its own integer coordinate system, ranging from (0, 0) to (width - 1, height - 1). Each unit represents one pixel. This is illustrated by the following diagram from Mary Campione and Kathy Walrath, Java Tutorial.

Within these coordinates it is possible to draw a range of objects using the AWT package. These are implemented by the following methods:

The following Applet illustrates the use of filled and unfilled rectangles and ovals. The user selects the appropriate shape using a Choice component at the top of the Applet. An event handler is then called to update the central canvas after this selection has been made. The user can also select a checkbox at the bottom of the Applet to fill the shape that has already been displayed. Here is the
source code for the relevant classes. Notice that a GridBagLayout might have improved the design of this applet by moving the label of the checkbox closer to the box itself.

Here are sections of the code that draw various filled and an unfilled rectangles:

	rectangle = new Canvas(); // first create a canvas to draw into

	rectangle.drawRoundRect(new_x, new_y, width, height, 30, 30);

	rectangle.draw3DRect(new_x, new_y, width-1, height-1, true); // true here if raised 
        rectangle.fill3DRect(new_x+3, new_y+3, width-7, height-7, false); 
In the first case, a rectangle is drawn at coordinates (new_x, new_y) and with the width and height specified elsewhere in the code. The final two parameters to the call refer to the number of pixels in the width and height of the arc at the four corners of the rectangle. The second line of code illustrates how a raised three dimensional rectangle can be used to frame another (unraised) three dimensional rectangle that is created by the final line. Finally, it is important to note that the rectangles drawn here are very different from the AWT Rectangle class. This is intended to represent areas and regions of the screen and is quite different from the graphical images that we have drawn.

A lot more could be said under this section. For instance, there are various methods for setting the color of graphical objects. These are illustrated by the Color Palette applet at the end of this part of the course. Similarly, more could be said about the use of the graphics class to support animation techniques. This is the subject of a course in its own right. For more information about this then check out the latest version of Mary Campione and Kathy Walrath's Java Tutorial at


Scrollbars are sliders that can be used to maniuplate a value. One particular instance of this is when a scrollbar is used to change the X or Y coordinates of users view on an image or canvas. (This form of scrollbar is associated with scrollpanes in AWT1.1 and additional, explicit support is available).

In AWT 1.0, a scrollbar can be declared an initialised as follows:

	Scrollbar redScroll = new Scrollbar(Scrollbar.VERTICAL, 0, 128, 0, 128);
as can be seen, each scrollbar has a number of associated parameters: Here is an example of an Applet with a scrollbar, implemented by
this code. ScrollableCanvas implements a simple Canvas subclass that is used to present image. ImageScroller is a Panel subclass. It creates the ScrollableCanvas and Scrollbars.

The Applet responds to scrolling events by saving the scrollbar's new value in a variable that is accessible to the Component that it presents. The repaint() method is then invoked on the Component.

	public boolean handleEvent(Event evt) {
                      switch ( {
                        case Event.SCROLL_LINE_UP:
                        case Event.SCROLL_LINE_DOWN:
                        case Event.SCROLL_PAGE_UP:
                        case Event.SCROLL_PAGE_DOWN:
                        case Event.SCROLL_ABSOLUTE:
                          if ( == vert) {
                              canvas.ty = ((Integer)evt.arg).intValue();
                          if ( == horz) {
                              canvas.tx = ((Integer)evt.arg).intValue();
                              canvas.repaint();       }
                      return super.handleEvent(evt);
The image needs to do is draw itself at the origin specified by the values from the scrollbars. A Component can change its origin and not have to change its normal drawing code. In the previous Applet this was done by translating the image so that its top left-hand corner is offset from the origin by the amount specified in the scrollbars i.e., in ScrollableCanvas:
public void paint(Graphics g) {
        g.translate(-tx, -ty);
        g.drawImage(image, 0, 0, getBackground(), this);

The Color Palette Case Study

This Applet is based on a program developed by G.W. Rowe in An Introduction to Data Structures and Algorithms with Java, Prentice Hall, 1998, pp118-126.

The idea is that by using three scroll bars, the user can mix the proportion of red, green and blue on a colour canvas. By selecting a point within that canvas they can then find out the exact proportion of RGB at that particular spot. This will be displayed numerically and in a small square on the right hand side of the color canvas.

The Applet relies upon the following classes:

Here is the final Applet.