explore how the gui components frame, label, textile, and j button work
TRANSCRIPT
![Page 1: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/1.jpg)
1
Chapter 7
Graphical User Interface (GUI) and Object-Oriented Design (OOD)
![Page 2: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/2.jpg)
2
Chapter Objectives
• Learn about basic GUI components
• Explore how the GUI components Frame, Label, Textile, and JButton work
• Become familiar with the concept of event-driven programming
![Page 3: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/3.jpg)
3
Chapter Objectives
• Discover events and event handlers
• Explore object-oriented design
• Learn how to identify objects, classes, and members of a class
![Page 4: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/4.jpg)
4
Graphical User Interface (GUI) Components
• View inputs and outputs simultaneously
• One graphical window
• Input values in any order
• Change input values in window
• Click on buttons to get output
![Page 5: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/5.jpg)
5
Java GUI Components
![Page 6: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/6.jpg)
6
Graphical User Interface (GUI) Components
• GUI components placed in content pane
• GUI components– Windows– Labels– Text areas– Buttons
![Page 7: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/7.jpg)
7
GUI Components
• Added to content pane of window
• Not added to window itself
• Pixel: picture element
![Page 8: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/8.jpg)
8
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
![Page 9: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/9.jpg)
9
class Frame
• GUI window instance created as instance of Frame
• Provides various methods to control window attributes
![Page 10: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/10.jpg)
10
Methods Provided by the class Frame
![Page 11: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/11.jpg)
11
Methods Provided by the class Frame
![Page 12: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/12.jpg)
12
Two Ways to Create a Window
• First way – Declare object of type Frame– Instantiate object– Use various methods to manipulate window
• Second way– Create class containing application program by
extending definition of class Frame– Utilizes mechanism of inheritance
![Page 13: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/13.jpg)
13
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 Frame
![Page 14: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/14.jpg)
14
Methods Provided by the class Container
![Page 15: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/15.jpg)
15
class Label
• Labels: objects of particular class type• class Label: used to create labels• Label attributes
– title– width– height
• To create a label– Instantiate object of type Label – Modify attributes to control display of labels
![Page 16: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/16.jpg)
16
Methods Provided by the class Label
![Page 17: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/17.jpg)
17
Methods Provided by the class Label
![Page 18: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/18.jpg)
18
class Textile
• Text fields: objects belonging to class Textile
• To create text field– Declare reference variable of type Textile– Instantiate object
![Page 19: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/19.jpg)
19
Methods Provided by the class Textile
![Page 20: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/20.jpg)
20
class JButton
• Provided to create buttons in Java
• To create button– Same technique as creating Label and Textile
![Page 21: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/21.jpg)
21
Methods Provided by the class JButton
![Page 22: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/22.jpg)
22
Methods Provided by the class JButton
![Page 23: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/23.jpg)
23
Handling an Event
• Action event: event created when JButton is clicked
• Event listener: object which receives message when JButton is clicked
• In Java, you must register the listener
![Page 24: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/24.jpg)
24
Handling an Event
• class ActionListener– Handles action event – Part of package java.awt.Event– The class ActionListener is a special type of
class (interface)– Must contain actionPerformed method
![Page 25: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/25.jpg)
25
Rectangle Program: Sample Run
![Page 26: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/26.jpg)
26
Programming Example: Temperature Conversion
• Input: temperature in Fahrenheit or Centigrade
• Output: temperature in Centigrade if input is Fahrenheit; temperature in Fahrenheit if input is Centigrade
![Page 27: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/27.jpg)
27
Programming Example: Temperature Conversion
• Solution:– Create the appropriate JLabels, JTextFields,
JButtons– Add them to the created content pane – Calculate the appropriate conversions when the
buttons are clicked and an event is triggered
![Page 28: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/28.jpg)
28
Sample Run for TempConversion
![Page 29: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/29.jpg)
29
Object-Oriented Design
• Simplified methodology1. Write down detailed description of problem
2. Identify all (relevant) nouns and verbs
3. From list of nouns, select objects
4. Identify data components of each object
5. From list of verbs, select operations
![Page 30: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/30.jpg)
30
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
![Page 31: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/31.jpg)
31
class Rectangle with Data Members and Operations
![Page 32: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/32.jpg)
32
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 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.
![Page 33: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/33.jpg)
33
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.
![Page 34: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/34.jpg)
34
Object-Oriented Design Example 2
![Page 35: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/35.jpg)
35
Object-Oriented Design Example 2
![Page 36: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/36.jpg)
36
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)
![Page 37: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/37.jpg)
37
The class IntClass
![Page 38: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/38.jpg)
38
The class IntClass
![Page 39: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/39.jpg)
39
Chapter Summary
• Every GUI contains a window
• Various components are added to content pane of window
• class Frame is used to create windows
• Label is used to label GUI components and display information to user
• Textile is used for input/output
• JButton generates action event
• Action event is sent to action listener
• Action listener must have method called actionPerformed
![Page 40: Explore How The Gui Components Frame, Label, Textile, And J Button Work](https://reader035.vdocument.in/reader035/viewer/2022062704/5562f98cd8b42a213b8b570e/html5/thumbnails/40.jpg)
40
Chapter Summary
• class: collection of data members and methods associated with those members
• Object-Oriented Design (OOD)– Starts with a problem statement– Identifies classes required with nouns in
problem statement– Identifies methods required with verbs in
problem specification