[ANU] [DCS] [COMP2100/2500] [Description] [Schedule] [Lectures] [Labs] [Homework] [Assignments] [COMP2500] [Assessment] [PSP] [Java] [Reading] [Help]

COMP2100/2500
Lab 4: Graphical User Interfaces

Summary

You will add a digital display and a date display to the Java clock application from Lecture 16 2006.

Aims

• Put your knowledge of GUI programming with Java Swing into practice.

• Develop your ability to find useful information in Sun's Java API documentation and Swing Tutorial.

---

Exercise 1. Getting the source code

Download the jar file clock3.jar. This jar file contains the source code for the improved version of the Java clock. It also contains the compiled .class files. I have included information about the “main class” (root class for Eiffel people) in the jar file, so this jar file can be run directly, even without being unpacked. Just type java -jar clock3.jar. This is useful for distributing software. You can make a jar file containing just the .class files, and it will run anywhere. On my Mac you just have to double-click the icon and the system figures out that it has to run the JVM. It's probably the same on Windows and in Linux with a smart window manager like KDE. (Try it and see.) To find out how to add that information to a jar file, look at the manual page: type man jar. Look for information about manifest files.

Now unpack the jar file and spend a few minutes reading through the code. It should almost all be familiar to you from the lecture, but it has been reorganised to follow the Model-View-Controller architecture. According to my line counter program from Homework 5, there are 5 classes in the system, totalling 137 lines of code.

The one new thing in this version of the clock is that Model and View are an instance of the Observer Pattern. (Look it up on the web if you're interested. We'll be coming back to this in second semester.) Java has a version of the Observer Pattern built into the standard API. Here class Model extends the standard abstract class Observable and class View implements the Observer interface. Look up these two in the API documentation.

This version of the clock is also more efficient in that it only redraws the clock face when it actually changes. Look closely at the code and make sure you understand how it works. The flow of control is not immediately obvious, so it's worth taking the time to figure it out.

Exercise 2. Adding an “About” button

Add a button to the clock with label “About”. Make it so that when a user clicks on this button a popup window appears with a simple message saying that you wrote the program.

There are a few things to do here:

1. You can't just add a button to the main frame. First you have to set a layout for it. Make this a border layout. For details on how to do this, look in the Sun Java Swing Tutorial. Bookmark this page; you'll be coming back to it again and again. Now follow the link to “Laying out components within a container”. Change the existing code that puts the clock panel in the frame so that it uses a border layout and puts the clock panel in the centre position.

2. Now create a button with the label “About” on it. The easy way to do this is to look at the code for the counter application from Lecture 15 2006. You'll learn more if you go back to the Java Swing Tutorial, follow the link to “Using Swing components” and find the link to “How to use buttons” down near the bottom of the page. Another way to get information about this is to look for class JButton in the API documentation.

3. Add your button to the frame in the bottom position. (You'll have to look up how to do this.)

4. Create an ActionListener to respond to a user pressing your button. There are a few ways to do this. Because we're going to reuse this listener, make sure that you give it a name. (I did it with a named inner class.) You could look up how to attach listeners to components in the Swing Tutorial or look at the example code for the counter application in Lecture 15 2006. Link your ActionListener to your About button.

5. In the body of the actionPerformed() method in your action listener put code to put up a popup window on the screen. Popup windows (otherwise known as dialogs) inherit from class JDialog, but the simple way to put one on the screen is to use one of the static methods in class JOptionPane. You can read about this in the API documentation, or (better) in the Swing Tutorial. Your popup dialog should be an information dialog. Its title should be “About” and its message should be something like “Java clock by Josephine Bloggs”. Work out how to do this. You should be able to do it with a single (long) line of Java code.

Test your enhanced Clock application and make sure that it operates as it should.

---

Exercise 3. Add a menu

Add a menu bar with a “Clock” menu containing a single item “About”. Selecting this menu item should pop up the same information dialog as in Exercise 2. Here's why you needed to have a named reference to your action listener. Make the same listener object listen to the menu item and the button.

(General principle: often in GUIs there are several ways for the user to do the same thing. It makes sense to have one action listener for each operation that can take place in the program, and to have it listen to each of the GUI components that can trigger that action. This way there is no repeated code. Nothing could be more frustrating to a user than to find that different things happen when they press a button or select a menu item for what should be the same action.)

---

Exercise 4. Add a digital display option

So far we were just warming up. In this exercise your task is code an optional digital display, so that the clock can run in either digital or analog mode. Here are the steps.

1. Rename class ClockPanel to AnalogClockPanel.

2. Create a new abstract class ClockPanel. Think hard about what its public interface should be, and what parts of the code will be common between AnalogClockPanel and DigitalClockPanel.

3. Modify AnalogClockPanel so that it extends ClockPanel. Modify class View so that it creates an AnalogClockPanel but that its panel could be either analog or digital.

4. Test that your program still works.

5. Now write a new class DigitalClockPanel, also extending ClockPanel, that shows the time digitally. That is, it should display the hours, minutes and seconds as text, using a nice big font. You probably only need to rewrite the paintComponent() method, but don't rely on that (because I haven't done this bit myself yet). One thing to watch out for is what you do when hours, minutes or seconds is in the range 0–9. For minutes and seconds you will need to pad it with a zero so that there are always two digits. For hours you probably want to pad it with a space. Separate the fields with colons, so that your output looks roughly like this: 9:49:30. You might also want to put “AM” or “PM” after the time, or alternatively use the 24-hour clock.

6. Now add menu items to select between the digital and analog displays. These should be radio-button type menu items, where only one can be selected at a time. Look up how to do this in the Swing Tutorial.

---

Exercise 5. Add a date display.

Remove the silly button from the bottom of the display, and replace it with an optional date display field. This can be a JLabel if you like. (No need for anything fancier.) You will have to get the date from the Model. For that you'll need to look at the API documentation for class Calendar. You'll also need to think about how to organise this. The obvious straightforward way is to add all the extra code in class View. The better way is to make the date display another Observer of the Model. (In fact, perhaps the panels should be the observers, not class View. Make this change too and see how it pans out.) Add a checkbox menu item that turns the date display on and off. Make it independent of the choice between digital and analog display. The date should change at midnight.

---

Starred exercises are extension work. You do not have to complete them. They may be significantly longer or more difficult than the other exercises.

*Exercise 6. Multiple observers

Modify the system so that there can be more than one view observing the model. By selecting a menu item for a digital display, the system adds a new digital display window (rather than changing the current window's display mode). Make it possible to fill the screen with digital and analog clocks all part of the same running application, all updating themselves off a single Model.

---

**Exercise 7. Turn it into an alarm clock

You will need a dialog box for setting the alarm. You will need a menu with an item for turning the alarm on and off and another for setting it. You will need to display the status in some way: perhaps a coloured hand or another label above the date, or some other visual cue. You will need a popup message box and maybe an audible beep for when the alarm goes off. There are quite a few issues to think about here.

(In 2000, Assignment 2 was to build the whole alarm clock from scratch, so this is just the last part of that, but instead of specifying the behaviour, I'm letting you do the design.)

[ANU] [DCS] [COMP2100/2500] [Description] [Schedule] [Lectures] [Labs] [Homework] [Assignments] [COMP2500] [Assessment] [PSP] [Java] [Reading] [Help]