cs358 Lecture Notes
Week 3, Tuesday

Java GUI programming

Inheritance
-----------

In order to understand GUI programs, it helps to know a little about
object-oriented programming and inheritance.

Inheritance is a way to extend and existing class (add a new instance
variable or method, or modify and existing method)...

       ... without having to modify the original (parent) class!

This is important for code reuse, and because it makes it possible
to write new classes based on built-in classes.

The Java keyword "extends" is used to name the parent class:

import java.awt.*;

public class DrawableRectangle extends Rectangle {

  public void draw (Graphics g) {
    g.drawRect (x, y, width, height);
  }
}

The new class DrawableRectangle has all the instance variables
and methods of the built-in Rectangle class (see the documentation).

http://java.sun.com/products/jdk/1.1/docs/api/packages.html

In addition, it now has a draw method, which might be
invoked:

	DrawableRectangle dr = new DrawableRectangle ();
	dr.x = 10;  dr.y = 10;
	dr.width = 200;  dr.height = 300;
	dr.draw (g);

where g is the name of a Graphic object we got from somewhere.


GUI Components
--------------

Component is the generic name for any of the common GUI elements:

Button:

Canvas: area of a window used for drawing

Checkbox:  array of two-state buttons

Choice:  array of buttons where only one may be selected

Label: A simple piece of text

List:

Scrollbar:

ScrollPanel:

TextArea:

TextField:


Containers
----------

There are also several classes that contain Components:
they all inherit from the Container class...

Frame:  a window that contains components

Dialog: a special kind of window used for dialog boxes

Panel: an invisible container that goes into a Frame
       and contains Components-- usually used to control
       the arrangement of components within the window

Finally, there is a class of objects called LayoutManagers
that are used to control the arrangement of components within
a panel.


How do you make things happen?
------------------------------

For every GUI component, there are one or more Listeners,
which are objects that provide methods for handling events.

An event is something the user does, like pressing a button
or typing something in a text field or wiggling a scroll bar.

The Event is also an object that is passed to the Listener
as an argument, and that contains information about what
happened (what letter the user typed, or where on the screen
the mouse was clicked).

The method inside the Listener is what you provide to specify
the behavior of the component.

Different components have different Listeners for the various
things that can happen.  A component can have more than one
Listener, or sometimes a single Listener that handles a
variety of Events.


Usual sequence of events for creating a window
----------------------------------------------

Create the Frame.

Create all the GUI components.

Attach Listeners to the components.

Choose a LayoutManager for the Frame.

Create some Panels and add them to the Frame.

Possibly create LayoutManagers for the Panels.

Add the GUI components to the Panels.

Make the Frame visible.


What next?
----------

After that, you just sit and wait for the user to do
something.  Each event will trigger one of the Listeners,
which will cause some of your code to execute.

Once the listener completes, we go back to waiting.

Event-driven-programming is a strange animal, and it will
require you to develop new coding and debugging skills.

Sticking print statements into Listeners is a pretty common
first step.

Drawing state-transition diagrams is a useful coding tool.


Model-Controller-View Pattern
-----------------------------

A pattern is a general way of writing programs (somewhere
between an approach and a paradigm :)

A common pattern for GUIs is to have three classes:

1) Model: an object that encapsulates the state and methods
   of a model of a real-world system.  For example, a Lake
   model might have instance variables like

   oxygen level, phosphorous level, volume, flow in, flow out

   And methods like

   increaseFlowIn, advanceOneTimeStep, addPhosphorous,
   getOxygenLevel

2) View: a window (usually inherited from Frame) that displays
   some representation of the Model, and provides GUI components
   that allow the user to invoke some or all of the Model's
   methods

3) Controller: a liason between the View and the Model.  In
   my example, the Controller is trivial -- all it does is
   create the objects.

   But in a better design the Controller completely isolates
   the Model from the View, facilitating such trickiness as
   having multiple views of the same Model.


Let's go to the code!