Basic GUI Components

1
Basic GUI Components Objectives To understand
the design and build GUIs To understand the
relationship between GUIs and event handling To
be able to use buttons, labels, lists, text
fields and panels To be able to use mouse,
action and keyboard events To be able to use
layout managers
2
Introduction Graphical User Interfaces (GUIs)
are constructed from visual Components. A
Container is a collection of related
components. As we have seen in previous
practicals, components may be added to the
containers associated with JApplet and
Jframe. Container c getContentPane()
c.add(new JButton(OK)) Layout Managers are
provided to arrange GUI components on a container
for presentation purposes.
3
Container Types There are three basic types of
container to consider Applets (JApplet) Window
s (JFrame) Panels (JPanel) JFrame This class
is used to create windows that are capable of
supporting menu bars and menus. Such containers
are often used as the starting point (or main
window) of a GUI-based program.
4
JFrame A JFrame may be created in the following
way import javax.swing. import
java.awt. public class JFrameDemo public
static void main(String args) JFrame app
new JFrame("This is a Frame Window")
app.setSize(200,100) app.setVisible(true)

5
JPanel A JPanel is a container that enables the
constructions of nested GUIs. JPanels may
have components added to them including other
panels. They are created as follows JPanel pan
new JPanel() We will examine the
construction of complex GUIs a little later.
6
Layout Managers Provide basic layout
capabilities that automatically determine
the correct size and position of components
within a container. We will consider three
types FlowLayout BorderLayout GridLayout Flo
wLayout Components are placed on a container
from left to right in the order in which they are
added. When the edge of the container is reached
a new line is used.
7
FlowLayout import javax.swing. import
java.awt. public class FlowDemo extends
JApplet JButton left, centre, right
public void init() Container c
getContentPane() c.setLayout(new
FlowLayout()) left new JButton("Left")
c.add(left) centre new
JButton("Centre") c.add(centre)
right new JButton("Right") c.add(right)

8
FlowLayout Components arranged using FlowLayout
may be aligned to the left, right and centre
using the following attributes FlowLayout.LEFT
FlowLayout.RIGHT FlowLayout.CENTER // Notice
the spelling! E.g. Container c
getContentPane() c.setLayout(new
FlowLayout(FlowLayout.LEFT)) Default is centre
alignment.
9
BorderLayout This manager arranges components
into five regions North South East West Cen
ter (again, notice the spelling!)
10
BorderLayout import javax.swing. import
java.awt. public class BorderDemo extends
JApplet JButton north, south, east, west,
center public void init() Container c
getContentPane() c.setLayout(new
BorderLayout()) north new
JButton("North") c.add("North",north)
south new JButton("South")
c.add("South",south) east new
JButton("East") c.add("East",east)
west new JButton("West")
c.add("West",west) center new
JButton("Centre") c.add("Center",center)

11
GridLayout This manager divides the container
into a grid so that components can be placed in
rows and columns. Every component in the grid
will have the same height and width. Components
are added starting at the top left-hand cell,
proceeding left to right until a row is full,
then continuing with the next row.
12
GridLayout import javax.swing. import
java.awt. public class GridDemo extends
JApplet JButton b public void init()
Container c getContentPane()
c.setLayout(new GridLayout(3,3,5,5))
for(int i0ilt9i) JButton b new
JButton("Button "i) c.add(b)

13
Creating a Nested GUI
14
Creating a Nested GUI import javax.swing. impor
t java.awt. public class LayoutTest extends
JApplet JTextArea tarea JButton ok,
cancel, opt1, opt2, opt3 JPanel north, south
public void init() // set up the GUI
components of the Applet Container c
getContentPane() c.setLayout(new
BorderLayout()) north new
JPanel() north.setLayout(new
FlowLayout()) c.add("North",north)
opt1 new JButton("Option 1")
north.add(opt1) opt2 new
JButton("Option 2") north.add(opt2)
opt3 new JButton("Option 3")
north.add(opt3)
15
Creating a Nested GUI tarea new
JTextArea() tarea.setText("This is a text
area") c.add("Center",tarea)
south new JPanel() south.setLayout(new
FlowLayout()) c.add("South",south)
ok new JButton("OK") south.add(ok)
cancel new JButton("Cancel")
south.add(cancel)
16
Interacting with the User Event Handling GUIs
are Event-Driven -- events are generated when the
user interacts with the GUI. Common interactions
(and hence events) include moving the
mouse pressing the mouse button pressing a
button on screen typing in a text
field selecting an item from a menu closing a
window Events defined in java.awt.event
17
Event Handling To process an event two basic
tasks must be preformed register an event
listener define an event handler An event
listener listens for types of event generated
in the GUI components of a program. An event
handler is a method that is automatically called
in response to a particular type of event. Event
handlers are defined in conjunction with the
interface mechanism.
18
Event Handling Action Events An Action Event is
generated whenever the user performs an
action on a component for example, pressing a
button.
19
Event Handling Action Events import
javax.swing. import java.awt.event. import
java.awt. public class ActionTest extends
JApplet implements ActionListener JButton ok,
cancel public void init() Container c
getContentPane() c.setLayout(new
FlowLayout()) ok new JButton("ok")
ok.addActionListener(this) c.add(ok)
cancel new JButton("Cancel")
cancel.addActionListener(this)
c.add(cancel)
20
Event Handling Action Events public void
actionPerformed(ActionEvent e) if
(e.getSource() ok) JOptionPane.showMes
sageDialog(null,"OK Pressed",
"Action Test",
JOptionPane.INFORMATION_MESSAGE) else
JOptionPane.showMessageDialog(null,"Cancel
Pressed", "Action Test",
JOptionPane.INFORMATION_MESSAGE
)
21
Event Handling Mouse Events Two
types General mouse events (MouseListener) m
ousePressed mouseClicked mouseReleased mouse
Entered mouseExited Mouse motion (MouseMotio
nListener) mouseDragged mouseMoved
22
Event Handling Mouse Events import
java.awt. import java.awt.event. import
javax.swing. public class MouseTest1 extends
JApplet implements MouseMotionListener
JTextField text JPanel centerpan public
void init() Container c getContentPane()
c.setLayout(new BorderLayout())
JPanel northpan new JPanel()
c.add("North",northpan) text new
JTextField(10) northpan.add(text)
centerpan new JPanel()
centerpan.setBackground(Color.white)
c.add("Center",centerpan)
centerpan.addMouseMotionListener(this)
public void mouseMoved(MouseEvent e)
text.setText("Mouse moved") public void
mouseDragged(MouseEvent e)
text.setText("Mouse dragged")
23
Event Handling Mouse Events
24
Event Handling Mouse Events import
java.awt. import java.awt.event. import
javax.swing. public class MouseTest2 extends
JApplet implements MouseMotionListener public
void init() addMouseMotionListener(this)
public void mouseMoved(MouseEvent
e) public void mouseDragged(MouseE
vent e) Graphics g getGraphics()
g.fillOval(e.getX()-5,e.getY()-5,10,10)
25
Event Handling Mouse Events
26
Event Handling Keyboard Events import
java.awt. import java.awt.event. import
javax.swing. public class KeyTest extends
JApplet implements KeyListener JTextArea text
public void init() text new
JTextArea() Container c getContentPane()
c.add(text) addKeyListener(this)
public void keyTyped(KeyEvent e)
JOptionPane.showMessageDialog(null,
"Key Typed"e.getKeyText(e.getKeyCode())"\n",
"Key Test",JOptionPane.INFORMATION_MES
SAGE) public void keyReleased(KeyEvent
e) JOptionPane.showMessageDialog(null,
"Key Released"e.getKeyText(e.getKeyCode
())"\n", "Key Test",JOptionPane.INF
ORMATION_MESSAGE) public void
keyPressed(KeyEvent e) JOptionPane.showMessa
geDialog(null, "Key
Pressed"e.getKeyText(e.getKeyCode())"\n",
"Key Test",JOptionPane.INFORMATION_MESSAG
E)
27
Event Handling Keyboard Events
28
JLabel Labels provide text instructions or
information on a GUI. Displays a single line of
read-only text. JLabel new JLabel(Some Text)
Labels have no associated event
listener. JButton JButton b new
JButton(Press Me) Associated with
ActionListener.
29
JTextField Facilitate single line (text) data
entry or display. JTextField tf1 new
JTextField(10) JTextField tf2 new
JTextField(Some Text) String s
tf1.getText() tf2.setText(Some new text)
tf2.setEditable(false) May be associated
with ActionListener
30
JCheckBox Checkboxes can be on one of two
states checked or unchecked import
java.awt. import java.awt.event. import
javax.swing. public class CheckTest extends
JApplet implements ItemListener JPanel
northpan JCheckBox one, two JTextArea text
public void init() Container c
getContentPane() c.setLayout(new
BorderLayout()) northpan new JPanel()
c.add("North",northpan) one new
JCheckBox("One") one.addItemListener(this)
northpan.add(one) two new
JCheckBox("Two") two.addItemListener(this)
northpan.add(two)
text new JTextArea() c.add("Center",text
)
31
public void itemStateChanged(ItemEvent e)
if (e.getSource() one)
text.append("One\n") else
text.append("Two\n")
32
JComboBox A combo box provides a (drop down)
list of items from which the user can make a
selection. They are associated with Item Events
(ItemListener). My be initialised with an array
of Strings or have values added through calls to
addItem(). String names First, Second,
Third JComboBox list new JComboBox(names)
Whatever the user has selected may be
determined through getSelectedItem() getSelect
edIndex()
33
JList A list displays a series of items from
which the user may select one or more items. A
JList supports single-selection and
multiple-selection lists. A JList may also be
initialised with an array of strings. JList is
associated with ListSelectionListener
(valueChanged() ). Also makes use
of getSelectedIndex() getSelectedItem()