Download Chapter 6: Graphical User Interface (GUI) and Object

Chapter 6:
Graphical User Interface (GUI) and
Object-Oriented Design (OOD)
Java Programming:
Program Design Including Data Structures
Chapter Objectives
 Learn about basic GUI components
 Explore how the GUI components JFrame, JLabel, JTextField,
and JButton work
 Become familiar with the concept of event-driven programming
 Discover events and event handlers
 Explore object-oriented design
 Learn how to identify objects, classes, and members of a class
Java Programming: Program Design Including Data Structures
2
Graphical User Interface (GUI)
Components





View inputs and outputs simultaneously
One graphical window
Input values in any order
Change input values in window
Click buttons to get output
Java Programming: Program Design Including Data Structures
3
Java GUI Components
Java Programming: Program Design Including Data Structures
4
Graphical User Interface (GUI)
Components (continued)
 GUI components placed in content pane
 GUI components:




Windows
Labels
Text areas
Buttons
Java Programming: Program Design Including Data Structures
5
GUI Components
 Added to content pane of window
 Not added to window itself
 Pixel: A picture element
Java Programming: Program Design Including Data Structures
6
Windows
 Can be created using a Frame object
 The class Frame provides various methods to
control attributes of a window
 Measured in pixels of height and width
 Attributes associated with windows:
 Title
 Width
 Height
Java Programming: Program Design Including Data Structures
7
class JFrame
 GUI window instance created as instance of Frame
 Provides various methods to control window
attributes
Java Programming: Program Design Including Data Structures
8
Methods Provided by the class
JFrame
Java Programming: Program Design Including Data Structures
9
Methods Provided by the class
JFrame (continued)
Java Programming: Program Design Including Data Structures
10
Two Ways to Create a Window
 First way:
 Declare object of type JFrame
 Instantiate object
 Use various methods to manipulate window
 Second way:
 Create class-containing application program by extending
definition of class JFrame
 Utilize mechanism of inheritance
Java Programming: Program Design Including Data Structures
11
Content Pane
 Inner area of GUI window (below title bar, inside
border)
 To access content pane:
 Declare reference variable of type Container
 Use method getContentPane of class
JFrame
Java Programming: Program Design Including Data Structures
12
Methods Provided by the class
Container
Java Programming: Program Design Including Data Structures
13
class JLabel
 Labels: Objects of a particular class type
 class JLabel: Used to create labels
 Label attributes:
 Title
 Width
 Height
 To create a label:
 Instantiate object of type JLabel
 Modify attributes to control display of labels
Java Programming: Program Design Including Data Structures
14
Methods Provided by the class
JLabel
Java Programming: Program Design Including Data Structures
15
Methods Provided by the class
JLabel (continued)
Java Programming: Program Design Including Data Structures
16
class JTextField
 Text fields: Objects belonging to class
JTextField
 To create a text field:
 Declare reference variable of type JTextField
 Instantiate object
Java Programming: Program Design Including Data Structures
17
Methods Provided by the class
JTextField (continued)
Java Programming: Program Design Including Data Structures
18
class JButton
 Provided to create buttons in Java
 To create a button:
 Use the same technique that is used to create
JLabel and JTextField
Java Programming: Program Design Including Data Structures
19
Methods Provided by the class
JButton
Java Programming: Program Design Including Data Structures
20
Methods Provided by the class
JButton (continued)
Java Programming: Program Design Including Data Structures
21
Handling an Event
 Action event: created when JButton is clicked
 Event listener: An object that receives a message
when JButton is clicked
 In Java, you must register the listener
Java Programming: Program Design Including Data Structures
22
Handling an Event (continued)
 class ActionListener
 Handles action event
 Part of package java.awt.Event
 The class ActionListener is a special type of
class (interface)
 Must contain the actionPerformed method
Java Programming: Program Design Including Data Structures
23
Rectangle Program: Sample Run
Java Programming: Program Design Including Data Structures
24
Rectangle Program: Sample Run
//Given the length and width of a rectangle, this Java
//program determines its area and perimeter.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class RectangleProgram extends JFrame
{
private JLabel lengthL, widthL,
areaL, perimeterL;
private JTextField lengthTF, widthTF,areaTF, perimeterTF;
private JButton calculateB, exitB;
private CalculateButtonHandler cbHandler;
private ExitButtonHandler ebHandler;
private static final int WIDTH = 400;
private static final int HEIGHT = 300;
Java Programming: Program Design Including Data Structures
25
Rectangle Program: Sample Run
public RectangleProgram()
{
// Create four labels
lengthL = new JLabel("Enter the length: ",
SwingConstants.RIGHT);
widthL = new JLabel("Enter the width: ",
SwingConstants.RIGHT);
areaL = new JLabel("Area: ",
SwingConstants.RIGHT);
perimeterL = new JLabel("Perimeter: ",
SwingConstants.RIGHT);
//Create four textfields
lengthTF = new JTextField(10);
widthTF = new JTextField(10);
areaTF = new JTextField(10);
perimeterTF = new JTextField(10);
Java Programming: Program Design Including Data Structures
26
Rectangle Program: Sample Run
//create Calculate Button
calculateB = new JButton("Calculate");
cbHandler = new CalculateButtonHandler();
calculateB.addActionListener(cbHandler);
//Create Exit Button
exitB = new JButton("Exit");
ebHandler = new ExitButtonHandler();
exitB.addActionListener(ebHandler);
//Set the title of the window
setTitle("Area and Perimeter of a Rectangle");
//Get the container
Container pane = getContentPane();
//Set the layout (Grid 5 rows 2 cols)
pane.setLayout(new GridLayout(5,2));
Java Programming: Program Design Including Data Structures
27
Rectangle Program: Sample Run
//Place all items created
pane.add(lengthL);
pane.add(lengthTF);
pane.add(widthL);
pane.add(widthTF);
pane.add(areaL);
pane.add(areaTF);
pane.add(perimeterL);
pane.add(perimeterTF);
pane.add(calculateB);
pane.add(exitB);
//set the size of the window and display it
setSize(WIDTH,HEIGHT);
setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
Java Programming: Program Design Including Data Structures
28
Rectangle Program: Sample Run
private class CalculateButtonHandler implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
double width, length, area, perimeter;
length = Double.parseDouble(lengthTF.getText());
width = Double.parseDouble(widthTF.getText());
area = length * width;
perimeter = 2 * (length + width);
areaTF.setText("" + area);
perimeterTF.setText("" + perimeter);
}
}
private class ExitButtonHandler implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
System.exit(0);
}
}
Java Programming: Program Design Including Data Structures
29
Rectangle Program: Sample Run
public static void main(String[] args)
{
RectangleProgram rectObject = new RectangleProgram();
}
}
Java Programming: Program Design Including Data Structures
30
Programming Example:
Temperature Conversion
 Input: Temperature in Fahrenheit or Celsius
 Output: Temperature in Celsius if input is
Fahrenheit; temperature in Fahrenheit if input is
Celsius
Java Programming: Program Design Including Data Structures
31
Programming Example:
Temperature Conversion
(continued)
Solution:
1. Create the appropriate JLabels,
JTextFields, JButtons
2. Add them to the created content pane
3. Calculate the appropriate conversions when the
buttons are clicked and an event is triggered
Java Programming: Program Design Including Data Structures
32
Sample Run for TempConversion
Java Programming: Program Design Including Data Structures
33
Sample Run for TempConversion
//Java program to convert temperature between Celsius and
//Fahrenheit.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class TempConversion extends JFrame
{
private JLabel celsiusLabel;
private JLabel fahrenheitLabel;
private JTextField celsiusTF;
private JTextField fahrenheitTF;
private CelsHandler celsiusHandler;
private FahrHandler fahrenheitHandler;
private
private
private
private
private
static
static
static
static
static
final
final
final
final
final
int WIDTH = 500;
int HEIGHT = 75;
double FTOC = 5.0 / 9.0;
double CTOF = 9.0 / 5.0;
int OFFSET = 32;
Java Programming: Program Design Including Data Structures
34
Sample Run for TempConversion
//Java program to convert temperature between Celsius and
//Fahrenheit.
public TempConversion()
{
setTitle("Temperature Conversion");
Container c = getContentPane();
c.setLayout(new GridLayout(1, 4));
celsiusLabel = new JLabel("Temp in Celsius: ",
SwingConstants.RIGHT);
fahrenheitLabel = new JLabel("Temp in Fahrenheit: ",
SwingConstants.RIGHT);
celsiusTF = new JTextField(7);
fahrenheitTF = new JTextField(7);
Java Programming: Program Design Including Data Structures
35
Sample Run for TempConversion
c.add(celsiusLabel);
c.add(celsiusTF);
c.add(fahrenheitLabel);
c.add(fahrenheitTF);
celsiusHandler = new CelsHandler();
fahrenheitHandler = new FahrHandler();
celsiusTF.addActionListener(celsiusHandler);
fahrenheitTF.addActionListener(fahrenheitHandler);
setSize(WIDTH, HEIGHT);
setDefaultCloseOperation(EXIT_ON_CLOSE);
setVisible(true);
}
Java Programming: Program Design Including Data Structures
36
Sample Run for TempConversion
private class CelsHandler implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
double celsius, fahrenheit;
celsius =
Double.parseDouble(celsiusTF.getText());
fahrenheit = celsius * CTOF + OFFSET;
fahrenheitTF.setText(""+ String.format("%.2f", fahrenheit));
}
}
Java Programming: Program Design Including Data Structures
37
Sample Run for TempConversion
private class FahrHandler implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
double celsius, fahrenheit;
fahrenheit =
Double.parseDouble(fahrenheitTF.getText());
celsius = (fahrenheit - OFFSET) * FTOC;
celsiusTF.setText(""+ String.format("%.2f", celsius));
}
}
public static void main( String[] args)
{
TempConversion tempConv = new TempConversion();
}
}
Java Programming: Program Design Including Data Structures
38
Object-Oriented Design
Simplified methodology:
1.
2.
3.
4.
5.
Write down detailed description of problem
Identify all (relevant) nouns and verbs
From list of nouns, select objects
Identify data components of each object
From list of verbs, select operations
Java Programming: Program Design Including Data Structures
39
Object-Oriented Design:
Example 1
 Problem statement:
 Write a program to input the length and width of a
rectangle, and calculate and print the perimeter and
area of the rectangle
 Nouns:
 Length, width, rectangle, perimeter, area
Java Programming: Program Design Including Data Structures
40
class Rectangle with Data
Members and Operations
Java Programming: Program Design Including Data Structures
41
Object-Oriented Design:
Example 2
A place to buy candy is from a candy machine. A
new candy machine is bought for the gym, but it is
not working properly. The candy machine has four
dispensers to hold and release items sold by the
candy machine and a cash register. The machine
sells four products —candies, chips, gum, and
cookies—each of which is stored in a separate
dispenser. You have been asked to write a program
for this candy machine so that it can be put into
operation.
Java Programming: Program Design Including Data Structures
42
Object-Oriented Design:
Example 2
The program should do the following:
 Show the customer the different products sold by the
candy machine
 Let the customer make the selection
 Show the customer the cost of the item selected
 Accept money from the customer
 Return change
 Release the item, that is, make the sale
Java Programming: Program Design Including Data Structures
43
Object-Oriented Design:
Example 2
Java Programming: Program Design Including Data Structures
44
Object-Oriented Design:
Example 2
Java Programming: Program Design Including Data Structures
45
Implementing Classes
and Operations
 Algorithms are used to implement operations
 Construct and implement your own methods
 Classes Integer, Double, Character, Long,
Float:
 Known as wrapper classes
 Provided so that values of primitive data types can
be treated as objects
 Have limitations (cannot change value stored in
objects)
Java Programming: Program Design Including Data Structures
46
The class Integer
Java Programming: Program Design Including Data Structures
47
The class Integer
(continued)
Java Programming: Program Design Including Data Structures
48
The class Integer
(continued)
Integer num;
num = new Integer(86)
Java Programming: Program Design Including Data Structures
49
The class Integer
(continued)
int x;
Integer num;
num = 25;
This statement is equivalent to the statement:
num = new Integer(25);
The expression:
num = 25;
is referred to as autoboxing of the int type.
Java Programming: Program Design Including Data Structures
50
The class Integer
(continued)
int x;
Integer num;
The statement:
x = num;
This statement is equivalent to the statement:
x = num.intValue();
This statement is referred to as auto unboxing of the int type.
Java Programming: Program Design Including Data Structures
51
The class Integer
(continued)
 To compare the values of two Integer objects,
you can use the method compareTo
 If you want to compare the values of two Integer
objects only for equality, then you can use the
method equal
Java Programming: Program Design Including Data Structures
52
The class IntClass
Java Programming: Program Design Including Data Structures
53
The class IntClass
(continued)
Java Programming: Program Design Including Data Structures
54
Chapter Summary
 Every GUI contains a window
 Various components are added to the content pane
of a window
 class Frame is used to create windows
 JLabel is used to label GUI components and
display information to user
 JTextField is used for input/output
 JButton generates action event
 Action event is sent to action listener
 Action listener must have method called
actionPerformed
Java Programming: Program Design Including Data Structures
55
Chapter Summary (continued)
 A class is a collection of data members and methods
associated with those members.
 Object-oriented design (OOD):
 Starts with a problem statement.
 Identifies required classes with nouns in problem
statement.
 Identifies required methods with verbs in problem
statement.
Java Programming: Program Design Including Data Structures
56