Interface Design Using Java (Exercise 2) Copyright Chris Johnson, 1998. Human Computer Interface Design Using Java Exercise 2: Getting Started with AWT... A. Introduction This set of practical exercises, introduces you to some of the features of the Java Abstract Windowing Toolkit (AWT) that we will be using in this course. It begins by directing you to the main source of on-line documentation; the Java AWT Application Programmers Interface (API). It then helps you to set up your first AWT applet. You are then shown how to alter the existing applet to increase its functionality. The final task introduces a more difficult design exercise that comes closer to the nature of the assessed exercise that is associated with this course. You should work in groups of no more than three people for this practical. Please form into teams as quickly as possible because there is a lot of work to cover in this practical. I would expect all groups to complete task 4 before the next practical session. Tasks 5 and 6 reflect a higher level of difficulty and should only be attempted if you are confident with the previous exercises. This work is not formally assessed as part of this course. However, it does introduce techniques that you will be expected to use during the assessment exercises associated with this course. B. Your Tasks The following paragraphs present this week's tasks; try to complete as many as possible because they get more interesting as you continue. Task 1: Locating the AWT API (basic level of difficulty) There primary reference for information is the on-line Java tutorial at www.sun.com. This is the authoratative source but it has limitations for the purpose of this course, The site can be extremely busy during many periods of the week. This task directs you to the local AWT API documentation. It also makes sure that you are familliar with the mixture of keyboard and mouse interaction techniques that typify most modern graphical user interfaces. Finally, it introduces the way in which good interface designers can support frequent tasks and hide the complexity of more advanced interaction. Your task is to find a file entitled "jdk.1.2.2\docs\api\index.html" on your local disk using the find-file dialogue and a keyboard accelerator. Hint: on a Windows/NT PC use CTRL and Escape to open the start menu then type an 'f' to enter the find dialogue. Enter the name of the file to be found and press return. Make a bookmark so that you can easily find this file again. It contains documentation on all of the methods that you will be using during this course. Then briefly read the page on Labels under the class index. Things that can go wrong You get a "find" dialogue box but cant find the file? If the title bar of the Find dialogue says "Find a file" then you may have mis-typed the name. If it says something like "Find in document" then you are looking in a currently open application (eg Netscape) rather than on the disk of your computer. Task 2: Downloading the TimeTable Code (basic level of difficulty) This task involves an applet that produces the following timetable: In order to get this applet to run, you need three files: an HTML file. This shows how you can introduce the applet into any html file. Hint: look at the source for this file then save it to your local disk. Notice how you specify both the name of the applet (i.e., the java class to be run in the web page) and the codebase. The codebase is the directory or folder where the applet is to be found and can be given by a URL or a path. This enables interface designers and web programmers to refer to applets in other directories or on other machines. In order for you to ammend this applet you must change the codebase, simply change this to point to your current directory or folder (codebase="."). The full-stop or period refers to your current directory in Unix or current folder in MacOS and Windows. Alternatively, you can point your codebase to any other folder that is appropriate. Remember, however, that you must put the Applet classes in the location specified by the codebase. the applet file You should view this file by selecting the link and then use the 'save-as' option under your browser's file menu to create your own copy in a file called TimetableLabels.java. This file contains the code to implement the timetable. It deals with three types of objects. Labels are used to present each item of text. A panel is used to keep each of these items of text together. This may not seem important now but in the future we will build interfaces with a much more complex structure. The use of a panel helps to simplify things if, for example, we wanted to reposition the entire timetable rather than individual labels. We could simply move the panel rather than each of the components that it contains. The final object is a layout manager. The panel simply provides a grouping mechanism, it does not help programmers to position objects on the screen. This is the responsibility of the layout manager. the layout manager file. This file implements the layout manager mentioned in the previous paragraph. We will discuss this in later sessions. However, if you are interested then there are detailed notes on layout managers. Unfortunately, it is difficult to avoid this additional complexity and still produce a reasonably interesting example 8( Again, you should view the source and save it as NewGridBagLayout.java. The next task is to link and build the object code for this example so that you can edit and change the existing applet. Things that can go wrong When the save-as dialogue box comes up, you need to check that it is set to Source for the html file. Otherwise it will save the text that is displayed on the page ("Timetable") rather than the html code that generate the page itself. Task 3: Linking and Compiling the Timetable Example (basic level of difficulty) After you have saved the three files mentioned above, you need to use your java development environment to compile and link your versions of the applet. To do this, create a project in the same folder as NewGridBagLayout.java and TimetableLabels.java: Select New Project from the Project menu. Save the project as Timetable but make sure that the project is in the SAME FOLDER as the jave files mentioned above. Next add both of the java files to the project. Do this by selecting the Add Files option under the Project menu. Compile the applet. You will now need to edit the html file. Look at the contents of example2.html. You need to change the line:
< applet code="TimetableLabels.class" codebase="http://www.dcs.gla.ac.uk/~johnson/teaching/hci-java/demos/exercise2_labels" width=650 height=180>
to:
< applet code="TimetableLabels.class" codebase="." width=650 height=180>
Save the file. If all has gone well then you should see the skeleton timetable shown above. To do this, open the html file using the Open Page option under the File menu of Navigator. Next check that you have created a new version of the applet by changing some of the java code. Try changing the following line:
Label Time_0900 = new Label("09.00"); // create new labels
To the following:
Label Time_0900 = new Label("Too early!!!"); // create new labels
Recompile the project. In order to view any changes you will have to quit Netscape and start again. Many browsers cache (save local copies) of an applet and will use their own copy even if you make changes to the original. This helps them to reduce download times if the applet is transferred from a remote machine but it is extremely frustrating for you as a developer. Reload the applet, either by restarting Netscape to check that you have successfully changed the source code. If the applet does not show a change in the label for 09:00 then either your html file is still pointing to one of my examples or you have chosen restart rather than reload on the browser. Once you have successsfully compiled and linked your own version of the timetable then dont forget to change the label back to 09.00. At this stage you should be in a position to start programming with the AWT. Task 4: Add your own timetable details (basic/intermediate difficulty) Enter the details of your own timetable for term 2 into the existing applet. You do this by editing TimetableLabels.java. Please dont forget to save a copy in case you make a mistake as you go along. To enter new information, you first have to create a new label object:
Label Time_1000 = new Label("10.00");
You then position it within the timetable grid:
layout.setPositionSizeAdd(Time_1000, timetable, 2, 1, 1, 1);
The 2 refers to the X position within the grid. The first 1 refers to the Y position. The final two integers refer to the relative width and height of the label in the grid. In this case, it is one cell high and one cell wide. You should do this for each of the courses that you will be taking in this term. Task 5: Convert the labels to buttons (intermediate/advanced difficulty). At the moment this timetable is rather uninteresting. You can increase the level of interaction by changing the labels to AWT buttons. This is illustrated by the following version of the applet that you have already seen: The important thing to notice here from a design perspective is that the AWT peers alter the appearance of the button from that of a simple label so that users can clearly distinguish between text that is selectable and text which is not. In terms of implementation, this applet only involves changes to the applet file (TimetableLabels.java). In order to create your own version of this applet, you should create a new directory and project as before. Make sure that the project includes the layout manager NewGridBagLayout.java. Only this time replace TimetableLabels.java with TimetableButtons.java. Read the comments in this file very carefully and introduce further buttons that link your timetable to other web pages. There are more notes on buttons and we will cover the details in future lectures. C. Summary This practical has introduced you to programming with the AWT. It can be tricky to get things going but once you have got the basic ideas, things should be much more straightforward in future. Later tasks encouraged you to edit an existing applet and to generate an applet of your own. However, it is important not to lose sight of the fact that the real problem in user interface design is not simply one of implementation. The fact that an interface works as intended does not mean that it is usable. (There is an irritating saying: "if it doesnt work then it wont be used and if it cant be used then it doesnt work). You should have noticed that the examples on this page could have been implemented using some of the features of standard HTML (tables, hypertext links instead of buttons etc). The following exercises and practicals begin to develop our use of AWT beyond ways that might be possible in standard html. Back to the (boring old) course index.
