Agenda
• Types of GUI classes/objects
• Step-by-step guide to create a graphic user
interface
• Step-by-step guide to event-handling
• PS5 Problem 1
• PS5 Problem 2
Container and Component
• There are two types of graphic user interface classes
– Components : JButton, JLabel, JTextField, etc.
– Containers: which hold those components, e.g. JFrame, JPanel,
Container, etc.
• Frame
– Frame is the top-level container which provides a place for other
components to “paint” themselves.
– Frame = Window
– A JFrame contains a title bar, a menu bar, and a ContentPane
setTitle("Powers of Two");
Container conPane = getContentPane();
– ContentPane provides the canvas where we could add other
components
conPane .add(XXXX);
1
Container
• Panel
– Simplest form of container
– Its only purpose is to simplify the positioning of
buttons, labels and other components
Container Layout
• Each container must have a layout manager which manages the
layout the of the components inside the container
– BorderLayout
• Lays out components in 5 areas:
north, south, east, west, and center.
All extra space is placed in the
center area
– FlowLayout
• Lays out components from left to
right
– GridLayout
• Makes a bunch of components
equal in size and displays them in
the requested number of rows and
columns
2
Components
•
•
•
•
JButton:
button
JTextField: single line input field
Jlabel:
display text
JComboBox: drop down list where user can
select a value
5-Steps to Build a Graphic User
Interface
1.
2.
3.
3a.
Create top- level container
Set the layout of the container
Create components
Create intermediate container(s) to better organize the
components
4. Add components to the container
5. Add event handling capabilities
Problem set 5 Problem 1:
Every time user clicks the Double
button, the value in the text field
doubles
3
PS5-1: Step 1, 2: Create Top-Level
Container and Set Its Layout
• Frame:
– Since this is a standalone GUI
application, the simplest way is
to extend the JFrame class
– Constructor
•
•
•
•
•
Get the contentPane
Set layout of the contentPane
Set frame title
……….
Packs the frame to a decent size
public class Pow2Frame extends JFrame
{
Public Pow2Frame()
{
Container conPane = getContentPane();
conPane .setLayout(new BorderLayout());
setTitle("Powers of Two");
…………………………
pack();
}
}
PS5-1: Step 3: Create Components
• Three components
– Label
JLabel valueLabel = new JLabel("Value:");
– TextField
JTextField valueField = new JTextField ("1", 6);
• Initial value 1
• Maximum size 6
– Button
doubleButton = new JButton ("Double");
4
PS5-1: Step 3a, 4: Create Intermediate
Container and Add Components
• Why?
– Better organize the
components
• How?
– Create a panel
– Set its layout to FlowLayout
– Add all the components to
the panel in the right
sequence
– Add the panel to the bottom
of the frame’s contentPane
Jpanel buttonHolder = new JPanel();
How?
buttonHolder.add(valueLabel);
buttonHolder.add(valueField);
buttonHolder.add(doubleButton);
conPane .add(buttonHolder, BorderLayout .SOUTH);
PS5-1: Step 5: Handle the Event
• Event handling is of fundamental importance to GUI
programs
–
–
It can be intimidating for beginning programmers
However, it is MUCH simpler than you thought
• Summary of the event handling process:
1. What event do you want to handle? (click a button, press a key,
etc.)
2. Find the event type (e.g. ActionEvent)
3. Implement the Listener interface of that event (e.g ActionListener)
4. Add the Listener to that object (e.g. button)
5. Define the functionality of the listener (e.g. what the program
would do if user clicks the button)
5
PS5-1: Step 5: Handle the Event
1.
2.
3.
4.
5.
What event do you want to
handle on what object?
(click a button, press a key,
etc.)
Find the event type (e.g.
ActionEvent), listener, and
interface
Implement the Listener
interface of that event (e.g
ActionListener)
Add the Listener to that
object (e.g. button)
Define the interface of the
listener (e.g. what the
program would do if user
clicks the button)
“Every time user click the Double button , …”
Event:
ActionEvent
Listener:
ActionListener
Interface: actionPerformed(…)
public class Pow2Frame extends JFrame
implements ActionListener
doubleButton.addActionListener(this);
public void actionPerformed(ActionEvent e)
{
String valueString = valueField .getText();
int value = Integer.parseInt(valueString);
value *= 2;
valueString = Integer.toString(value);
valueField.setText(valueString);
}
How to Handle The Event If There are
Multiple Objects Listening to it?
• Issue:
– If there are two buttons, both generating an
ActionEvent
– How can Java determine which object triggers the
event?
• Solution
– e.getSource()
Public void actionPerformed (ActionEvent e)
{
if (e.getSource() == b1) //which object is the event source?
label.setText (“b1 is printed”);
else if (e.getSource() == b2)
label.setText (“b2 is printed”);
}
6
PS5 Problem 2: GUI
•
What is the top-level
container ?
•
What is its layout ?
•
What are the components?
– The center of the
contentPane is a
customized panel called
BusDrawing (given)
•
Do we need a panel? If we
do, what is its layout ?
PS5 Problem 2: Events
1.
2.
3.
4.
5.
What event do you want to
handle on what object?
(click a button, press a key,
etc.)
Find the event type (e.g.
ActionEvent), listener, and
interface
Implement the Listener
interface of that event (e.g
ActionListener)
Add the Listener to that
object (e.g. button)
Define the interface of the
listener (e.g. what the
program would do if user
clicks the button)
7
PS5 Problem 2: Hints
• BusSystem:
– Class that optimizes a set of bus routes based on:
v Bus time
v Parking
v Objective weight
– User needs to set the parameters and call the
optimize() function
• BusDrawing
– A customized panel that draws the bus routes based
on the particular BusSystem object
BusDrawing drawArea = new BusDrawing (bSystem );
conPane.add(drawArea , BorderLayout.CENTER);
– How to use BusDrawing
drawArea.busLines();
drawArea.repaint();
PS5 Problem 2: Hints
• Create a JComboBox
•
The constructor of JComboBox takes a String array which
contains the selections
// Combo box to select parking costs
String[] parkingOptions = {"0.00", "2.00", "4.00", "6.00",
"8.00", "10.00"};
JComboBox parkingBox= new JComboBox(parkingOptions );
8
PS5 Problem 2: More Hints
• BusFrame
– What events must be handled?
• Do you need to handle events from the text fields and combo
boxes? Why or why not?
– Hint: you don’t need to handle these events
– Once you decide the event(s) that must be handled:
• How do you read the data from each component?
– Hint: Using getSelectedItem(), etc., same as if responding to an
event from that source
• What class(es) will implement ActionListener?
– Hint: the container panel is a convenient choice
• What is the logic in the ActionPerformed method(s)?
– Hint: it must read the combo boxes, set BusSystem parameters,
invoke the optimization calculation and then the drawing
methods
– How do you connect the event source(s) and the listener(s)?
• Can you safely ignore some events? Hint: Yes.
9