IT PF-01
Object-Oriented
Programming
Prince Mert O. Nicolas, LPT, MIT
Nueva Ecija University of Science and Technology
Email: [email protected]
UNIT 8
GUI Concepts
Objectives
1. To be able to understand:
1. Swing and awt Components
2. To be able to use:
1. JFrame class
2. JLabel class
3. Layout manager(namely FlowLayout)
4. JTextFields, JButtons and tooltips to add
into a JFrame
What is Graphical User
Interface(GUI)?
• Commonly pronounced as gooey.
• Buttons, text fields, windows or any icons
that let the user interact with the computer.
Why use GUI?
Imagine navigating
your drive with this Than this
Key differences between GUI and
CLI
Graphical user interface(GUI) Command line interface(CLI)
• faster to learn • higher memorization
• takes more time to requirement
code • less time to code
• can easily support • multitask uncommon
multitask • must remember all the
• novice friendly commands
Things to remember:
• Component is a single part of a GUI.
• Container is an example of component that
holds another components.
• Window is a rectangular shaped container.
Examples of prewritten java GUI
libraries (aka packages)
Abstract Windows Toolkit (AWT)
• One of the first GUI (Original Gangster) library.
• Basic components.
Swing
• More portable.
• More features than AWT.
JFrame
• Predefined class by the swing library.
• Thus we must import swing
code: import javax.swing.*;
• To create new instance:
format:
JFrame identifierForFrame = new JFrame(“window title”);
example:
JFrame frame1 = new JFrame(“This is frame 1”);
Modifying JFrame
• We can set size of JFrame width, height = integer
in pixels(px)
format: identifierForFrame.setSize(width, height);
example: frame1.setSize(400, 200);
• Setting visibility of Jframe true or false
format: identifierForFrame.setVisible(boolean);
example: frame1.setVisible(true);
Modifying JFrame
JFrame includes default controls which are:
• minimize
• restore
• maximize
• close
Modifying JFrame
• Close button will only hide window on default.
• We need to ensure termination on close.
format:
identifierForFrame.setDefaultCloseOperation(JFrame
. EXIT_ON_CLOSE);
example:
frame1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Sample code for JFrame
Sample output of JFrame
JLabel
• Predefined class by the swing library.
• A component that appears in JFrame as a text and
can’t be edited.
• To create new instance:
format: JLabel identifierForLabel = new
JLabel(“display text");
Example: JLabel label1 = new JLabel(“Hello there!");
Adding JLabel
• To add JLabel in the desired JFrame:
format:
identifierForFrame.add(nameOfLabel);
Example : frame1.add(label1);
Modifying JLabel
• Modifying Jlabel can be done by Font method
• Font method is from awt package.
Step 1: awt must be imported.
code: import java.awt.*;
Modifying JLabel
Step 2: Next create new instance of Font method.
format:
Font identifierForFont = new Font(“fontType”, Font.EMPHASIS,
fontsize:int);
code:
Font font1 = new Font(“Times New Roman”, Font.BOLD, 40);
Modifying JLabel
Step 3: Lastly apply the Font method to chosen
Jlabel using setFont
format: identifierForLabel.setFont(nameOfFont);
code: label1.setFont(font1);
Step 4: Apply Jlabel on the previous code.
Sample code for JLabel
Sample output for JLabel
Layout Manager
• a class that controls component position.
• different types of layout manager:
▪ FlowLayout()
▪ BorderLayout()
▪ BoxLayout()
▪ CardLayout()
▪ GridLayout()
▪ SpringLayout()
• On this presentation we will talk about
FlowLayout()
FlowLayout()
• Predefined class by awt library.
• If there’s space available, components will fall in line
from left to right.
• If not it will be placed next line.
• FlowLayout’s default components position is centered;
• It can be altered using:
o FlowLayout(FlowLayout.RIGHT)
o FlowLayout(FlowLayout.LEFT)
o FlowLayout(FlowLayout.LEADING)
o FlowLayout(FlowLayout.TRAILING)
FlowLayout()
• To set the layout, use setLayout() method.
format: identifierForFrame.setLayout(new FlowLayout());
code: frame1.setLayout(new FlowLayout());
• To demonstrate FlowLayout() add new component
which is JLabel.
Sample code for FlowLayout()
Sample output for FlowLayout()
JTextField
• a component that lets the user input character or
string.
• To create new instance:
format:
JTextField identifierForJTextField = new JTextField(length:int);
code:
JTextField textField1 = new JTextField(3);
JTextField
• adding JTextField into JFrame
format:
identifierForFrame.add(identifierForJTextField);
code:
frame1.add(textField1);
• note: data that will be stored on JTextField is Character,String on
default. So if you want to calculate numbers you have to use parse()
method.
JButton
Buttons are components that is used to trigger an
action or make a selection when the
user clicks it.
JButton is a component of swing class that lets the
developer create a button.
The line below creates a JButton.
JButton press_btn = new JButton (“Click to Continue”);
Tooltips
Tooltips are pop out windows that help a user
understand the purpose of components
present in an application. Tooltips appears when
the user hovers the mouse pointer over a
component.
We just need to use a method setToolTipText() to
enable tooltips in a component.
End of Discussion
Thank you!
