Interface Design Using Java (Exercise 4)

Human Computer Interface Design Using Java

Exercises 4: Scroll Bars, Choices and Images (New Version)

A. Introduction

This practical introduces a number of classes that support an interactive map. The user selects a location from a number of choices. The map, which can potentially be very large, is then scrolled to show the user that location. From a technical point of view, this illustrates the use of choices in a manner that allows the addition of further options with relatively little effort. The map is loaded as a jpeg or gif file. The practical, therefore, also introduces some buffering techniques that can be used to ensure that the image is not presented to the user before it is fully downloaded from the network. Finally because maps can be very large, the classes attach scroll bars to the images. The coding of these can be relatively complex because the program has to translate from a co-ordinate on the scroll bar (e.g. X pixels from the top of the bar) to a location in the image (i.e. X pixels from the top of the map) so that if the user moves the scroll bar say 10 pixels then that might equate to a move of 100, 200, 300 pixels on the surface of the map depending, of course, on the size of the map and of the scroll bar.

B. The University Map Scenario

The University has a web page full of maps that potential visitors can download. When I first arrived at the University, I was given one of these and I did not find it very useful. My main problem was that once I had selected my destination from a long list of places, I then had to search for a reference code on the map. For example, if Physiology was G9 then I would have to scan the map for this location. Take a look at the campus maps on:

http://www.gla.ac.uk/general/Maps/campusmap.html

Years ago, you used to find maps in town and cities where each place on a list of locations had a button next to it. If you pressed that button then a light came on in the map to show you where that location was. This saved users from laboriously searching through the map.

This practical introduces you to an Applet that updates this concept of an interactive map. Similar techniques are widely used in many route-finding and geographical information systems (GIS). The idea is that the user is presented with a number of places to choose from. Because the number of places on a map can be very large and because screen space is limited, a choice will be used to display only the current destination on the map (see the course notes on Choices and Lists in AWT). Once the user selects their destination then the image of the map will be updated to show the location of the place that the user is interested in. Here is the Applet that implements the design described above:

The code for this applet is contained in MapExplorer.java The following classes were used to develop this applet:

Place.class
This class represents a location in terms of three attributes. The name() of an instance provides a string value of the location name. x() and y() return integer co-ordinates. An example would be Place ("Lillybank Gardens", 990, 390) Only a few places are currently listed at the top of MapExplorer.java. At the end of the file, a much longer list is included as a comment. NB - the x,y values associated with each place on the map are not accurate. You will have to search for these on the map - see Task 1.
MapExplorer.class
This class uses an array of Places (see above) and an image file (jpeg or gif) to produce an interactive and scrollable map. The array of places is traversed and the names of each place are added to a choice. In AWT a choice provides a scrollable list where only one item is selected at any one time. If the user selects a place name on the list of choices then a Listener (MyExplorer$MyItemListener.class) is called and the map is scrolled to the (x, y) location of that place.
ImagePanel.class
This class extends the predefined AWT canvas class to provide an area onto which the image of the map is drawn. The paint() method is over-riden to draw a red box over the area that the user is looking for.

NOTE: You will also need a copy of map.gif in the same directory as your applet.

B. Your Tasks

This applet is complex. It contains many advanced features that are very useful in the commercial programming of web based user interfaces. The following tasks are intended to help you exploit some of the techniques.

Task 1: Support Map Development and Additional Places (Intermediate level of difficulty)

As mentioned the (x,y) coordinates are not accurate. ne means of finding out the correct locations is to laboriously constructed a grid of the pixels in the image and use this to calculate the values stored alongside the names in instances of the Place class. All of this can be avoided if you could introduce a facility whereby the user could move the mouse to select a point on the map canvas and then have the (x, y) location of that selection displayed to System.out. If this were available then you would just have to click on a place on the map to get the co-ordinates that a programmer would then use to build the array of places in MapExaplorer.java. Your task is to develop this facility. Hint: I would use a Boolean value DeveloperMode. When set to true this would print out the (x,y) locations. During normal user interaction, this could be set to false so that they would not have potentially meaningless location values displayed to them. There is already a comment directing you to add a MouseListener to the ImagePanel class. Once you remove the comments around this code you will then need to implement your code based on the notes that I have given you. For instance:

class mouse extends MouseAdapter{
	// write your own code for public void mouseClicked(MouseEvent e){}
}

Task 2: Implementing HTML parameter passing (Intermediate level of difficulty)

It is possible to pass parameters to Applets using the PARAM tag. This allows HTML developers to associate actual paramters with formal paramters (i.e., variable names with values).



< APPLET
  CODEBASE = "../demos/exercise4/"
  CODE     = "MapExplorer.class"
  NAME     = ""
  WIDTH    = 450
  HEIGHT   = 250
  HSPACE   = 0
  VSPACE   = 0
  ALIGN    = middle
>
< PARAM NAME="Accomodation Office(x)" VALUE="850">
< PARAM NAME="Accomodation Office(y)" VALUE="550">
< /applet>

Inside the applet, you can then access these parameters using getParameter(). This expects a string that can be matched with one of the NAMEs and will return the associated VALUE as a string. You will have to assign the vaule that is returned by the following call.

getParameter("Accomodation Office(x)");

This facility is extremely useful because it would enable the developers of a web page to use your applet to create their own maps without ever writing any Java code. The PARAM facility would pass in the name of the image file. It could then also be used to pass in a list of places together with their X and Y coordinates. Your task is to extend the current implementation to provide this highly generic and re-usable applet. For more information on the PARAM facility try the Java tutorial.

Task 3: Implementing a Route Finding System (High level of difficulty)

At the moment, you can find out the location of a particular place given the name of a location. It would be far more useful if the system could take the name of a starting point and the name of an end point and then suggest an optimal route between these two places. Try to implement this additional functionality for a subset of the places in the existing applet. Hint: this is a significant programming and design task. Please think very carefully about the ways in which you will store and present the route information to the user. You could update the map canvas to show the route graphically. Alternatively, you could simply write the textual description of the route to a label or other object. In either event, you must carefully consider the USABILITY arguments for and against the method that you adopt. There is a real danger at this stage in the course that design decisions will simply be reduced to whether or not it is easy to program. Such an attitude is highly pragmatic but would miss the point of the course. A good solution would be to produce an initial version and then use the experience gained to build an improved implementation.

C. Summary

This applet has introduced a number of useful features in the AWT toolkit. These include the use of complex objects, such as the array of places, to minimise the changes that have to be made when choice structures are changed.

Finally, this practical exercise has introduced the use of scroll bars to the control presentation of an image canvas. Even if the details of particular toolkits change, it is unlikely that these techniques will alter in the immediate future. Please read the accompanying notes on this topic if any of this is unclear.

Back to the main index...