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.
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
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:
Things that can go wrong
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:
to:< applet code="TimetableLabels.class" codebase="http://www.dcs.gla.ac.uk/~johnson/teaching/hci-java/demos/exercise2_labels" width=650 height=180>
Save the file.< applet code="TimetableLabels.class" codebase="." width=650 height=180>
Next check that you have created a new version of the applet by changing some of the java code. Try changing the following line:
To the following:
Label Time_0900 = new Label("09.00"); // 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.
Label Time_0900 = new Label("Too early!!!"); // create new labels
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:
You then position it within the timetable grid:
Label Time_1000 = new Label("10.00");
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.
layout.setPositionSizeAdd(Time_1000, timetable, 2, 1, 1, 1);
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.
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.