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

COMP2100/2500
Lecture 11: Graphical User Interfaces I

Summary

The first of three lectures on graphical user interfaces, introducing some fundamental concepts and definitions.

Aims

• Introduce the general principles

• Lay the foundation for more specific work later

Outline

Today

• Graphical application structure

• Interface components

• User-interface problems and guidelines

• Introduction to GUI programming in Java Swing & AWT

GUI II:

• GUI implementation in Java with Swing & AWT

GUI III:

• A complete worked example application

---

Structure of graphical applications

• Control structure is inverted

• System has control, not the application

• System waits for user action, then calls the appropriate routine in the application.

• Can make otherwise simple programs much more complicated

• Need classes for every window and for the ‘widgets’ (GUI components) that live inside them

• Need classes for objects called ‘listeners’ that listen for signals from GUI components and perform (or trigger) actions

---

Model-View-Controller architecture

This is a very common architecture for GUI programming. In Java, particularly if listeners are written as inner classes, it can become muddled. But it's still a useful way to organise your thinking.

1. Model - the core application part

   • underlying data, functional core of application

   • registers dependent views and controllers

   • notifies views and controllers of changes to data

2. View - the graphical part of the interface

   • creates its controllers

   • displays information (about the model) to the user

   • updates itself when the model changes

   • retrieves data from the model

3. Controller - the decision-making part

   • accepts user inputs and other events

   • translates events into service requests for the model or display requests for the view

---

Events

Types of events:

• user input e.g. click on a button

• internal events e.g. timeouts

• window events e.g. expose

Example: the expose event for a window

• tells the application that part or all of that window needs redrawing

• is triggered the first time the window is displayed, and whenever it is resized, de-iconified, or uncovered

• In Java you can trigger it with a call to paintComponent()

Other important window events include mouse in, mouse out, mouse button down, mouse button up, keys pressed

---

How to handle events

Polling:

• Application has a loop (the main loop) that checks repeatedly for input or timeouts, then calls the appropriate routine.

• Examples include most (pre OS-X) Macintosh programs, Unix programs that just use basic X windows.

• Leads to a more complex application, messy interfaces to the library.

• Largely replaced by the callback mechanism.

Callbacks:

• A callback is when a routine in the application is called not from within the application, but from the library.

• The application must first tell the toolkit what events it wants to handle and which routines to call.

• Main loop and decoding of events are done by the library.

• This happens in more modern higher-level Unix GUI libraries like Xt, Motif or GTK; also the Microsoft Foundation Classes.

• In Java programming callbacks are implemented using events and event listeners.

---

GUI concepts

widget

a GUI component like a window, a push button, a label, a scroll-bar, a menu item...

pixel

a single dot on the display screen

displays are typically 800×600, 1024×768, 1280×1024 pixels

depth

the number of bits per pixel

• depth 1 = black & white

• depth 8 = 256 colours

• depth 24 = 16,777,216 colours

colour map

translation between pixel values and actual screen colours on a low-depth display

bitmap

an image one pixel deep

pixmap

an image of arbitrary depth (effectively as a two-dimensional array of pixels, although you may not be able to access them like array elements)

font

a mapping from characters to bitmaps

---

More about widgets

Widgets are ready-made low-level (and not-so-low-level) components provided by the underlying library (e.g. Motif, MFC, GTK+, Java AWT, Java Swing etc)

• a widget is a simple “interactor”

• an entity combining input and output

• knows when and how to draw itself

• maintains internal data accessible through queries

• generates callbacks to the application

Examples of widgets include:

labels separators push-buttons toggle-buttons radio buttons spin buttons scale widgets scroll-bars

text widgets text-field widgets list widgets progress bars menu-bars menus menu-items tree widgets

message boxes scrolled areas forms frames dialog boxes status bars toolbars

---

Crash course on GUI design

Before we start building them, let's spend a few minutes thinking about what we're trying to build and why.

Common user interface problems

• Not following conventions / inconsistency, e.g. single vs. double click, meaning of icons

• Too complex

  • too many buttons & icons

  • too many windows

  • too many menus, poorly named

• Inelegant - actions just don't seem right, unnatural

• Intolerant of errors

  • actions can't be reversed

  • system errors cause loss of data

• Bad documentation

  • poorly written

  • out-of-date

  • wrong

  • poorly structured

---

User interface guidelines

• Interface should follow common sense: actions should be natural, meet expectations

• Strive for consistency both within the application and with other applications and the environment

• Give feedback to the user

• Design for error

• Know your user

• Evaluate and change if necessary

• Create a conceptual model

---

Further reading

• Bertrand Meyer Object-Oriented Software Construction, 2nd Edition, Chapter 32

• Steven P. Reiss A Practical Introduction to Software Design with C++, Chapters 9-11

• Donald A. Norman The Invisible Computer and User-Centered System Design

• Jean-Marc Jézéquel, Michel Train & Christine Mingins Design Patterns and Contracts, Chapter 7

• Any book on Human-Computer Interaction (HCI).

• Anything by Donald Norman: The design of everyday things, Things that make us smart, The invisible computer... or Jakob Nielsen: Web usability...

---

The Java GUI libraries

First there was the Abstract Windowing Toolkit (AWT). A little later its drawing capabilities were extended by the Java2D API. Later still came Swing.

Most Swing components are pure Java components or so-called lightweight components. That is, they are written completely in Java. AWT components are implemented natively on each different platform that supports Java. Somewhere deep down in the implementation, there is a bridge to the system's native graphics routines. Obviously this is different on Linux, Windows, Macintosh etc. As a result, these heavyweight components look different on different platforms.

There is full documentation for all the Java GUI classes in the API documentation. The AWT classes are in the packages java.awt and the corresponding event handling classes are in java.awt.event. The Swing classes are in javax.swing with event handling in javax.swing.event. Unfortunately many of the Java GUI classes have very large and confusing interfaces so that it can be hard to figure out what are the useful bits and what parts you can safely ignore.

Java Swing (backed up by AWT) provides a rich set of GUI features including pluggable look and feel, shortcut keys, tool tips, support for assistive technologies and for localisation (or internationalisation). We won't have time to cover anything like all of it, but we'll do enough to get you started writing realistic graphical user interfaces.

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