C SC 160 Chapter 14: Event-Driven Programming and GUIs
major resource: An Introduction to Object-Oriented Programming with Java, fourth edition, Wu, McGraw Hill, 2006

[ previous | schedule | next ]

Overview

• intro to GUIs (Graphical User Interface) and events
• Java classes for GUI programming
• the javax.swing package, aka the Swing classes
• concepts and techniques for event-driven programming

intro to GUIs and events

• GUI = Graphical User Interface
• very brief history
• what an event is
• why events and GUI go together
• interaction paradigms: QWERTY, horseless carriage
• Marshall McLuhan: "We look at the present through a rearview mirror. We march backwards into the future."
• i.e., new devices are interpreted in terms of existing paradigms.

Software architecture for GUI apps: MVC

• software architecture refers to components comprising the app and their relationships
• the Model-View-Controller (MVC) software architecture is desirable
• a Model component represents underlying functionality, like the ClickCounter class from earlier
• a View component is a visual representation of that functionality, the visible GUI
• a Controller component manipulates the other two, usually in response to a user input event
• MVC conceived during Smalltalk (Alan Kay) language/environment development
• key is separating model (functionality) from the other two
• major advantage: can apply alternate or multiple views to same functionality
• examples we have seen so far:
  • the click counter app:
    • model: ClickCounter class
    • view: ClickCounterView class
    • controller: the private incButtonListener, decButtonListener, and resetButtonListener classes
  • the adding machine app:
    • model: Accumulator class
    • view: AddingFrame class
    • controller: the private Listener classes
  • the Mastermind app:
    • model: MMGame class
    • view: Mastermind class
    • controller: the private Listener classes

Java classes for GUI programming

• originally java.awt packages (aka AWT classes)
• AWT = Abstract Windowing Toolkit
• AWT classes implemented using objects of underlying OS (e.g. Windows, MacOS, OS/2)
• AWT supplanted by javax.swing packages (aka Swing classes)
• Swing classes implemented in Java so look/feel is consistent and OS-independent
• class names are similar: AWT's Button --> Swing's JButton
• AWT retained for compatibility
• many "behind the scenes" AWT classes are essential
• recommend using Swing for visual elements and not mixing in AWT elements

The Swing classes

• Main application window class is defined as subclass of JFrame
• Frequently used GUI component classes include:
  • JButton a clickable button
  • JLabel a decorative (non-interactive) element
  • JTextField a box into which one line of text can be displayed/entered
  • JTextArea a box into which multiple lines of text can be displayed/entered
  • JMenuBar the menu bar that typically extends across the top of the window
  • JMenu a menu heading (e.g. File, Edit, Help) displayed on the menu bar
  • JMenuItem a menu item (e.g. New, Open, Close) associated with a menu
• There are dozens of others, check the documentation

Anatomy of a simple GUI app

• Define the "view", the main application window class, as a subclass of JFrame
• this is commonly referred to as "the frame"
• declare the GUI components as instance variables
• create and configure the GUI components in the constructor
• add the GUI components to the frame's content pane
• use layout managers to flexibly place components in the frame
• associate "responsive" GUI components (e.g. buttons) with controller objects (see below)
• Define the "controller" as private class(es) inside the frame class
• the controller class is defined to "implement an event listener interface"
• each term in the quoted phrase has distinct meaning in Java
• interface is like a class except it consists only of declared methods
• implements forces the controller class to define the method(s) it "inherits" from the interface
• the java.awt.event package includes a hierarchy of interfaces for "listening to events"
• a typical "controller" will be associated with a button. Such a controller:
  • is defined as a private class that implements ActionListener
  • must define one method: public void actionPerformed(ActionEvent e)
  • this method defines how the app will respond when the corresponding button is clicked
  • it manipulates the model component and GUI as appropriate
  • as an "inner class", the controller has access to the GUI components (frame's instance variables)
• Define the "model" (the class providing functionality) as a separate class. It must exist and be at least "stubbed in" (compilable) before the GUI can compile.
• You need a main() somewhere to initiate execution. This can either defined either in a separate class (as is done in the adding machine app) or in the frame class (as is done in the mastermine app).

Examples