Event Driven Programming with Graphical User Interfaces GUIs

1
Event Driven Programming with Graphical User
Interfaces (GUIs)

• 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 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

• Import all four as follows or javax.swing.
• import javax.swing.JFrame
• import javax.swing.JButton
• import javax.swing.JLabel
• import javax.swing.JTextField
• Have a class extend JFrame
• Your new class inherits all the methods and
  instance variables for putting a window on the
  computer
• Add a main method to call the constructor
• Set up the GUI in the constructor
• See program on the next slide

6

• Code to tell a window to show itself
• // Use any Swing component without qualifying
• import javax.swing.
• public class FirstGUI extends JFrame
• public static void main(String args)
• JFrame aWindow new FirstGUI()
• public FirstGUI()
• setTitle("Graffiti")
• setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
  
• this.setVisible(true)

7
Some JFrame messages

• Set the size of the window with
• 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

8
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 your JFrame

9
Add components to a window

• Add the previously constructed components to one
  of the five areas of a JFrame
• // Add three components to the content pane
  part
• // of the JFrame. this. can be used (optional)
• this.add(clickMeButton, BorderLayout.NORTH)
• add(aLabel, BorderLayout.CENTER)
• add(textEditor, BorderLayout.SOUTH)

10
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

11
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

12
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 eent driven program can respond to many things
• mouse clicks, mouse movements
• clicks on hyperlinks, buttons, menu items
• Users pressing any key, selecting a list item

13
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

14
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, hyperlinks
  selected

15
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
16
A Java GUI

• Preview for writing a GUI
• 1. Add imports such as import java.awt.
• 2. Have a class that extends JFrame (your class
  IS-A JFrame)
• 3. Add main to construct the instance of itself
  and show it
• 4. Add instance variables include graphical
  components that will be needed by other methods
  in the class
• 5. Lay out a GUI and initialize instance
  variables in the constructor

17
The first 5 steps

• import java.awt.BorderLayout
• import java.awt.Container
• import javax.swing.JButton
• import javax.swing.JFrame
• public class SingleButtonFrame extends JFrame
• public static void main(String args) //
  Construct an instance of this class and show it
• SingleButtonFrame aWindow new
  SingleButtonFrame()
• aWindow.setVisible(true)
• // To be "listened" to
• private JButton aButton
• public SingleButtonFrame()
• // Lay out the GUI, initialize the instance
  variable
• setSize(200, 100)
• setTitle("Listen to button")
• setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
  

18
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)

19
Handling Events

• 6. 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
• 7. In the constructor of the class that is a
  JFrame, 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)

20
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

21
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

22
Have a class that implements ActionListener

• //6. 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!")
• // 7. In the constructor of the class that
  extends JFrame,
• // 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. Not a compile
time error, but Eclipse warns
23
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

24
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