The Graphic User Interface

1
The Graphic User Interface

• Introduction
• john.murray_at_sunderland.ac.uk
• COM379PT

2
Java and GUIs

• Java Provides two packages for the creation of
  GUIs
• java.awt
• javax.swing
• These include everything you need from buttons,
  menus, labels, layout managers and more.
• Swing provides a more advanced implementation
  than AWT

3
AWT vs Swing

• AWT Abstract Windowing Toolkit provides ALL the
  necessary components to construct a complete
  working GUI.
• Swing has replaced many of the components in the
  AWT package to provide not only better looking
  components but fixes many of the problems with
  the AWT package

4
Advantages

• Swing
• Swing is Faster
• Swing is more Complete
• Swing is being actively maintained
• AWT
• AWT is supported on older, browsers so Applets
  written in AWT will run on more browsers
• The Java ME, which is used for phones, TV set top
  boxes, PDAs, etc, uses AWT, not Swing

5
Construction of GUI
GUI Container (Layout Manager)
Objects (Buttons, Tables etc)
Event Handling (Action Listeners)
Interface to Application
6
GUI Container

• This is the holder for all the items on the
  screen, called a Frame, or JFrame in Swing.
• Items are added to this container
• JFrame mainJFrame new JFrame(Example1)
• This creates a frame that components can be added
  to.

7
Layout Manager

• Java has several layout managers that vary from
  basic to complex (however their coding complexity
  also increases)
• BoxLayout x, y axes
• FlowLayout - Horizontal
• BorderLayout North, South, East, West
• GridLayout In a x,y Grid
• GridBagLayout More complex version
• Others

8
Applying Layout Manager - BorderLayout

• Apply the layout manager to the container,
  JFrame, JPanel etc
• mainJFrame.getContentPane().setLayout(new
  BorderLayout())
• We can now add items to this container specifying
  within the layout where we want them.

9
Using the BorderLayout

• BorderLayout has 5 locations
• North
• South
• East
• West
• Center

• We access these with the static Strings
• BorderLayout.NORTH
• BorderLayout.SOUTH

10
Adding Object - Buttons

• Now we can add items to our JFrame.
• JButton northButton new JButton(North)
• mainJFrame.getContentPane().add(northButton,
  BorderLayout.NORTH)
• This will add a button to the north region of the
  screen.
• The same is done for other objects, labels,
  tables, images etc.

11
Event Handling

• Now we have added our objects we need to assign
  an action listener.
• An Action Listener will monitor our objects and
  inform the system when something happens to a
  specified item.
• E.g. if we click on our button we want some form
  of action to take place.

12
Event Handling The Window Listener

• First of all we need to add a listener to our
  main window
• So the system knows when we are performing
  actions on the window itself. E.g. Closing the
  window
• mainJFrame.addWindowListener(new WindowAdapter()
• public void windowClosing(WindowEvent e)
• System.exit(0)
• )

13
The Window Adapter

• The WindowAdapter is an abstract class. And has
  many methods that can be called.
• windowLostFocus()
• windowClosing()
• windowIconified()
• windowOpened()
• More
• So these can be used to perform specific window
  actions

14
Action Listeners - Events

• Class must implement ChangeListener to gain
  access to its abstract methods
• Method stateChanged(ChangeEvent e) must be
  implemented.
• if(e.getSource() northButton)
• // Do something

15
Change Listeners

• Finally, in order for the system to know which
  items have to be monitored we call the method
  .addChangeListener() on the items
• northButton.addChangeListener(this)

16
Complete

• This will now give us a working GUI that can
  interface to the foundations of our actual
  program.
• This is the View part of the MVC Pattern
• The GUI should not have data manipulation methods
  it should just be an interface between the user
  and the actual program.