13 gui development

GUI Development

OOSSE - Programming with Java
Lecture 12

Dec 21, 2012 OOSSE - Java Lecture 12 1

Objectives
In this lecture, we will
• Introduce the Abstract Window Toolkit
• Introduce the Java Foundation Classes
• Discuss containers and layout managers
• Introduce events and event handling
• Introduce menus
• Introduce dialogs
• Discuss mouse events


The Abstract Windowing Toolkit AWT
• The Abstract Windowing Toolkit provides a set of GUI
components in the package java.awt
• The AWT supports the most common user interface
idioms
• The AWT makes use of the GUI components of the
underlying platform
– Has the look and feel of the native windowing toolkit
– The same AWT GUI may have a different appearance on
different platforms
• With J2SE came Swing components that allow a uniform
look and feel to be specified across different platforms
– Most Swing components are pure Java components


The Java Foundation Classes JFC
• The Java Foundation Classes form a set of classes for
cross platform GUI development
• The Swing GUI components are part of JFC
– They exist in the package javax.swing
– Swing makes use of some of the classes found in AWT
• Swing provides alternatives to most of the GUI
components found in AWT
– For examples JButton is a Swing alternative to Button found
in AWT
– Swing GUI components are more portable and flexible than
the original AWT GUI components and generally preferred


Composite Design Pattern
• GUI components need to be displayed somewhere
– A container manages a set of components
• Java makes use of the Composite Design Pattern
– A component is the super class
– A container IS A component but HAS A collection of
components


Layout Manager
• How are the components positioned within a container?
• How do you want them to be positioned?
• Java allows the positioning to be decoupled from the
container
– The container HAS A Layout Manager
– A suitable layout can be plugged in


JFrame – A Swing Container
• JFrame is an example of a top level swing container
– As are JDialog, JWindow and JApplet
• A top level swing container contains an instance of
JRootPane
• JRootPane extends JComponent and contains:
– A Component called the Glass Pane
– A JLayeredPane
• A JlayeredPane contains:
– A Container called the ContentPane and accessible via the
getContentPane method of the top level swing container
– An optional JMenuBar


Using JFrame

JFrame theFrame = new JFrame("Testing JFrame");
theFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
theFrame.setSize(300,100);
theFrame.setVisible(true);


Extending the JFrame class
• Normally JFrame is used as a starting point:

import java.awt.*;
import javax.swing.*;

public class PeteFrame extends JFrame
{
private JButton b1;
private JLabel l1;

public PeteFrame (String sTitle)
{
super (sTitle);
Container contentPane;
contentPane = getContentPane();
contentPane.setLayout(new FlowLayout());


Extending the JFrame class (continued)

b1 = new JButton("A button");
l1 = new JLabel("this is a label");

contentPane.add(l1);
contentPane.add(b1);

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setSize(300,100);
this.setVisible(true);

}
}


Closing JFrames
• It is possible to choose what happens when a JFame is
closed
• The setDefaultCloseOperation is used
• It takes a single argument and suitable constants are
defined in JFrame:
– DO_NOTHING_ON_CLOSE
– HIDE_ON_CLOSE
– DISPOSE_ON_CLOSE
– EXIT_ON_CLOSE
• For example form the previous slide:
– this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


Layout Manager
• The positions of the components added to a container is
determined by a layout manager
• In the previous example a flow layout manager was used
– contentPane.setLayout(new FlowLayout());

• Some examples of existing layout managers are:
– FlowLayout – left to right and horizontally centred
– BorderLayout – NORTH, SOUTH, EAST, WEST and
CENTER
– GridLayout - evenly spaced rows and columns

– GridBagLayout
– CardLayout


BorderLayout Example
import java.awt.*;

public class BorderFrame extends JFrame
{
private JButton n,s,e,w,c;
public BorderFrame (String sTitle)
{
super (sTitle);
contentPane.setLayout(new BorderLayout());
n = new JButton("North");
s = new JButton("South");
e = new JButton("East");
w = new JButton("West");
c = new JButton("Centre");


BorderLayout Example (continued)

contentPane.add(n,BorderLayout.NORTH);
contentPane.add(s,BorderLayout.SOUTH);
contentPane.add(e,BorderLayout.EAST);
contentPane.add(w,BorderLayout.WEST);
contentPane.add(c,BorderLayout.CENTER);

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setSize(300,300);
this.setVisible(true);

}
}


GridLayout Example
• Code fragment:
contentPane.setLayout(new GridLayout(4,3,2,2));
buttons = new JButton [12] ;
for (int i = 1; i < 10; ++i)
{
buttons[i] = new JButton (Integer.toString(i));
contentPane.add(buttons[i]);
}
buttons[10] = new JButton("*");
contentPane.add(buttons[10]);
buttons[0] = new JButton("0");
buttons[11] = new JButton("#");


JPanel
• The easiest way to achieve more complicated layouts is to
make use of JPanel
• JPanel is a simple container; a rectangular region
– An instance of JPanel can use a specific layout manager
– Components can be added to the panel

• How could you build this GUI?


Using JPanel – Code Fragment
• First set up the JPanel and add components using the
GridLayout:
numPanel = new JPanel();
numPanel.setLayout(new GridLayout(4,3,2,2));
buttons = new JButton [12] ;
for (int i = 1; i < 10; ++i)
{
buttons[i] = new JButton (Integer.toString(i));
numPanel.add(buttons[i]);
}
buttons[10] = new JButton("*");
numPanel.add(buttons[10]);
buttons[0] = new JButton("0");
buttons[11] = new JButton("#");


Using JPanel – Code Fragment
• Now add the panel, a text field and a label to a frame
using the Border Layout manager:

contentPane.setLayout(new BorderLayout());

number = new JTextField();
statusLabel = new JLabel("Ready for number");

contentPane.add(number,BorderLayout.NORTH);
contentPane.add(statusLabel,BorderLayout.SOUTH);
contentPane.add(numPanel,BorderLayout.CENTER);


Event Handling


Events
• We know how to add GUI components but at the moment
there is little or no user interaction
• Java GUIs are event driven
– Any user interaction with a GUI component generates an
event
– An application handles the events
• An application must explicitly listen for events
• For example a JButton generates an event when it is
clicked
• A JButton can have an ActionListener added
• The ActionListener has a method called actionPerformed
that is invoked when the button is clicked


JButton and the ActionListener Interface
• Java makes use of the following design pattern to allow
application specific code to be added to handle an event


Adding an ActionListener
import java.awt.*;
import java.awt.event.*;

public class MyFrame extends JFrame{
private JButton stopButton;
…
public MyFrame (String sTitle)
{
…
stopButton = new JButton("Stop");
stopButton.addActionListener( new StopButtonListener());
contentPane.add(stopButton);
…


Building the ActionListener
• The ActionListener interface specifies one method that
must be implemented to realize the interface
class StopButtonListener implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
System.exit(0);
}
}
• Note the ActionEvent that is passed to the method
– This describes the event in more detail
• In this example the application exits when the button is
clicked


Events
• The ActionEvent e passed into the actionPerformed
method contains information about the event
• One piece of information is the component that generated
the event
– This is obtained using the getSource method
– e.getSource( )
• This is useful when the same event handler is used for
more than one component :
if (e.getSource() == buttonOne)
{…}
else if (e.getSource() == buttonTwo)
{…}


Using Inner Classes
• If the event handler needs to access member variables
and member methods of a class then it is convenient to
make it an inner class
– An inner class has access to the enclosing class


Using an Inner Class
public class PresenterFrame extends JFrame {
String [] list; final int max; int pos = 0;
JLabel title; JButton next; JButton prev;

public PresenterFrame(String sTitle, String [] theList) {
super(sTitle);
…
}
class DirectionListener implements ActionListener
{
public void actionPerformed(ActionEvent e){
if (e.getSource() == next) { if (pos < max) ++pos; }
else if (e.getSource() == prev) {if (pos >0) --pos; }
title.setText(list[pos]);
}
}
}


JTextField
• JTextField can be used for simple text input
• JTextField has the following constructors:
– JTextField()
– JTextField(“Initial text”)
– JTextField(10)
– JTextField(“name”, 30)
• Two of the most useful methods are:
– void setText(String)
– String getText()
• The alignment of text within the component is set using:
– setHorizontalAlignment (int)
– JTextField.LEADING, JTextField.CENTER, and
JTextField.TRAILING


JTextField and ActionListeners
• A JTextField component handles much of the user
interaction
• When the user hits enter the component generates an
event
– an ActionEvent
• An inner class is normally written to implement the
ActionListener interface
– The actionPerformed method handles the event


JRadio
• JRadioButtons raise ActionEvents and can be listened for
just like JButtons
• JRadioButtons can be added to a group so that only one
of the buttons can be selected at a time
• Text can be associated with a JRadioButton
– r1.setActionCommand("radio one");
– and retrieved form an ActionEvent
– e.getActionCommand()
• How would you generate:


JRadio – Sample Code
r1 = new JRadioButton("one");
r2 = new JRadioButton("two");
…
r1.setActionCommand("radio one");
r2.setActionCommand("radio two");
…
ButtonGroup group = new ButtonGroup();
group.add(r1); group.add(r2);
…
r1.setSelected(true);
JPanel radioPanel = new JPanel(new GridLayout(0, 1));
radioPanel.add(r1);
radioPanel.add(r2);
…


JRadio – Sample Code
RadioListener rad = new RadioListener();
r1.addActionListener(rad);
r2.addActionListener(rad);
…
contentPane.add(radioPanel,BorderLayout.WEST);
contentPane.add(radioStation,BorderLayout.EAST);
…
}
class RadioListener implements ActionListener
{
{
radioStation.setText(e.getActionCommand());
}
}


Menus
• A menu can be added to the top of a JFrame using a
JMenuBar object
• Alternatively a pop up menu can be created using
JPopupMenu
• In either case two related classes are useful
– JMenu and JMenuItem
• Again the composite design pattern is used:
– a JMenu IS A JMenuItem but
– a JMenu also HAS A collection of JMenuItems
• A JMenuBar HAS A collection of JMenus
• A JPopupMenu HAS A collection of JMenuItems


Creating a Menu
• First create an instance of JMenuBar
• Then create one or more JMenu objects
– These will be added to the JMenuBar
• For each JMenu create the required JMenuItems and add
them to the JMenu
• Add the JMenu objects to the JMenuBar
• Add the JMenuBar to the JFrame using the setJMenuBar
method

• Creating a pop is very similar but the JMenu items are not
required


Menus and Events
• Menus raise events when they are selected
– ActionEvents
• The events can be listened for using an ActionListener in
a similar way to JButton events


Dialogs
• A dialog is typically used for data entry
– a dialog pops up,
– the user enters data,
– the dialog disappears,
– the application uses the data
• A dialog provides context for data entry and closure when
used in a modal way
• Dialogs can be modal or modeless
• Java provides the class JDialog as the starting point for
building dialogs
• An application shows an instance of a dialog
– Delegation methods are used to retrieve data from the dialog


Sample JDialog Code
• Extending the dialog class:
public class MyNameDialog extends JDialog
{
JTextField name ;
MyNameDialog(String sTitle, JFrame owner)
{
super (owner, sTitle, true);
name = new JTextField(20) ;
…
}
public String getName()
{
return name.getText() ;
}
{
dispose();
}
}


Sample JDialog Code
• Constructiong the dialog:
dlg = new MyNameDialog("Name Dialog", PeteFrame.this);

• Invoking the dialog in an inner ActionListener class within
the PeteFrame extension of JFrame
{
dlg.setVisible(true);
l1.setText(dlg.getName() );
}


JOptionPane
• JOptionPane provides support for several simple and easy
to use pre-defined dialogs
• The dialogs can be displayed without instantiating the
class
• JOptionPane has many static methods such as:
– showMessageDialog
– showConfirmDialog
– showInputDialogOptionDialog
• Some, such as the confirm dialog, have a return value that
can be checked with a simple if others do not
• There are numerous overloaded versions of the methods
– See the sun documentation for further details


JOptionPane – Code Sample
• Using JOptionPane to confirm an action:

{
if (JOptionPane.showConfirmDialog(null,"Do you want to stop?",
"Stopping the Application",
J OptionPane.OK_CANCEL_OPTION )
== JOptionPane.OK_OPTION )
{
System.exit(0);
}
}


Mouse Events
• When a JButton is pressed only one event occurs
– an ActionEvent
– the ActionListener interface only specified 1 method
• A mouse is capable of generating several different types
of event
– Mouse click, mouse press, mouse release, mouse move …
• The mouse moves very frequently and responding to each
event associated with movement may be too expensive
for many applications
• Java provides:
– A MouseListener that is associated with mouse actions
– A MouseMotionListener that is associated with movement


The MouseListener Interface
• The MouseListener interface caters for possible actions
associated with a mouse:
public interface MouseListener
{
void mouseClicked(MouseEvent event);
void mousePressed(MouseEvent event);
void mouseReleased(MouseEvent event);
void mouseEntered(MouseEvent event);
void mouseExited(MouseEvent event);
}
• Not all of these may be of interest in an application
– BUT to implement an interface all methods must be implemented
– Java introduces the MouseAdapter class to make life easier


The MouseAdapter Class
• The MouseAdapter class implements all the methods in
the MouseListener interface with do nothing methods
• This class can be used as the base of mouse event
handler classes that then only need to override the
methods of interest
public class MouseAdapter implements MouseListener
{
public void mouseClicked(MouseEvent event) { }
public void mousePressed(MouseEvent event) { }
public void mouseReleased(MouseEvent event) { }
public void mouseEntered(MouseEvent event) { }
public void mouseExited(MouseEvent event) { }
}


The MouseMotionAdapter Class
• The MouseMotionAdapter class implements all the
methods in the MouseMotionListener interface with do
nothing methods
• This class can be used as the base of mouse event
handler classes that then only need to override the
methods of interest
public class MouseMotionAdapter implements MouseMotionListener
{
public void mouseMoved(MouseEvent event) { }
public void mouseDragged(MouseEvent event) { }
}


An Anonymous MouseListener
• Mouse events can be handled using an anonymous class
– The anonymous class extends the MouseAdapter class rather than
implementing the MouseListener interface directly
public class MyPanel extends JPanel
{
public MyPanel ( )
{
…
addMouseListener ( new MouseAdapter ( )
{
public void mousePressed (MouseEvent e)
{
…
}
}
)
}
}


Using an Anonymous MouseListener


Summary
In this lecture we have:
• Introduced the Abstract Window Toolkit
• Introduced the Java Foundation Classes
• Discussed containers and layout managers
• Introduced events and event handling
• Introduced menus
• Introduced dialogs
• Discussed mouse events


Useful Websites
http://java.sun.com/docs/books/tutorial/uiswing/components/componentlist.html


13 gui development

More Related Content

Similar to 13 gui development

More from APU

13 gui development

Editor's Notes