Graphical User Interfaces GUIs

1
Graphical User Interfaces (GUIs)

• Rick Mercer

2
GUIs

• Most applications have graphical user interfaces
  to respond to the user's

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 graphical
  components
• windows, buttons, text fields, and text areas

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

• Have a class extend javax.swing.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
• Layout Set up the GUI in the constructor
• See program on the next slide

6
Can you see the "window"?

• Code to tell a window to show itself
• // Use any javax.swing component
• import javax.swing.
• public class FirstGUI extends JFrame
• public static void main(String args)
• JFrame aWindow new FirstGUI()
• aWindow.setVisible(true)
• public FirstGUI()
• layoutGUI() // The first of three things to
  do
• private void layoutGUI()
• setTitle("Graffiti")
• setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
  

7
Some JFrame messages

• Set the size and location of the window with
• setSize(200, 150) // 200 pixels wide, 150
  pixels tall
• setLocation(75, 40) // left 75, down 40

8
Building Graphical Components

• Add these three graphical components to the
  "content pane" of the JFrame
• private JLabel aLabel
• new JLabel("Change with
  setText(String)")
• private JTextArea textEditor
• new JTextArea("You can edit this text ")
• private JButton clickMeButton
• new JButton("Nobody is listening to me")

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
• Can use a javax.swing.JPanel to store a
  collection of graphical components to be treated
  as one

10
Add components to a window

• Add the previously constructed components to one
  of the five areas of a JFrame
• // Add components to the content pane
• Container cp this.getContentPane()
• cp.add(aLabel, BorderLayout.NORTH)
• cp.add(textEditor, BorderLayout.CENTER)
• cp.add(clickMeButton, BorderLayout.SOUTH)

11
Get Word Wrap

• Type into the JTextArea to see it will not wrap
  text as the default
• Then add these two messages
• textEditor.setLineWrap(true)
• textEditor.setWrapStyleWord(true)

12
Other useful JTextArea methods

• textEditor.setBackground(Color.CYAN)
• textEditor.setText( "first line" "\n"
• "second line" "\n"
• "3rd line")
• textEditor.setEditable(false)

13
JPanel

• Use a JPanel to store more than one component
  treated as one
• Methods
• add(Component) to add components in flow layout
• then you can add the JPanel to the JFrame's
  content pane

14
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

15
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 JTextField object with focus knows when the
  user presses the enter key 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

16
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
• We write code to respond to the above events in
  actionPerformed methods
• This requires a class that implements the
  ActionListener interface

17
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

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

20
Handling Events

• Add a private inner class that can listen to the
  event that the component generates
• Your class must implement a listener interface to
  guarantee that it has the expected methods First
  up ActionListener
• In the constructor register an instance of the
  listener so the component can later send messages
  (we do not see this) 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)

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

• // 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)
• JOptionPane.showMessageDialog(null, "Button
  clicked!")
• // 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()
• clickMeButton.addActionListener(aListener)

Caution this is easy to forget. Not a compile
time error, but Eclipse warns
23
JTextArea

• Use a JTextArea to store the toString version of
  DiceTray
• Methods
• void append(String) adds text to JTextArea
• String getText() returns text in JTextArea
• void setText(String) set the text in JTextArea
  (removing old strings)