Professional Documents
Culture Documents
Programming
CPE313,MIS313,ISYE313,CMPE313,IT31,ITEC313,ISE313
by
Dr. Cain Kazimoglu
1
What makes up a GUI?
This lecture shows how to write Java programs that run in any
Computer OS using Graphical User Interface (GUI)
Components such as
Button,
TextField,
Label,
checkBox,
radioButton,
ComboBoxes
Where do we start?
We need to create the form first which would involve the
GUI components and act as the user interface template
This form is also called the content pane
It is part of the Java Swing library and uses a class called
JFrame
2
JFrame Basics (1)
To Create a JFrame, you need to extend the JFrame class
and implement ActionListener event.
If you do not put the import statements, the Java compiler will
not understand which components refer to which library class
files.
3
JFrame Basics (3)
4
JFrame Basics (5)
The size of the form is defined in setSize function
400 px
300 px
A JFrame example
5
A form is a JFrame extention that usually listens a button
click event (usually represented within the action
performed method). Therefore, almost all forms in Java
implements the ActionListener Interface
6
means we can use the features
of the class JFrame as this is its
subclass
says
that we want our application to
“listen” for events such as the user
pressing a button (writing this means
that the class must have an
actionPerformed method)
7
the instructions to make had no
parameters () so we need the
constructor with no parameters
8
A different example using the template
with class renamed FirstFrame
different size
different title
9
Exercise 1 Answer
JButton
Buttons are the predominant GUI components that provide
interaction with the user.
10
Buttons in Swing Library
One of the first ways to communicate with the
user is to get then to click on a button
We have already seen this set up for us in the
JOptionPane.showConfirmDialog
Adding a JButton
1 JButton myButton = new JButton("Press");
2 add(myButton);
myButton.addActionListener(this);
3 public
{
void actionPerformed(ActionEvent e)
11
Adding a JButton (1)
Adding a JButton(2)
adds the button to the content
pane
add(myButton);
myButton.addActionListener(this);
12
Adding a button(3)
this is the method which is automatically
called when the ActionListener ‘hears’
that the button has been clicked
( pressed by the mouse)
13
Resizing buttons
Image Icon
You can set an image to an icon through using
the image icon object.
14
Having problems with
image buttons?
If you are having trouble with image icons, this is most probably
because Java API cannot find the image in the specified
location. Luckily, you can check whether or not the image file
exists in the location you predefined in your ImageIcon object.
ForeColour and
BackGroundColour
15
JTextField
The JTextField is the default input field in the Java
Swing GUI Components.
JTextField
A textbox is displayed through the JTextField class.
JTextField myText = new JTextField(10);
This code creates a new JTextField object called myText using the
constructor from javax.swing which takes an int parameter and makes
a text input box with that width (here, the textField accepts 10 characters)
16
JTextField
…..
Package javax.swing
+setText(s:String) has many different
+getText(): String methods including
those to read the
……
String from the box
and display a String in
the box. These
operations are
completed through
setText and getText
methods.
Adding a JTextField
2 add(myText);
17
Exercise 3 - Interactions
Create two JTextField which would take the name and
surname from the user; and display it on the screen when
these values are entered properly.
18
Exercise 3 Sample Run
JLabel
The JLabel is GUI components used to inform the
user about certain outputs or explanations.
19
JLabel
The labels are added via using the following statement:
add(new Label("String"));
If you are not going to use the JLabel only for
an instruction purpose,
it might be a more efficient to add the JLabel directly
to the form without assigning it to an object.
Defining Labels
20
41
pressing submit
clears the text field
Layout Managers
FlowLayout is not the only layout developers use on GUI
JfFrame and other components.
https://www.tutorialspoint.com/awt/awt_layouts.htm
21
Main Layouts we are going to use
W E
e Center a
s s
t t
South
22
GridLayout
The GridLayout class is a layout manager that lays out
a container's components in a rectangular grid. The
container is divided into equal-sized rectangles, and
one component is placed in each rectangle.
GridLayout object
Button 1 Button 2
Button 3 Long-Named Button 4
5
23
JPanel Component
Layouts can be difficult to manage and each layout is
created for a specific purpose.
JPanel (1)
The JPanel is a container that is used to hold the 'widgets' of
Swing. They are used to let the developer have more control
over positioning and style of widgets on the screen, and to
give a better structure to the code. JPanels are fundamental
in the creation of a professional GUI.
24
JPanel (2)
You can set borders for JPanel to see where it starts and where
it ends.
JPanel (3)
You can adjust the dimensions of a JPanel similar
to a button, however, if you attach it to a JFrame
(such as to North or South) then this ability cannot
be used as the panel would occupy the whole
area.
25
Parsing to/from numbers
Remember if any calculation is to be done you will have to be
making sure the Strings you read in are changed to number
using some method of the number class like
Double.parseDouble(String)
Integer.parseInt(String)
If you are to display numbers in text they must be converted to
Strings using an implicit conversion
"" + value
Or one of the methods of the String class
String.valueOf(int)
Or you can use a method of the number class such as
Integer.toString(int)
26
Exercise 5 – Cars & Vans
When user presses the first button which is the «cars» button,
the number of cars will increase and correspondingly, when
user presses the second button, the «vans» button, the number
of vans will increase.
27
Exercise 5 – GUI Layout
28
Revision
This section has been a very brief introduction to
GUI programming using Swing. We investigated the
following Swing controls:
29