PRINCE MERT O.

NICOLAS
NEUST
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.
Sample Code and Output
Seatwork
1. Import statement for awt.
2. Import statement for swing.
3. Instantiate a JFrame named form1 with title Seatwork.
4. Set its size to 700 px high and 350 px wide.
5. Make form1 visible.
6. Set form1’s layout to borderlayout.
7. Create a button(btn_N) with the text North.
8. Create a button(btn_S) with the text South.
9. Add both buttons in the form1.
10.Set the defaultCloseOperation of the form1.
End of Discussion
Case No. 2
1.You are about to create a windowed output for your own
choice of business/ transaction.
2.Your task is to integrate at least 5 GUI elements aside from
JLabel, JTextField and JButton. Extend an extra mile on
researching and studying how to use each element of your
choice.
3.Each element should have corresponding events or actions
such as simple calculations.
Criteria 5 4 3 2 1
Uses appropriate GUI Excellently Achieved Somehow Partially Not
Achieved Achieved Achieved and Achieved
Element. Needs
Improvement
Places GUI elements in an Excellently Achieved Somehow Partially Not
Achieved Achieved Achieved and Achieved
effective manner. Needs
Improvement
Actions are integrated into Excellently Achieved Somehow Partially Not
Achieved Achieved Achieved and Achieved
each element correctly. Needs
Improvement
Calculations are present and Excellently Achieved Somehow Partially Not
Achieved Achieved Achieved and Achieved
is done correctly. Needs
Improvement
Output is visually appealing Excellently Achieved Somehow Partially Not
Achieved Achieved Achieved and Achieved
Needs
Improvement