Graphical User Interfaces

1
Chapter 12
Graphical User Interfaces
2
Figure 1 A Program with Four Buttons
3
Use Panels to Organize Buttons

• JPanel buttonPanel new JPanel()
• buttonPanel.add(upButton)buttonPanel.add(downBut
  ton). . .
• contentPane.add(buttonPanel, "South")

4
Figure 2 Containers with Separate Layout Managers
5
Layout Managers

• BorderLayout (center, south, north, east, west)
• FlowLayout (left-to-right)
• GridLayout (rectangular grid)
• Default Content pane has border layout
• Default Panels have flow layout
• Change default panel.setLayout(new GridLayout(4,
  3))

6
Figure 3 The Border Layout Grows Components
7
FlowLayout doesn't grow content

• The border layout and grid layout grow buttons
  etc. to fit the entire area of the border or grid
• Remedy put button(s) inside panel with flow
  layout

8
Figure 4 Grid Layout
9
Grid Layout

• Add buttons left-to-right/top-to-bottompanel.add(
  button7)panel.add(button8)panel.add(button9)
  panel.add(button4). . .panel.add(buttonCE)

10
Figure 5 Buttons with Labels and Icons
11
Buttons

• Specify label and optional icon in
  constructorJButton leftButton new
  JButton("left")leftButton new
  JButton("left", new ImageIcon("left.gif"))
• Add action listener to handle button click event

12
Program ButtonTest.java import
java.awt.Container import java.awt.Graphics impo
rt java.awt.Graphics2D import java.awt.Rectangle
import java.awt.event.ActionEvent import
java.awt.event.ActionListener import
java.awt.event.WindowAdapter import
java.awt.event.WindowEvent import
javax.swing.JButton import javax.swing.JFrame im
port javax.swing.JPanel public class
ButtonTest public static void main(String
args) ButtonFrame frame new
ButtonFrame() frame.setTitle("ButtonTest")
frame.show()
13

class ButtonFrame extends JFrame public
ButtonFrame() final int DEFAULT_FRAME_WIDTH
300 final int DEFAULT_FRAME_HEIGHT
300 setSize(DEFAULT_FRAME_WIDTH,DEFAULT_FRA
ME_HEIGHT) addWindowListener(new
WindowCloser()) // construct components
panel new RectanglePanel() JPanel
buttonPanel new JPanel() ActionListener
listener new DirectionListener()
upButton new JButton("Up")
upButton.addActionListener(listener)
14
downButton new JButton("Down") downButton.addAc
tionListener(listener) leftButton new
JButton("Left") leftButton.addActionListener(list
ener) rightButton new JButton("Right") rightB
utton.addActionListener(listener) // add
components to content pane Container contentPane
getContentPane() contentPane.add(panel,
"Center") buttonPanel.add(upButton) buttonPanel
.add(downButton) buttonPanel.add(leftButton) but
tonPanel.add(rightButton)
15
contentPane.add(buttonPanel,
"South") private RectanglePanel
panel private JButton upButton private JButton
downButton private JButton leftButton private
JButton rightButton // inner class definition
private class DirectionListener implements
ActionListener public void actionPerformed(Acti
onEvent event) // find the button that was
clicked Object source event.getSource()
16
if (source upButton)
panel.moveRectangle(0, -1) else if
(source downButton)
panel.moveRectangle(0, 1) else if
(source leftButton)
panel.moveRectangle(-1, 0) else if
(source rightButton)
panel.moveRectangle(1, 0)
private class WindowCloser extends WindowAdapter
public void windowClosing(WindowEvent
event) System.exit(0)
17
class RectanglePanel extends JPanel public
RectanglePanel() rect new Rectangle(0, 0,
RECT_WIDTH, RECT_HEIGHT) public void
paintComponent(Graphics g) super.paintComponent
(g) Graphics2D g2 (Graphics2D)g
g2.draw(rect)
18
/ Moves the rectangle and repaints it.
The rectangle is moved by multiples of its
full width or height. _at_param dx the number
of width units _at_param dy the number of
height units / public void
moveRectangle(int dx, int dy)
rect.translate(dx RECT_WIDTH, dy
RECT_HEIGHT) repaint() private
Rectangle rect private static final int
RECT_WIDTH 20 private static final int
RECT_HEIGHT 30
19
Figure 6 A Frame with a Text Area and a Text Field
20
Text Components

• Specify number of rows/characters in
  constructortf new TextField(5)ta new
  TextArea(10, 40)
• Turn edit mode off if you want to display
  textta.setEditable(false)
• Set text programmaticallytf.setText("Hello")

21
Labels

• Use a label to tag a text fieldJLabel label
  new JLabel("Name", SwingConstants.RIGHT)
• Add label to panel panel.add(label)panel.add(n
  ameField)

22
Program TextTest.java import java.awt.Container
import java.awt.GridLayout import
java.awt.event.ActionEvent import
java.awt.event.ActionListener import
java.awt.event.WindowAdapter import
java.awt.event.WindowEvent import
java.util.StringTokenizer import
javax.swing.JButton import javax.swing.JFrame im
port javax.swing.JLabel import
javax.swing.JPanel import javax.swing.JTextArea
import javax.swing.JTextField public class
TextTest public static void main(String
args) TextFrame frame new TextFrame()
23
frame.setTitle("TextTest")
frame.show() class TextFrame extends
JFrame public TextFrame() final int
DEFAULT_FRAME_WIDTH 300 final int
DEFAULT_FRAME_HEIGHT 300
setSize(DEFAULT_FRAME_WIDTH, DEFAULT_FRAME_HEIGHT)
addWindowListener(new WindowCloser())
// construct components inputArea
new JTextArea()
resultField new JTextField(20) resultField.set
Editable(false)
24
calcButton new JButton("Calculate") calcButton.
addActionListener(new ButtonListener()) // add
components to content pane Container contentPane
getContentPane() contentPane.add(inputArea,
"Center") // arrange the label and text field
in a panel JPanel resultPanel new
JPanel() resultPanel.add(new JLabel("Average"))
resultPanel.add(resultField) // place the
button in a panel JPanel buttonPanel new
JPanel() buttonPanel.add(calcButton) // stack
up these two panels in another panel
25
JPanel southPanel new JPanel()
southPanel.setLayout(new GridLayout(2, 1))
southPanel.add(resultPanel)
southPanel.add(buttonPanel)
contentPane.add(southPanel, "South") /
Reads numbers from a string that contains a
sequence of floating-point numbers separated
by white space. _at_param input the string
containing the numbers _at_return the numbers
that were found in the string / public static
double getData(String input) StringTokenizer
tokenizer new StringTokenizer(input)
double data new doubletokenizer.countTokens()
for (int i 0 i lt data.length i)
datai Double.parseDouble(tokenizer.nextToken()
) return data
26
/ Computes the average of an array of
floating-point numbers. _at_param data the
numbers to average _at_return the average, or 0
if the array was empty /
public static double average(double data) if
(data.length 0) return 0 double sum 0
for (int i 0 i lt data.length i) sum
sum datai return sum /
data.length private JTextArea
inputArea private JTextField resultField private
JButton calcButton
27
private class ButtonListener implements
ActionListener public void
actionPerformed(ActionEvent event) //
get user input from text area double
data getData(inputArea.getText()) //
compute average and display in result field
double avg average(data)
resultField.setText(" avg)
private class WindowCloser extends WindowAdapter
public void windowClosing(WindowEvent
event) System.exit(0)
28
Figure 7 A Combo Box, Radio Buttons, and
Check Boxes
29
Radio Buttons

• Radio buttons are mutually exclusive
• Button group turns one button off when the next
  one is turned onsButton new JRadioButton("Small
  ")mButton new JRadioButton("Medium")
  lButton new JRadioButton("Large")buttonGroup.
  add(sbutton)buttonGroup.add(mbutton)buttonGrou
  p.add(lbutton)
• Still need to add to panel

30
Check Boxes

• Similar to radio button, not mutually
  exclusiveJCheckBox it new JCheckBox("Italic")
• Test if selectedif (it.isSelected()) . . .

31
Borders

• Use border to group related components
• Add border to panel holding components
• panel.setBorder(new TitledBorder(new
  EtchedBorder(), "Title"))

32
Figure 8 An Opened Combo Box
33
Combo boxes

• Use less space than radio buttons
• Users can type other values
• Combo between list selection and text field
• JComboBox faceName new JComboBox()faceName.add
  Item("Serif")faceName.addItem("SansSerif"). .
  .
• Get user selectionsel (String)faceName.getSelect
  edItem()

34
Program ChoiceTest.java import
java.awt.Container import java.awt.Font import
java.awt.GridLayout import java.awt.event.ActionE
vent import java.awt.event.ActionListener import
java.awt.event.WindowAdapter import
java.awt.event.WindowEvent import
javax.swing.ButtonGroup import
javax.swing.JButton import javax.swing.JCheckBox
import javax.swing.JComboBox import
javax.swing.JFrame import javax.swing.JLabel imp
ort javax.swing.JPanel import javax.swing.JRadioB
utton import javax.swing.JTextField import
javax.swing.border.EtchedBorder import
javax.swing.border.TitledBorder
35
public class ChoiceTest public static void
main(String args) ChoiceFrame frame new
ChoiceFrame() frame.setTitle("ChoiceTest")
frame.show() class ChoiceFrame
extends JFrame public ChoiceFrame()
final int DEFAULT_FRAME_WIDTH 300 final
int DEFAULT_FRAME_HEIGHT 300
setSize(DEFAULT_FRAME_WIDTH, DEFAULT_FRAME_HEIGHT)
addWindowListener(new WindowCloser())
// construct components
36
sampleField new JTextField ("Computing
Concepts with Java Essentials") sampleField.setEd
itable(false) ChoiceListener listener new
ChoiceListener() facenameCombo new
JComboBox() facenameCombo.addItem("Serif") facen
ameCombo.addItem("SansSerif") facenameCombo.addIt
em("Monospaced") facenameCombo.setEditable(true)
facenameCombo.addActionListener(listener) itali
cCheckBox new JCheckBox("Italic") italicCheckBo
x.addActionListener(listener) boldCheckBox
new JCheckBox("Bold") boldCheckBox.addActionListe
ner(listener)
37
smallButton new JRadioButton("Small") smallButt
on.setSelected(true) smallButton.addActionListene
r(listener) mediumButton new
JRadioButton("Medium") mediumButton.addActionList
ener(listener) largeButton new
JRadioButton("Large") largeButton.addActionListen
er(listener) // add radio buttons to button
group
ButtonGroup sizeGroup new ButtonGroup() sizeGr
oup.add(smallButton) sizeGroup.add(mediumButton)
sizeGroup.add(largeButton)
38
// add components to panels JPanel facenamePanel
new JPanel() facenamePanel.add(facenameCombo)
JPanel sizeGroupPanel new JPanel() sizeGroupPa
nel.add(smallButton) sizeGroupPanel.add(mediumBut
ton) sizeGroupPanel.add(largeButton) sizeGroupPa
nel.setBorder (new TitledBorder(new
EtchedBorder(), "Size")) JPanel styleGroupPanel
new JPanel() styleGroupPanel.add(italicCheckBox
) styleGroupPanel.add(boldCheckBox) styleGroupPa
nel.setBorder (new TitledBorder(new
EtchedBorder(), "Style")) // line up component
panels
39
JPanel southPanel new JPanel()
southPanel.setLayout(new GridLayout(3, 1))
southPanel.add(facenamePanel)
southPanel.add(sizeGroupPanel)
southPanel.add(styleGroupPanel) // add
panels to content pane Container contentPane
getContentPane() contentPane.add(sampleField
, "Center") contentPane.add(southPanel,
"South") setSampleFont() / Gets user
choice for font name, style, and size and sets
the font of the text field. /
40
public void setSampleFont() // get font name
String facename (String)facenameCombo.ge
tSelectedItem()
// get font style int style 0 if
(italicCheckBox.isSelected()) style style
Font.ITALIC if (boldCheckBox.isSelected())
style style Font.BOLD // get font
size final int SMALL_SIZE 12 final int
MEDIUM_SIZE 16 final int LARGE_SIZE 24
41
int size 0 if (smallButton.isSelected())
size SMALL_SIZE else if
(mediumButton.isSelected()) size
MEDIUM_SIZE else if (largeButton.isSelected())
size LARGE_SIZE // set font of text
field sampleField.setFont(new Font(facename,
style, size)) sampleField.repaint()
42
private JTextField sampleField private
JCheckBox italicCheckBox private JCheckBox
boldCheckBox private JRadioButton
smallButton private JRadioButton
mediumButton private JRadioButton
largeButton private JComboBox
facenameCombo private class ChoiceListener
implements ActionListener public void
actionPerformed(ActionEvent event)
setSampleFont() private class
WindowCloser extends WindowAdapter public
void windowClosing(WindowEvent event)
System.exit(0)
43
Figure 9 Pulldown Menus
44
Menus

• Add menu bar to frameJMenuBar bar new
  JMenuBar()frame.setJMenuBar(bar)
• Add menus to the menu barJMenu fileMenu
  new JMenu("File")bar.add(fileMenu)

45
Menu items

• Add menu items to the menuJMenuItem fileNew
  new JMenuItem("New")
• Add action listener to the menu
  itemActionListener l ...fileNew.addActionList
  ener(l)

46
Program MenuTest.java import java.awt.Container
import java.awt.Graphics import
java.awt.Graphics2D import java.awt.Rectangle im
port java.awt.event.ActionEvent import
java.awt.event.ActionListener import
java.awt.event.WindowAdapter import
java.awt.event.WindowEvent import
java.util.Random import javax.swing.JFrame impor
t javax.swing.JMenu import javax.swing.JMenuBar
import javax.swing.JMenuItem import
javax.swing.JPanel
47
public class MenuTest public static void
main(String args) MenuFrame frame new
MenuFrame() frame.setTitle("MenuTest")
frame.show() class MenuFrame extends
JFrame public MenuFrame() final int
DEFAULT_FRAME_WIDTH 300 final int
DEFAULT_FRAME_HEIGHT 300
setSize(DEFAULT_FRAME_WIDTH, DEFAULT_FRAME_HEIGHT)
addWindowListener(new WindowCloser())
// add drawing panel to content pane
48
panel new RectanglePanel() Container
contentPane getContentPane() contentPane.add(pa
nel, "Center") // construct menu
JMenuBar menuBar new JMenuBar() setJMenuBar(me
nuBar) JMenu fileMenu new JMenu("File") menuB
ar.add(fileMenu) MenuListener listener new
MenuListener() newMenuItem new
JMenuItem("New") fileMenu.add(newMenuItem) newMe
nuItem.addActionListener(listener)
49
exitMenuItem new JMenuItem("Exit") fileMenu.add
(exitMenuItem) exitMenuItem.addActionListener(lis
tener) JMenu editMenu new JMenu("Edit") menuB
ar.add(editMenu) JMenuItem moveMenu new
JMenu("Move") editMenu.add(moveMenu) upMenuItem
new JMenuItem("Up") moveMenu.add(upMenuItem)
upMenuItem.addActionListener(listener) downMenuI
tem new JMenuItem("Down") moveMenu.add(downMenu
Item) downMenuItem.addActionListener(listener)
50
leftMenuItem new JMenuItem("Left")
moveMenu.add(leftMenuItem) leftMenuItem.addAct
ionListener(listener) rightMenuItem new
JMenuItem("Right") moveMenu.add(rightMenuItem)
rightMenuItem.addActionListener(listener)
randomizeMenuItem new JMenuItem("Randomize")
editMenu.add(randomizeMenuItem)
randomizeMenuItem.addActionListener(listener)
private JMenuItem exitMenuItem private JMenuItem
newMenuItem private JMenuItem upMenuItem private
JMenuItem downMenuItem private JMenuItem
leftMenuItem private JMenuItem rightMenuItem
51
private JMenuItem randomizeMenuItem private
RectanglePanel panel private class MenuListener
implements ActionListener public void
actionPerformed(ActionEvent event) // find
the menu that was selected Object source
event.getSource() if (source
exitMenuItem) System.exit(0) else
if (source newMenuItem)
panel.reset() else if (source
upMenuItem) panel.moveRectangle(0, -1)
else if (source downMenuItem)
panel.moveRectangle(0, 1) else if (source
leftMenuItem) panel.moveRectangle(-1,
0)
52
else if (source rightMenuItem)
panel.moveRectangle(1, 0) else if
(source randomizeMenuItem)
panel.randomize() private class
WindowCloser extends WindowAdapter public
void windowClosing(WindowEvent event)
System.exit(0) class
RectanglePanel extends JPanel public
RectanglePanel() rect new Rectangle(0, 0,
RECT_WIDTH, RECT_HEIGHT)
53
public void paintComponent(Graphics g)
super.paintComponent(g) Graphics2D g2
(Graphics2D)g g2.draw(rect) / Resets
the rectangle to the top left corner. / public
void reset() rect.setLocation(0, 0)
repaint()
54
/ Moves the rectangle to a random
position. / public void randomize() Random
generator new Random() rect.setLocation(gene
rator.nextInt(getWidth()),
generator.nextInt(getHeight())) repaint()
55
/ Moves the rectangle and repaints it.
The rectangle is moved by multiples of its
full width or height. _at_param dx the number
of width units _at_param dy the number of
height units / public void
moveRectangle(int dx, int dy)
rect.translate(dx RECT_WIDTH, dy
RECT_HEIGHT) repaint() private
Rectangle rect private static int RECT_WIDTH
20 private static int RECT_HEIGHT 30
56
Figure 10 A Color Mixer
57
Figure 11 A Demonstration Application from the
Java Development Kit
58
Exploring the Documentation

• Don't try to understand all methods
• Focus on what you need to do your job
• How do I construct a slider?
• How can I get notified when the user has moved
  it?
• How can I tell what the user has set it to?
• When you complete the basics, look again
• How about those tick marks?

59
Figure 12 A Mysterious Entry in the
JSlider Documentation
60
How to construct a slider

• JSlider()Has range (0,100)
• JSlider(int min, int max, int value)Can specify
  range and initial value
• JSlider(BoundedRangeModel m)appears to be some
  internal mechanism

61
How to get notifications

• Look for addXxxListenervoid
  addChangeListener(ChangeListener l)
• What is a change listener? It has a single
  methodvoid stateChanged(ChangeEvent e)
• Plan Add a change listener, read slider state
  and update color in that method

62
How to get slider setting

• Look at all methods that start with getint
  getValue()Returns the slider's value

63
Program SliderTest.java import
java.awt.Color import java.awt.Container import
java.awt.GridLayout import java.awt.event.WindowA
dapter import java.awt.event.WindowEvent import
javax.swing.JFrame import javax.swing.JLabel imp
ort javax.swing.JPanel import javax.swing.JSlider
import javax.swing.SwingConstants import
javax.swing.event.ChangeListener import
javax.swing.event.ChangeEvent
64
public class SliderTest public static void
main(String args) SliderFrame frame new
SliderFrame() frame.setTitle("SliderTest")
frame.show() class SliderFrame
extends JFrame public SliderFrame()
final int DEFAULT_FRAME_WIDTH 300 final
int DEFAULT_FRAME_HEIGHT 300
setSize(DEFAULT_FRAME_WIDTH, DEFAULT_FRAME_HEIGHT)
addWindowListener(new WindowCloser())
// construct components colorPanel
new JPanel()
65
ColorListener listener new ColorListener() red
Slider new JSlider(0, 100, 100) redSlider.addCh
angeListener(listener) greenSlider new
JSlider(0, 100, 70) greenSlider.addChangeListener
(listener) blueSlider new JSlider(0, 100,
70) blueSlider.addChangeListener(listener)
// fill content pane JPanel southPanel new
JPanel() southPanel.setLayout(new GridLayout(3,
2)) southPanel.add(new JLabel("Red",
SwingConstants.RIGHT))
66
southPanel.add(redSlider)
southPanel.add(new JLabel("Green",
SwingConstants.RIGHT)) southPanel.add(greenSli
der) southPanel.add(new JLabel("Blue",
SwingConstants.RIGHT)) southPanel.add(blueSlid
er) Container contentPane
getContentPane() contentPane.add(colorPanel,
"Center") contentPane.add(southPanel,
"South") setSampleColor() / Reads
the slider values and sets the panel to the
selected color. /
67
public void setSampleColor() // read slider
values float red 0.01F redSlider.getValue(
) float green 0.01F greenSlider.getValue()
float blue 0.01F blueSlider.getValue()
// set panel background to selected color
colorPanel.setBackground(new Color(red, green,
blue)) colorPanel.repaint() private
JPanel colorPanel private JSlider
redSlider private JSlider greenSlider private
JSlider blueSlider
68
private class ColorListener implements
ChangeListener public void
stateChanged(ChangeEvent event)
setSampleColor()
private class WindowCloser extends
WindowAdapter public void
windowClosing(WindowEvent event)
System.exit(0)
69
Figure 13 Visual Programming Environment