Graphical user interfaces
Exercise 3, Friday 9.11.2007

• Java 6 API
• Java tutorial UI trail

Instructions

This time we'll practice concurrency in graphical user interfaces. On one hand, there will be background jobs, on the other hand, user and the application are adjusting the display components concurrently.

The task in question appears fairly straightforward, but, because of the concurrency, there are suprisingly many situations to handle. Thus, plan carefully and test your solution in all use situations. After all your work, if your version still has some problems, mention the implemented and missing functionality in self-evaluation, and submit anyway. Perfect versions will get perfect points, mostly working versions still enough points.

Clock2 -example (with helper classes) of the web-page will serve as an example and skeleton as it contains a similar backround job. ClockTimer and GUIClock -classes will be stored in the classpath of the automatic compilation, consequently you don't have to include them if you use them unchanged. Again, name you class with your username (lower case characters only).

X exercises are obligatory personal exercises

The answers to X-exercises have to be unique for every student. Not even partial copies of the same answer are allowed. The answer has to be sent via email by Thursday 2:00 pm (the previous day) according to the instructions below. You will receive an acknowledgment upon successful processing within few minutes. Answers will be graded. The answer must also contain a short self-evaluation in which you describe whether the program works, has some problems (tell which), or does not probably work; how good structure is has, what could be improved, etc. The self-evaluation must be stored as a comment within the program. A correct and proper self-evaluation is worth one point (in case of a proper answer).

How to submit

Send your answer to using cs to user sjuva with a subject GUI_X2_username (case-sensitive, with underscores, username is your username), and the answer (with self-evaluation) as the body of the message (no attachments). Most reliably using program mail at cs:

/usr/ucb/mail -s GUI_X2_username sjuva < username.java

where username is your cs username and username.java is the single source file containing your answer.

Other than cs.joensuu.fi got separate instructions with X1, continue with them.

X2. Direct manipulation countdown timer

Make a countdown timer ("egg timer") with direct mouse manipulation with sliders.

The user sets the timer time by moving the minute and second sliders. Maximum time is 59:59 (almost an hour). The current set time is also visible in a digital display. There are two modes of operation. If the Autostart option is selected, the countdown starts automatically as soon as user has adjusted the slider. If Autostart is not selected, countdown starts when user presses Start -button. In both cases, if the user presses Stop -button, countdown pauses and Start -button is enabled for the user to resume on countdown. Use ClockTimer to give time signals for your timer.

The user can also adjust the sliders during the countdown (in both operating modes). Then, new time is set and countdown continues from the newly set time.

Whenever the countdown reaches 00:00, the Alarm-button is enabled and it starts flashing (e.g, alternate two colours with 200ms interval). The button flashes until the user presses it (when it returns to original colour and is disabled).

Flashing the Alarm should not block the user interface. Thus, in a perfect solution, the user must be able to fully use other controls without stopping the flash. In an easier solution, you might consider a less visible alarm, e.g., a limited flash time to return control for user after 5 seconds. Notice, however, that when event dispatcher thread executes an event handler, it does not redraw the screen.

In a perfect solution, in both modes of operation, the buttons should be enabled only when the corresponding action is valid. E.g., in time 00:00, neither should be active. Stop should be enabled only when countdown is running. Start should not be enabled unless countdown is stopped, or there is time set but not runnign in non-autostart mode.

Example implementation (*.class) at examples page. Use Java6 to run.

Few things and hints to remember:

• All event handlers should be fast (or done with a backround thread).
• All component update must be done in event dispatcher thread.
• When the sliders are periodically updated (by the reducing timer), they trigger a ChangeEvent, just as the user would move it.
• Remember to update button enabled/disabled -status.
• You can use ClockTimer to time the flashing of Alarm button.
• You can use more classes (within the same file) to implement some functionality.

• What other ways to interact with the egg timer we could add?
• How to make this usable with a mobile phone keypad?

4. Decoration of Clock2.AnalogClockFace

Notice, this is a normal exercise, do not submit by email beforehand.

We practice custom painting by adding decoration and improving drawing efficiency of the analog clock of the example Clock2.java at www-page. You need to use Java API documentation and Java tutorial as information sources in addition to lecture handouts.

Make following additions:

• Make clock hands thicker (sec = thin, min = medium, hour = thick), and make them scaling thicker/thinner automatically as clock is scaled.
• Add numbers (1..12) to the clock. Place them outside of the rim at correct places with the tics. Remember to redraw them to new places after resizing.
• Improve drawing so that only clock hands (the inner part) are drawn on update, not numbers, rim, or tics. You need to have short enough second hand that it does not mess with tics.

Hints:

• setStroke()
• drawString(), setToRotation() (or FontMetrics)
• divide paintComponent() to hands and decoration, draw decoration only when needed
• use floating point factors in scaling all components (relative sizes).
• Example implementation (*.class) at examples page. Use Java6 to run.