Introduction to GUI

1
Introduction to GUI

• Java offers a great number of pre-defined classes
  to support the development of graphical user
  interfaces
• These are broken down into roughly 3 categories
• containers JFrames, JPanels, JApplets
• GUI objects buttons, input and output boxes,
  etc
• event listeners when a GUI object is interacted
  with, it often generates an Event, a listener is
  code that listens for the Event and handles it
• In order to create a GUI, we have to create a
  container (JPanels are actually subcontainers),
  so we must start with a JFrame or JApplet
• Inside the JFrame, we insert JPanels
• Inside of JPanels, we can insert other objects
  such as JButtons, JLabels, and Graphics
• All of these types of objects are part of Java
  classes available in the two packages java.awt
  package (older and often unused versions) and
  javax.swing

2
Types of GUI Components

• JFrame a container, place items inside the Frame
• JApplet another container, for use primarily in
  web browsers
• JPanel an intermediate container which cannot
  be viewed by itself, but can be placed inside a
  frame or applet we use them to organize how
  GUI features will appear using LayoutManager
• LayoutManager an object that is used to figure
  out how components can be placed into a JPanel,
  we will use FlowLayout, GridLayout and
  BorderLayout
• JButton click to generate an Event to be
  handled
• JLabel to output Strings
• JTextArea to input Strings
• JCheckBox boxes that can be clicked on (checked
  or unchecked)
• JRadioButton collection of buttons, only one of
  which is selected
• JComboBox type of menu, click on the box and a
  menu or list appears
• JList like the combo box except that you can
  select multiple items from a list
• JMenu same as combo box but appears in the
  title bar
• JSlider to offer a range of values
• JSpinner click in the up or down arrow to
  increase/decrease the value

3
Creating a GUI
import javax.swing. // needed for the GUI
items import java.awt. // needed for
LayoutManager public class Template extends
JFrame private static final int X_SIZE 520,
Y_SIZE 520 public static void main(String
args) JFrame frame new JFrame("GUI
Example1") frame.setSize(X_SIZE,
Y_SIZE) GuiPanel panel new
GuiPanel() frame.getContentPane().add(panel)
frame.pack() frame.setVisible(true) frame.s
etDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
private static class GuiPanel extends
JPanel public GuiPanel()
4
Example

• I want to organize a GUI as follows
• 4 JButtons that do things
• 1 JLabel that describes what the output is
• 1 JLabel to deliver the output
• Consider for example, a simple calculator that
  adds together the cost of 3 different goods that
  we sell
• We will use 3 JButtons for the 3 goods, plus 1
  JButton to reset the sum to start over

b1 new JButton("Apple") b2 new
JButton("Orange") b3 new JButton("Banana") b4
new JButton("Clear") // Create panel output
new JLabel(" 0.00") JLabel descr new
JLabel("Total so far") setLayout(new
GridLayout(3, 2)) // 3x2 layout add(b1)
add(descr) add(b2) add(output) add(b3)
add(b4)
This code places the items into the JPanel in an
organized fashion (a 3x2 grid)
5
Making JButtons Work

• Our previous example created the GUI, but
  unfortunately clicking on the JButtons would not
  affect the GUI why?
• JButtons, when clicked, generate an ActionEvent
• we need an ActionListener for our program to
  handle these events
• So we implement an ActionListener as part of our
  class
• ActionListener is a class in java.awt.event.
• import this package
• Add implements ActionListener to our JPanel
  class header
• Add for each JButton buttonName.addActionListener(
  this)
• recall that this refers to this class, here this
  means that we will implement an ActionListener as
  part of this class
• To implement an ActionListener, write an
  actionPerformed method

6
Simple actionPerformed Method

• For our previous example, our actionPerformed
  method is called whenever a JButton is pressed
• We must figure out what JButton was pressed and
  then respond correctly
• If the Apple button was pressed, we want to add
  the cost of an apple to our total and then output
  the new total
• To get the JButton pressed, we use getSource( )
• To compare the JButton pressed to our list of
  JButtons, we will compare as in if(e.getSource( )
  b1) where e is the ActionEvent generated
• To reset the label, output, we use setText()

public void actionPerformed(ActionEvent e) if
(e.getSource( ) b1) amount 0.45 else if
(e.getSource( ) b2) amount 0.38 else if
(e.getSource( ) b3) amount 0.27 else if
(e.getSource( ) b4) amount
0.00 output.setText(" " amount)
7
Putting it all Together
import javax.swing. import java.awt. import
java.awt.event. public class SumGui private
static final int X_SIZE 300, Y_SIZE
115 public static void main(String args)
JFrame frame new JFrame("Example") fram
e.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
frame.setSize(X_SIZE, Y_SIZE) GuiPanel panel
new GuiPanel() frame.getContentPane().add(pan
el) frame.setVisible(true) private
static class GuiPanel extends JPanel implements
ActionListener private static JLabel
output private static double amount // the
current amount entered private JButton b1,
b2, b3, b4
8
Continued
public GuiPanel( ) b1 new
JButton("Apple") b2 new JButton("Orange")
b3 new JButton("Banana") b4 new
JButton("Clear") b1.addActionListener(t
his) b2.addActionListener(this)
b3.addActionListener(this) b4.addActionListener
(this) output new JLabel(" 0.00")
JLabel descr new JLabel("Total so far")
setLayout(new GridLayout(3, 2)) // 3x2 layout
add(b1) add(descr) add(b2) add(output)
add(b3) add(b4) public void
actionPerformed(ActionEvent e) if
(e.getSource( ) b1) amount 0.45 else if
(e.getSource( ) b2) amount 0.38 else if
(e.getSource( ) b3) amount 0.27 else if
(e.getSource( ) b4) amount
0.00 output.setText(" " amount)
// end JPanel class // end JFrame class
9
More Complex Layouts

• The previous example merely had 6 items, arranged
  in a 3x2 grid
• What if we need a more complex layout, for
  instance JLabels that will be longer than the
  JButtons?
• We place items in JPanels
• We then place JPanels inside of other JPanels
• Thus, we can create some very complex GUIs
• To create a JPanel and provide a layout, we do
• JPanel examplePanel new JPanel(new
  BorderLayout( ))
• BorderLayout allows you to insert items in one of
  5 areas, NORTH, SOUTH, CENTER, EAST, WEST
• To add an item to a JPanel that uses
  BorderLayout, we dont just say add(item), we
  also specify where as in add(item,
  BorderLayout.NORTH)
• GridLayout requires that you specify the
  dimensions of the grid (rows, columns)
• FlowLayout merely places items in a row until the
  row is filled, then moves on to the next row

10
Examples
How would you generate this one?
A 2x2 JPanel in which the first item is a 2x2
JPanel, the second item is a 2x2 JPanel, the
third item uses FlowLayout of 3 items and the
last item uses BorderLayout with 5 items inserted
into N, S, C, E, W
11
JTextBox

• Aside from JButtons and JLabels, we can add
  JTextBox items which allow us to get input
• Consider doing a temperature conversion
• User inputs current temperature into a JTextBox
  and clicks on a JButton to perform the conversion
• See the GUI below
• To get an item from a JTextBox, use getText( )
• Note that like JOptionPane.showInputDialog, what
  is input is going to be a String, so if we want a
  numeric value, we have to convert it using
  Integer.parseInt( ) or Double.parseDouble( )

12
Declaring Items

• So we have JTextBox, JLabel, JButton and JPanel
  to declare and work with
• Where do we declare these?
• In the GUIs constructor?
• As instance data for the class?
• In the actionPerformed method?
• If an item is only going to be instantiated and
  added to a JPanel, and then never referenced
  (such as a description like Enter temperature)
  then it can go in the constructor this will
  include some JLabels and probably all JPanels
  that are used as subpanels
• If the item is to be referenced in both the
  constructor (to be added to the JPanel) and in
  the actionPerformed method (JButton, some
  JLabels, JTextBoxes) then it should be declared
  as an instance datum, instantiated and added to
  the JPanel in the constructor, and then
  referenced in actionPerformed