Unit 2.1_GUI
Unit 2.1_GUI
Bhupendra Panchal
4/21/2023 1
Outlines
• Java Beans: Common Elements of Graphical User
Interfaces: Introduction, Main features and Technology of
GUI, Introducing the Java foundation classes, Event
Model, JFC Sample programs, Layout managers, Events,
• Swing and JavaFX are two commonly used applications to create GUIs
in Java.
• As of 2014, the most popular GUIs are Microsoft Windows and Mac OS
And, if we talk about mobile devices, the Apple's IOS and Google's
Android Interface are the widely used GUIs.
4/21/2023 3
Basic Components of a GUI
• Pointer: It is a symbol that appears on the display screen. It can be
moved to select commands and objects.
• Pointing device: It allows you move the pointer and select objects on
the screen, e.g. mouse or trackball.
4/21/2023 4
Elements of GUI:
A GUI comprises an array of user interface elements. All these elements
are displayed when a user is interacting with an application and they are
as follows:
4/21/2023 5
GUI KEY Benefits
ease.
interface.
4/21/2023 6
GUI KEY Benefits
2. Swing API: This is a set of graphical libraries developed on top of the AWT framework
and is a part of Java Foundation Classes (JFC). Swing has modular architecture wherein
we can use plug-and-play for the components.
4/21/2023 7
ABSTRACT WINDOW TOOLKIT (AWT)
4/21/2023 8
AWT
ABSTRACT WINDOW TOOLKIT (AWT)
Java AWT (Abstract Window Toolkit) is an API to develop GUI or
window-based application in java.
4/21/2023 10
AWT Classes
The AWT supports the following types of controls:
1. Labels
2. Push buttons
3. Check boxes
4. Choice lists
5. Lists
6. Scroll bars
7. Text editing
4/21/2023 11
Java AWT Class Hierarchy
4/21/2023 12
Java AWT Class Hierarchy
Container: The Container is a component in AWT that can contain other
components like buttons, textfields, labels etc. The classes that extend Container
class are known as container such as Frame, Dialog and Panel.
Window: The window is the container that has no borders and menu bars. You
must use frame, dialog or another window for creating a window.
Panel: The Panel is the container that doesn't contain title bar and menu bars. It
can have other components like button, textfield etc.
Frame: The Frame is the container that contain title bar and can have menu bars.
It can have other components like button, textfield etc.
4/21/2023 13
Java AWT Example
To create simple AWT example, you need a frame. There are two ways to create
a GUI using Frame in AWT.
4/21/2023 14
Java AWT Example using Inheritance
// importing Java AWT class // frame size 300 width and 300 height
import java.awt.*; setSize(300,300);
// extending Frame class to our class AWTExam // setting the title of Frame
ple1 setTitle("This is our basic AWT example");
public class AWTExample1 extends Frame {
// no layout manager
// initializing using constructor setLayout(null);
AWTExample1() {
// now frame will be visible, by default it is
// creating a button not visible
Button b = new Button("Click Me!!"); setVisible(true);
}
// setting button position on screen public static void main(String args[]) {
b.setBounds(30,100,80,30);
// creating instance of Frame class
// adding button into frame AWTExample1 f = new AWTExample1();
add(b);
4/21/2023 } 15
}
Java AWT Example using Inheritance
4/21/2023 16
Java AWT Example using Association
// importing Java AWT class
import java.awt.*; // adding components into frame
f.add(b);
// class AWTExample2 directly creates instance of Frame class f.add(l);
class AWTExample2 { f.add(t);
// initializing using constructor // frame size 300 width and 300 height
AWTExample2() { f.setSize(400,300);
4/21/2023 19
Introducing the Java foundation classes
4/21/2023 20
Introducing the Java foundation classes
• Java provides a set of features and functionality for developing
graphical user interfaces. This set of features is known as Java
Foundation Classes or JFC.
• As the result, Sun Microsystems wrote the accessibility API and IBM
has tested their API and implemented it on their foundation classes.
4/21/2023 21
Introducing the Java foundation classes
• Using JFC we can make applications more interactive. JFC contains a
set of graphical components that can be easily plugged into our
application and programmed as per our requirements.
4/21/2023 22
Components of JFC
4/21/2023 23
Introducing the Java foundation classes
Advantage of JFC
• Its components are pluggable and require few lines of code.
• It retains Java qualities.
• An application that runs flawlessly on one OS runs flawlessly on
another OS.
• It offers an open architecture.
• Accordingly, the exhibition of a GUI made through JFC is unsurprising.
Therefore, JFC are widely used in client-side applications.
Components of JFC
• The JFC components includes all
the JavaBeans and swing Components that offer re-usability,
interoperability, and portability.
4/21/2023 24
GUI in JAVA: Swing and JavaFX
4/21/2023 25
GUI in JAVA: Swing and JavaFX
• As mentioned, to create a GUI in Java, Swing and JavaFX are
the most commonly used applications.
4/21/2023 26
Swing in JAVA
• Swing in Java is a Graphical User Interface (GUI) toolkit that
includes the GUI components. Swing provides a rich set of
widgets and packages to make sophisticated GUI components
for Java applications.
• The Java Swing library is built on top of the Java Abstract Widget
Toolkit (AWT), an older, platform dependent GUI toolkit.
• You can use the Java simple GUI programming components like
button, textbox, etc., from the library.
4/21/2023 27
4/21/2023 28
Java Swing class Hierarchy Diagram
4/21/2023 29
Difference between AWT and Swing
4/21/2023 30
4/21/2023 31
4/21/2023 32
What is a Container Class?
Container classes are classes that can have other components on
it. So for creating a Java Swing GUI, we need at least one container
object.
4/21/2023 33
4/21/2023 34
Simple example of Swing by inheritance
import javax.swing.*;
public class Simple2 extends JFrame{
//inheriting JFrame
JFrame f;
Simple2(){
JButton b=new JButton("click");
//create button
b.setBounds(130,100,100, 40);
import javax.swing.*;
public class Simple {
JFrame f;
Simple(){
f=new JFrame();//creating instance of JFrame
import javax.swing.*;
public class PasswordFieldExample {
public static void main(String[] args) {
JFrame f=new JFrame("Password Field Example");
JPasswordField value = new JPasswordField();
JLabel l1=new JLabel("Password:");
l1.setBounds(20,100, 80,30);
value.setBounds(100,100,100,30);
f.add(value); f.add(l1);
f.setSize(300,300);
f.setLayout(null);
f.setVisible(true);
}
}
4/21/2023 38
Registration Form Example
4/21/2023 39
Registration Form Example
package JDBCDemo;
import java.awt.Container;
import java.awt.Font;
import javax.swing.*;
public class SwingDemo {
public static void main(String args[]) {
4/21/2023 43
Creating a chat frame
4/21/2023 44
Creating a chat frame: Code
The following is the code for creating a chat frame:
package JDBCDemo;
import java.awt.BorderLayout;
import javax.swing.*;
public class MyFirstGUI {
public static void main(String args[]){
try {
//Create the Frame
JFrame jframe = new JFrame("Chat Screen");
jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
jframe.setSize(400, 400);
// create two menubar button FILE and HELP
JMenuBar menuBar = new JMenuBar();
JMenu fileMenu = new JMenu("FILE");
JMenu helpMenu = new JMenu("Help");
menuBar.add(fileMenu);
menuBar.add(helpMenu);
4/21/2023 45
Creating a chat frame: Code
// create two more option in FILE button
JMenuItem fileMenu1 = new JMenuItem("new file");
fileMenu.add(fileMenu1);
fileMenu.add(fileMenu2);
// Text Area at the Center
JTextArea textArea = new JTextArea();
//Create the panel at bottom and add label, textArea and buttons
JPanel panel = new JPanel(); // this panel is not visible in
output
JLabel label = new JLabel("Please Enter Text");
}
catch(Exception e)
{
}
}
}
4/21/2023 47
Java LayoutManagers
4/21/2023 48
Java LayoutManagers
The LayoutManagers are used to arrange components in a particular
manner. The Java LayoutManagers facilitates us to control the
positioning and size of the components in GUI forms.
There are the following classes that represent the layout managers:
1. java.awt.BorderLayout
2. java.awt.FlowLayout
3. java.awt.GridLayout
4. java.awt.CardLayout
5. java.awt.GridBagLayout
6. javax.swing.BoxLayout
7. javax.swing.GroupLayout
8. javax.swing.ScrollPaneLayout
9. javax.swing.SpringLayout etc.
4/21/2023 49
Java BorderLayout
4/21/2023 52
Java GridLayout
4/21/2023 53
Example of GridLayout class:
// import statements
import java.awt.*;
// adding buttons to the frame
import javax.swing.*;
// since, we are using the parameterless constructor, therfore;
// creating 9 buttons
JButton btn1 = new JButton("1"); // setting the grid layout using the parameterless constructor
JButton btn2 = new JButton("2");
frameObj.setLayout(new GridLayout());
JButton btn3 = new JButton("3");
JButton btn4 = new JButton("4");
JButton btn5 = new JButton("5");
frameObj.setSize(300, 300);
JButton btn6 = new JButton("6");
frameObj.setVisible(true);
JButton btn7 = new JButton("7");
}
JButton btn8 = new JButton("8");
JButton4/21/2023
btn9 = new JButton("9"); 54
// main method
Example of GridLayout class:
4/21/2023 55
Java FlowLayout
• The Java FlowLayout class is used to arrange the components in a line, one
after another (in a flow). It is the default layout of the applet or panel.
// creating 9 buttons
JButton btn1 = new JButton("1"); // setting the Flow layout using the parameterless constructor
JButton btn2 = new JButton("2");
frameObj.setLayout(new FlowLayout());
JButton btn3 = new JButton("3");
JButton btn4 = new JButton("4");
JButton btn5 = new JButton("5");
frameObj.setSize(300, 300);
JButton btn6 = new JButton("6");
frameObj.setVisible(true);
JButton btn7 = new JButton("7");
}
JButton btn8 = new JButton("8");
JButton4/21/2023
btn9 = new JButton("9"); 57
// main method
Java FlowLayout
frameObj.setLayout(new FlowLayout());
4/21/2023 58
Java BoxLayout
• The Java BoxLayout class is used to arrange the components either vertically
or horizontally. For this purpose, the BoxLayout class provides four constants.
They are as follows:
Fields of BoxLayout Class
1. public static final int X_AXIS: Alignment of the components are horizontal
from left to right.
2. public static final int Y_AXIS: Alignment of the components are vertical from
top to bottom.
3. public static final int LINE_AXIS: Alignment of the components is similar to
the way words are aligned in a line, which is based on the
ComponentOrientation property of the container.
4. public static final int PAGE_AXIS: Alignment of the components is similar to
the way text lines are put on a page, which is based on the ComponentOrientation
property of the container.
Constructor of BoxLayout class
1. BoxLayout(Container c, int axis): creates a box layout that arranges the
components with the given axis.
4/21/2023 59
Java BoxLayout
import java.awt.*;
import javax.swing.*;
public BoxLayoutExample1 () {
buttons = new Button [5];
In this model, a
source generates an
event and forwards
it to one or more
listeners. The
listener waits until it
receives an event.
Once it receives the
event, it is
processed by the
listener and returns
it.
4/21/2023 61
Event Model in Java
• The Events are the objects that define state change in a source. An event
can be generated as a reaction of a user while interacting with GUI
elements.
4/21/2023 63
Java Event classes and Listener interfaces
package JDBCDemo;
import java.awt.*;
import java.awt.event.*;
class JavaModel extends Frame implements ActionListener {
JavaModel()
{
Frame f=new Frame();
TextField textField = new TextField();
f.add(textField); textField.setBounds(60, 50, 180, 25);
Button button = new Button("click Here");
button.setBounds(100, 120, 80, 30);
button.addActionListener(this);
add(textField);
add(button); setVisible(true);
}
public void actionPerformed(ActionEvent e)
{
textField.setText("GFG!");
}
public static void main(String[] args)
{
new JavaModel();
}
} 4/21/2023 64