GUIs and Events

1
GUIs and Events

• Rick Mercer

2
Event-Driven Programming with Graphical user
Interfaces

• Most applications have graphical user interfaces
  to respond to user desires

3
A Few Graphical Components

• A Graphical User Interface (GUI) presents a
  graphical view of an application to users.
• To build a GUI application, you must
• Have a well-tested model that will be used
• Make graphical components visible to the user
• ensure the correct things happen for each event
• user clicks button, moves mouse, presses enter
  key, ...
• Let's first consider some of Java's GUI
  components
• windows, buttons, and text fields

4
Classes in the swing package

• The javax.swing package has components that show
  in a graphical manner
• JFrame window with title, border, menu,
  buttons
• JButton A component that can "clicked"
• JLabel A display area for a small amount of
  text
• JTextField Allows editing of a single line
  of text

5
Get a window to show itself

• Code to tell a JFrame to show itself
• // Construct window with a title
• JFrame aWindow new JFrame("Graffiti")
• // Make sure the program terminates when
  window closes
• aWindow.setDefaultCloseOperation(JFrame.EXIT_ON
  _CLOSE)
• aWindow.setVisible(true)

6
Some JFrame messages

• Set the size of the window with
• aWindow.setSize(220, 100)
• The first int is the width of the window in
  pixels
• the second int is the height of the window in
  pixels

7
Building components

• So far we have an empty window
• Let us add a button, a label, and an editable
  line
• First construct three graphical components
• JButton clickMeButton
• new JButton("Nobody is listening to me")
• JLabel aLabel
• new JLabel("Button above, text field below")
• JTextField textEditor
• new JTextField("You can edit this text ")
• Next, add these objects to a window object

8
Add components to a window

• Add the previously constructed components to one
  of the five areas of a JFrame
• aWindow.add(clickMeButton, BorderLayout.NORTH)
  
• aWindow.add(aLabel, BorderLayout.CENTER)
• aWindow.add(textEditor, BorderLayout.SOUTH)

9
The 5 areas of BorderLayout

• By default, JFrame objects have only five places
  where you can add components a 2nd add wipes out
  the 1st
• This can be modified to other layouts
• Or add other containers that contain other
  containers
• These five areas will do for now

10
So what happens next?

• You can layout a real pretty GUI
• You can click on buttons, enter text into a text
  field, move the mouse, press a key
• And NOTHING happens
• So lets make something happen

11
Java's Event Model

• Java has a way to let the operating system notify
  graphical components of user interaction
• Button objects are notified when the user clicks
  it
• A text field object with focus knows when the
  user enters text and your program can respond
• A menu item can know that a user selected it
• An event driven program responds to many things
• mouse clicks, mouse movements
• clicks on hyperlinks, buttons, menu items
• Users pressing any key, selecting a list item,
  moving a slider bar,

12
Example Action Events

• The buttons, text fields, and menu items do not
  perform the actions
• Instead JButton, JTextField, JMenuItem objects
  send actionPerformed messages to other objects,
  for example
• We write code to respond to the above events in
  actionPerformed methods
• This requires a class that implements the
  ActionListener interface, for example

13
Event Driven Program with GUIs

• Key elements of an event-driven GUI
• Graphical components
• The screen elements that a user manipulates with
  the mouse and keyboard JFrame JLabel JButton
  JScrollbar JMenuItem JTextField JTextArea JList
  ...
• Layout managers
• Govern how the components appear on the screen
• Examples FlowLayout GridLayout SpringLayout
• Events
• Signal that a user interacted with the GUI
• Examples mouse clicks, keys pressed, hyperlink
  selected, time expires on a timer,

14
Java's Event Model
JFrame
1 Layout Graphical Components JFrame JButton
4 Users interact with these graphical components
JButton
JTextField
JMenuItem
3 You register objects that waits for messages
from graphical components addActionListener
2 You write classes that implement the correct
interface ActionListener
Listener
Listener
Listener
15
A Java GUI

• Preview for writing a GUI with events
• 1. Have a class that extends JFrame (your class
  IS-A JFrame)
• 2. Add main to start up the GUI (could be
  separate file)
• 3. Add instance variables include graphical
  components that will be needed by two or more
  methods (a JTextField, Timer, or JMenuItem will
  be needed by listeners later
• 4. Lay out a GUI and initialize instance
  variables in the constructor

16
The first 4 steps

• import java.awt.
• import javax.swing.
• public class SomeEvents extends JFrame
• public static void main(String args)
• // Construct an instance of this class and
  show it
• SomeEvents window new SomeEvents()
• window.setVisible(true)
• // A graphical component to be "listened" to
• private JButton aButton
• public SomeEvents()
• // Lay out the GUI, initialize instance
  variables
• // Have this object send some messages to
  itself
• setSize(200, 100)
• setTitle("Some Events")
• this.setDefaultCloseOperation(JFrame.EXIT_ON_C
  LOSE)

17
No one is "Listening"

• Okay, now we have a GUI
• but when run, nothing happens
• Wanted An object to listen to the button that
  understands a specific message such as
• actionPerformed
• Also need to tell the button who it can send the
  actionPerfomed message to
• Register the listener with this method
• addActionListener(ActionListener al)

18
Handling Events

• 5. Add a private inner class that can listen to
  the event that the graphical component will
  generate
• Your class must implement a listener interface to
  guarantee that it has the expected methods First
  up ActionListener
• 6. Register the instance of the listener so the
  component can later send messages to the
  listeners actionPerformed method
• events occur anytime in the future--the listener
  is listening (waiting for user generated events
  such as clicking a button or entering text into a
  text field)

19
ActionEvent / ActionListener

• When a JButton object is clicked, it constructs
  an ActionEvent object and sends it to the
  actionPerformed method of its listeners
• To register a listener to a JButton, you need to
  send an addActionListener message to button
• public void addActionListener(ActionListener al)
• You need an ActionListener object
• But there is no ActionListener class!
• Solution Use Javas interface mechanism
• Your class can be treated as if it were an
  ActionListener

20
Inner class

• Add an inner class
• inner classes have access to the enclosing
  classes' instance variables
• make it private since no one else needs to know
  about it
• otherwise you need a separate class that gets the
  graphical components passed as an argument

21
Have a class that implements ActionListener

• // 5. inner class to listen to events
• private class ButtonListener implements
  ActionListener
• // No constructor needed here
• // Must have this method to implement
  ActionListener
• public void actionPerformed(ActionEvent
  anActionEvent)
• System.out.println("Button was clicked.")
• // 6. Register the instance of the listener so
  the
• // component can later send messages to that
  object
• ButtonListener aListener new
  ButtonListener()
• aButton.addActionListener(aListener)

Caution this is easy to forget. It is an error
no one will tell you about
22
Polymorphism through interfaces

• Can have many ActionListener objects
• Any class that implements ActionListener
• may need a different class for every button and
  text field in the GUI
• But they all can be treated as ActionListener
  objects
• They can be passed as arguments to this method
• public void addActionListener(ActionListener ae)
• Adds the specified action listener to receive
  action events from JButtons, JTextFields,
• Parameters aListener - an instance of a class
  that implements the ActionListener interface

23
Assignment Compatible

• Can pass instances of classes implementing an
  interface to the interface type parameter
• addActionListener(ActionListener anyListener)
• addActionListener(new ButtonListener())
• addActionListener(new TextFieldListener())
• ButtonListener and TextFieldListener must
  implement interface ActionListener

24
Listen to a JTextField

• Add to the current GUI
• Add a JTextField so when the user enters a
  number, show it's square root (in the same place
• methods getText, setText, parseDouble, sqrt
• This example is in SomeEvents.java on the Code
  Demo Page

25
Demo javax.swing.Timer

• Count down to 10
• A timer is contructed and begun like this
• timer new Timer(1000, new TimerListener())
• timer.start()
• Timers need an ActionListener argument
• See TimerExample.java on Code Demos page
• private class TimerListener
• implements ActionListener
• public void actionPerformed(ActionEvent ae)