Java GUI Development
Java GUI Development
METTU UNIVERSITY
FACULTY OF ENGINEERING & TECHNOLOGY
DEPARTMENT OF COMPUTER SCIENCE
By: Naol G.
2
Introduction
• GUI: A graphical user interface (GUI) presents a user-friendly
mechanism for interacting with an application.
• It gives an application a distinctive “look” and “feel.”
• Providing different applications with consistent, intuitive user interface
components allows users to be somewhat familiar with an application,
so that they can learn it more quickly and use it more productively.
• GUIs are built from GUI components. These are sometimes called
controls or widgets.
• A GUI component is an object with which the user interacts via the
mouse, the keyboard or another form of input, such as voice
recognition.
3
• Platform Dependency
• Another major difference between AWT and Swing in Java is
that AWT is platform dependent while Swing is platform
independent.
• Display
• Moreover, AWT does not support pluggable look and feel.
• Swing supports a pluggable look and feel.
• Components
• Also, Swing has more advanced components than AWT.
• Speed
• Furthermore, execution of AWT is slower. However, Swing
executes faster.
9
• Package
• The programmer has to import the javax.awt package
to develop an AWT-based GUI.
• However, the programmer has to import javax.swing
package to write a Swing application.
10
• Choosers
• File chooser (JFileChooser)
• Color chooser (JColorChooser)
• More complex displays
• Tables (JTable)
• Trees (JTree)
15
• Font:
• It specifies fonts for the text and drawings on GUI
components.
• Font is available on the java.awt package.
• Example:
• panel1.setFont(new Font("Serif",Font.TRUETYPE_FONT +
Font.ITALIC + Font.BOLD,20));
17
LayoutManager
• LayoutManager is an interface whose instances specify
how components are arranged in a container.
• There are different types of layouts.
• FlowLayout, GridLayout and BorderLayout are three examples of
the layouts.
• These layouts are found in the java.awt package of JDK API.
• Let us see an example using one of these three layout
types. LayoutManager lay_out = new FlowLayout();
JFrame frame = new JFrame(“I am a container");
frame .setLayout(lay_out);
setLayout(new FlowLayout());//default one
setLayout(new FlowLayout(FlowLayout.LEFT));
setLayout(new FlowLayout(FlowLayout.LEFT, 20,30));
18
• The following statement creates a window with title “My First JFrame”
• JFrame frame = new Jframe(“My First JFrame”);
Methods of JFrame
• Some of the methods of JFrame class are described here
in class diagram:
21
• Example: Here is a java code that creates a window/frame with the specified
title, location, size, frame visibility and default close operation
import javax.swing.*;
public class JFrameSample {
public static void main(String[] args) {
JFrame frame = new JFrame(“First JFrame");
frame.setSize(400, 300);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
• Here is another way of writing the above code (by extending JFrame):
import javax.swing.JFrame;
public class Simple extends JFrame {
public Simple() {
setSize(300,200);
setTitle("First JFrame");
setLocationRelativeTo(null);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public static void main(String[] args) {
Simple simple = new Simple();
}}
23
• JLabel:
• A label is a display area for a short text(a non-editable), an image,
or both.
• A JLabel component can be created using one of the following
constructors:
• JLabel(): Creates a default label with no text and icon.
• JLabel(String text): Creates a label with text.
• JLabel(Icon icon): Creates a label with an icon.
• JLabel(String text, int horizontalAlignment): Creates a label with a text
and the specified horizontal alignment.
• JLabel(Icon icon, int horizontalAlignment): Creates a label with an icon
and the specified horizontal alignment.
• JLabel(String text, Icon icon, int horizontalAlignment): Creates a label
with text, an icon, and the specified horizontal alignment.
26
// Set label's text alignment and gap between text and icon
jlbl.setHorizontalTextPosition(SwingConstants.CENTER);
jlbl.setVerticalTextPosition(SwingConstants.BOTTOM);
jlbl.setIconTextGap(5);
28
• JTextField:
• A text field is a box that contains a line of text.
• The user can type text into the box and the program can get it and
then use it as data.
• The program can write the results of a calculation to a text field.
• Text fields are useful in that they enable the user to enter in
variable data (such as a name or a description).
• JTextField is swing class for an editable text display.
29
add(Fname);
add(text);
add(Lname);
add(text1);
32
• JPasswordField:
• Allows the editing of a single line of text where the view indicates
something was typed, but does not show the original characters.
• JPasswordField component can be created using one of the
following constructors:
• JPasswordField(): Constructs a new JPasswordField, with a default
document, null starting text string, and 0 column width
• JPasswordField(int columns): Constructs a new empty
JPasswordField with the specified number of columns
• JPasswordField(String text): Constructs a new JPasswordField
initialized with the specified text.
• JPasswordField(String text, int columns) : Constructs a new
JPasswordField initialized with the specified text and columns.
33
• JTextArea:
• If you want to let the user enter multiple lines of text,
you cannot use text fields unless you create several of
them.
• The solution is to use JTextArea class, which enables
the user to enter multiple lines of text.
• JTextArea components can be created using one of the
following constructors:
• JTextArea(int rows, int columns): creates a text area with the specified
number of rows and columns.
• JTextArea(String s, int rows, int columns): creates a text area with the
initial text and the number of rows and columns specified.
34
• JCheckBox:
• It is a widget that has two states. On and Off.
• It is a box with a label.
• If the checkbox is checked, it is represented by a tick in a box.
• JCheckBox component can be created using one of the following
constructors:
• JCheckBox() :creates an initially unselected check box button with no text, no
icon
• JCheckBox(Icon icon) : creates an initially unselected check box with an icon
• JCheckBox(Icon icon, boolean selected) : creates a check box with an icon and
specifies
• whether or not it is initially selected.
• JCheckBox(String text) : creates an initially unselected check box with text.
• JCheckBox(String text,boolean selected): creates a check box with text and
specifies whether or not it is initially selected.
• JCheckBox(String text,Icon icon) : creates an initially unselected check box with
the specified text and icon.
• JCheckBox(String text, Icon icon, Boolean selected) : creates a check box with
text and icon, and specifies whether or not it is initially selected
35
• Example:
• JMenu:
• It is used to create menu or submenus.
• The constructor JMenu(String name) can be used to create a
menu/submenu.
• For example, JMenu fileMenu = new JMenu(“File”).
• Once menus are created using JMenu, these menus can be added
onto the menu bar using the function add(JMenu menu).
• Assume we have created two menu component file and edit as
follow
JMenu fileMenu = new JMenu(“File”). JMenu editMenu = new JMenu(“Edit”).
• JMenuItem:
• This component is used to add menu items under menu
components.
• The constructor JMenuItem(String item) is used to create such
items. Once the items are created the method add(JMenuItem
item) can be used to add the item to a menu component.
• For example, let us create two menu items under the file menu.
fileMenu.add(menuItemNew);
fileMenu.add(menuItemOpen);
39
Output:
42
• Java JRadioButton
• The JRadioButton class is used to create a radio button.
• It is used to choose one option from multiple options.
• It is widely used in exam systems or quiz.
• It should be added in ButtonGroup to select one radio button only.
• Commonly used Constructors:
43
• Java JComboBox
• The object of Choice class is used to show popup menu of choices.
• Choice selected by user
• is shown on the top of a menu.
• It inherits JComponent class.
• Commonly used Constructors:
46
• Java Jtable
• The JTable class is used to display data in tabular form.
• It is composed of rows and columns.
Output:
50
• Below is a full java code that adds the button to the frame (following
the approach employed by example 3 above)
• When you run the above program MyFrameWithComponents, the button is always
centered in the frame and occupies the entire frame no matter how you resize it.
• This is because components are put in the frame by the content pane’s layout
manager, and the default layout manager for the content pane places the button in
the center.
• Set layout Manager before adding components.
• In the next section, you will use several different layout managers to place
components in other location as desired.
53
Layout Management
• Layouts tell Java where to put components in containers (JPanel,
content pane, etc).
• Layout manager is created using LayoutManager class.
• Every layout manager class implements the LayoutManager class.
• Each layout manager has a different style of positioning components.
• If you don't specify otherwise, the container will use a default layout
manager.
• Every panel (and other container) has a default layout, but it's better
to set the layout explicitly for clarity.
• Layout managers are set in containers using the
setLayout(LayoutManager) method.
54
• Example:
• Assume we have a Jframe instance called container. If we are
going to add controls inside this container and if we are interested
on the flowlayout, we can set as follow.
OR
container.setLayout(new FlowLayout());
55
• GridLayout:
• The GridLayout manager divides the container up into a given
number of rows and columns.
• All sections of the grid are equally sized and as large as possible.
• GridLayout can be set using one of the constructors depicted
below:
57
• BorderLayout:
• The BorderLayout manager divides the window into five areas:
• East, South, West, North, and Center.
• At most five components can be added.
• If you want more components, add a Panel, then add components
to it.
• Components are added to a BorderLayout by using
add(Component, index) where index is a constant such as:
• BorderLayout.EAST
• BorderLayout.SOUTH
• BorderLayout.WEST
• BorderLayout.NORTH
• BorderLayout.CENTER
58
• Solution:
• There could be different solutions. But, let us see one way of
setting the layout.
• First, let us create the necessary containers and components with
appropriate layout; then, we will add the components/containers to
the appropriate containers.
64
• If we run the above code, we will get the following GUI application.
65
• But, clicking the button does not do anything as we did not associate
this action on the button with the appropriate event.
• Thus, we are going to improve this code so that clicking the button
shows the desired dialog box.
• We can do this using one of the following three ways.
• The first is register the event listener of the source object and define
the action performed at the same spot or register the event listener on
the source object and define action performed in another class.
• This second way can, in turn, be accomplished in two ways: using an
inner class for the action definition or using another separate class.
• Let us see the implementation using the three approaches.
66
}}
67
} }}
68
} }
69
Output:
70
71
End!
More on chapter-3….