Lecture 10
Graphical User Interface
An introduction
Sahand Sadjadee
sahand.sadjadee@liu.se
Programming Fundamentals – 725G61
http://www.ida.liu.se/~725G61/
Department of Computer and Information Science (IDA)
Linköping University
Sweden
January 10, 2014
1
Graphical User Interface (GUI)
In general, a user interface is composed of a set of components
which provide the possibility that a human via five senses interact
with a device, machine or a unit which can perform a set of
functionalities.
A phone equipped with a User Interface for human interaction.
Every interaction with a telephone device is
composed of three parts
1. Input to the device provided by the user.
2. Output from the device to the user.
3. Actions performed by the user which each lead to different
functionalities executed by the device.
In simple words an interaction with a device means working with it.
A sample interaction with a telephone device
when a person tries to call another person:
1. Pick up the handset(action) to clear the line(functionality).
2. Dial via the dial pad (input) to make call(functionality)
3. The other party rings as you can hear a voice pattern via the
head set (output).
4. The other party picks up and you start to speak via head
set( input).
5. The other party speaks and you hear it via the head set
(output).
6. The conversation is finished and you hang up(functionality) by
putting back the head set (action).
Graphical User Interface
Graphical User Interface or GUI Is a type of user interface
which allows users to interact with computer programs
through graphical components.
By interaction, it means providing input, viewing output and
executing different functionalities provided by the program.
Microsoft Windows calculator equipped with Graphical
User Interface.
Unlike Graphical User Interface, A Text-based user interface is
only composed of characters formed in different lines.
A finance program equipped with Text-based User Interface
for human interaction.
Swing
Swing is an API as part of Java Standard Library which provides
classes and interfaces required for implementing Graphical User
Interface for Java Desktop Applications.
Java Desktop Applications are Java programs which run on Personal
Computers.
A simple calculator implemented by using Swing API.
Some facts about Swing
1. Swing components look the same on every Operating System like
Linux, Unix, Mac OS X and Windows.
2. Every class as part of Swing which starts with “J” provides a
viewable component.
3. The Swing API is located in “javax.swing” package.
4. It is not possible remember every detail about every
class so it is necessary to refer to official Swing documentation
available at
http://docs.oracle.com/javase/7/docs/api/javax/swing/package-summary.html
Swing classes and interfaces
JFrame
JFrame is a class designed for creating the main window in a Java
desktop application.
1. the main window is
executed by the user.
displayed first when the
program is
2. The main window is closed by the user for quitting the
program.
3. The main window represents the main view of the
application and contains other components.
An empty main window created by using JFrame class
Some of the methods provided by JFrame class
1. public void setTitle(String title)
Set the title of the main window. The default title is “”.
2. public void setVisible(boolean b)
Displays the main window to the user.
3. public void setSize(int width, int height)
Sets the size of the main window in pixels.
The default size is 0X0.
4. public void setLocation(int x, int y)
Sets the location of the main window in the screen in pixels.
Top left corner has the (0,0) coordination.
5. public void setDefaultCloseOperation(int operation)
Defines what happens when the user clicks on the close
button of the main window. By default it hides and does not
close.
6. public Component add(Component comp)
Adds a new component to the main window.
How do we use Jframe?
1. Create a class which has a main method.
2. Inside of the main method, create an object from class Jframe.
3. Inside of the main method, call the method setVisible(true) on
the created object.
Works fine and pretty straight forward but it has a problem!
What is the problem then?
By using the previous approach we cannot change a behavior or add
new attributes and behaviors to the main window!
To be able to do that so, we need to use inheritance first as follow:
1. Create a new class.
2. Extend the new class by inheriting from JFrame class.
3. Override the desired methods, declare different
constructors/destructor or add new fields and methods.
4. Create a class which has a main method.
5. Create an object from the newly created class inside of the main
method.
6. Call method setVisible(true) on the created object.
7. initialize the main window by calling required methods inside of
Of a constructor.
a program which has one main window with the default size of 640X480.
// declaring a new class named MyFrame inheriting from the
JFrame class, steps 1 and 2.
// MyFrame.java
class MyFrame extends javax.swing.JFrame{
// declaring different constructors comparing to JFrame, step
3.
public MyFrame(){
setSize(640, 480); // setting the default size to
640X480, step 7.
}
}
//Main.java, step 4
class Main{
public static void main(String[] args){
// assuming MyFrame is imported or the Main and MyFrame
classes locate in the same package.
MyFrame mainWindow = new MyFrame(); // creating an object
from MyFrame class, step 5.
mainWindow.setVisible(true); // step 6
}
}
JButton
The JButton class is used for creating buttons in Java Desktop
applications.
1. In general, a button is a click-able rectangular area which
contains a label or/and an image representing the functionality it
provides.
2. By clicking on a button, a method inside of the program
executes.
3. A button must be placed inside of the main window.
Some of the methods provided by JButton class
1. public void setText(String title)
Assigns a text as the label of the button.
2. public void setSize(int width, int height)
Sets the size of the button located inside of the main window.
3. public void setLocation(int x, int y)
Sets the location of the button inside of the main window.
4. public void addActionListener(ActionListener l)
Defines a method which is called when the button is clicked.
A button inside of the main window
How do we use class Jbutton?
8. Create a field of type Jbutton inside of the your newly created class
which inherits the Jframe class(our MyFrame class).
9. Create an object inside of a constructor of it(our MyFrame class)
10. Call the desired methods on the created Jbutton object inside of the
constructor like setSize and SetLocation methods.
11. add the button to the main window by using the Jframe::add method.
package se.liu.ida.gp.a8;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
// declaring a new class named MyFrame inheriting from the JFrame class,
steps 1 and 2.
// MyFrame.java
class MyFrame extends javax.swing.JFrame {
// declaring different constructors comparing to JFrame, step 3.
public MyFrame() {
setSize(640, 480); // setting the default size to 640X480, step 7
setLayout(null);
// disabling layout manager, step 7
button = new JButton("Click me!"); // step 9
button.setSize(120, 40);
button.setLocation(200, 200);
button.addActionListener(new ActionListener() { // step 10
@Override
public void actionPerformed(ActionEvent e) {
System.out.println("I am Clicked!");
}
});
add(button); //step 10
}
private JButton button; // step 8
}
// Main.java, step 4,5,6
Result- A button inside of the main window
JTextField
The JTextField class is used for creating text fields in Java
Desktop applications. In general, a text field is a single-line
rectangular area for inputting and outputting text from/to the
user. It only appears in the main window.
.
JTextArea
The JTextArea class is used for creating text areas in Java
Desktop applications. In general, a text area is a multi-line
rectangular area for inputting and outputting text from/to the
user. It only appears in the main window.
In other words, they are both simple text editors!
Some of the methods provided by both JTextField
and JTextArea classes
1. public void setText(String title)
Assigns a text to the text editor.
2. public String getText()
Returns the text currently inside of the text editor.
3. public void setLocation(int x, int y)
Sets the location of the text editor inside of the main window.
4. public void setSize(int width, int height)
Sets the size of the text editor inside of the main window.
A text field and a button inside of the main window
How do we use class JTextField/JTextArea classes?
We use these classes as we did for the JButton class. In fact this approach
applies for every component which appears inside of the main window.
Why is that!?
package se.liu.ida.gp.a8;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JTextField;
// declaring a new class named MyFrame inheriting from the JFrame class,
steps 1 and 2.
// MyFrame.java
class MyFrame extends javax.swing.JFrame {
// declaring different constructors comparing to JFrame, step 3.
public MyFrame() {
setSize(640, 480); // setting the default size to 640X480, step 7
setLayout(null);
// disabling layout manager, step 7
button = new JButton("Click me!"); // step 9
button.setSize(120, 40); //step 10
button.setLocation(200, 200);
//step 10
button.addActionListener(new ActionListener() { // step 10
@Override
public void actionPerformed(ActionEvent e) {
textField.setText("I'm clicked!");
}
});
add(button); //step 11
Continued ...
textField = new JTextField();
// step 9
textField.setSize(200, 40);
//step 10
textField.setLocation(340, 200); //step 10
add(textField);
//step 11
}
private JButton button; // step 8
private JTextField textField; //step 8
}
// Main.java, step 4,5,6
Result- A text field and a button inside of the main window
JLabel
The class JLabel is used for creating labels in GUI of a Java desktop
application.
1. In general, a label is a descriptive piece of text and/or an image
which is used for describing other components.
2. By design, some components have built-in labels like buttons and
some don't like text fields and text areas.
3. JLabels only appear in the main window.
Some of the methods provided by JLabel class
1. public void setText(String title)
Assigns a text as a label.
2. public String getText()
Returns the label.
3. public void setLocation(int x, int y)
Sets the location of the label inside of the main window.
4. public void setSize(int width, int height)
Sets the size of the label inside of the main window.
A label, a text field and a button inside of the main window
package se.liu.ida.gp.a8;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JLabel;
import javax.swing.JTextField;
// declaring a new class named MyFrame inheriting from the JFrame class, steps 1 a
// MyFrame.java
class MyFrame extends javax.swing.JFrame {
// declaring different constructors comparing to JFrame, step 3.
public MyFrame() {
setSize(640, 480); // setting the default size to 640X480, step 7
setLayout(null);
// disabling layout manager, step 7
button = new JButton("Click me!"); // step 9
button.setSize(120, 40); //step 10
button.setLocation(200, 200);
//step 10
button.addActionListener(new ActionListener() { // step 10
@Override
public void actionPerformed(ActionEvent e) {
textField.setText("I'm clicked!");
}
});
Continued...
add(button); //step 11
textField = new JTextField();
// step 9
textField.setSize(200, 40);
//step 10
textField.setLocation(340, 200); //step 10
add(textField);
//step 11
label = new JLabel(); //step 9
label.setText("Name"); //step 10
label.setSize(200, 40); //step 10
label.setLocation(340, 150); //step 10
add(label); //step 11
}
private JButton button; // step 8
private JTextField textField; //step 8
private JLabel label; //step 8
}
// Main.java, step 4,5,6
Result- A label, a text field and a button inside of the
main window
Result- A label, a text field and a button inside of the
main window after the click on the button.
JOptionPane
The JOptionPane class is used for showing different types of modal
dialog boxes to the users.
1. A dialog box is a window containing certain components
designed for inputting or outputting data from/to the users.
2. A modal dialog box does not allow the user to work with any
other component in the application until the dialog box is
dismissed.
3. A dialog box appears by clicking on a button inside of the main
window.
4 different modal dialog boxes provided by JOptionPane
Method Name
Description
showConfirmDialog
Asks a confirming question, like yes/no/cancel.
showInputDialog
Prompt for some input.
showMessageDialo
g
Tell the user about something that has happened.
showOptionDialog
The Grand Unification of the above three.
All methods are static and there is no need to create an object from
JOptionPane to use them!
package se.liu.ida.gp.a8;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JLabel;
import javax.swing.JTextField;
// declaring a new class named MyFrame inheriting from the JFrame class, steps
1 and 2.
// MyFrame.java
class MyFrame extends javax.swing.JFrame {
// declaring different constructors comparing to JFrame, step 3.
public MyFrame() {
setSize(640, 480); // setting the default size to 640X480, step 7
setLayout(null);
// disabling layout manager, step 7
button = new JButton("Click me!"); // step 9
button.setSize(120, 40); //step 10
button.setLocation(200, 200);
//step 10
button.addActionListener(new ActionListener() { // step 10
@Override
public void actionPerformed(ActionEvent e) {
String text = textField.getText();
Javax.swing.JoptionPane.showMessageDialog(null, text);
}
});
Continued...
add(button); //step 11
textField = new JTextField();
// step 9
textField.setSize(200, 40);
//step 10
textField.setLocation(340, 200); //step 10
add(textField);
//step 11
label = new JLabel(); //step 9
label.setText("Name"); //step 10
label.setSize(200, 40); //step 10
label.setLocation(340, 150); //step 10
add(label); //step 11
}
private JButton button; // step 8
private JTextField textField; //step 8
private JLabel label; //step 8
}
// Main.java, step 4,5,6
Result- calling showMessageDialog on JoptionPane
class.
That was it, hope you enjoyed it!