Lab Manual 06
Lab Manual 06
Lab Manual No 06
Dated:
3 Feb, 2024 to 26th Feb, 2024
Semester:
2024
68 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
Introduction to Swing:
Swing API is a set of extensible GUI Components to ease the developer's life to create JAVA based Front End/GUI
Applications. It is built on top of AWT API and acts as a replacement of AWT API, since it has almost every control
corresponding to AWT controls. Swing component follows a Model-View-Controller architecture to fulfill the following
criteria’s.
• API is to be model driven so that the highest level API is not required to have data.
• API is to use the Java Bean model so that Builder Tools and IDE can provide better services to the
developers for use.
Swing Features:
• Light Weight − Swing components are independent of native Operating System's API as Swing API
controls are rendered mostly using pure JAVA code instead of underlying operating system calls.
• Rich Controls − Swing provides a rich set of advanced controls like Tree, TabbedPane, slider, colorpicker,
and table controls.
• Highly Customizable − Swing controls can be customized in a very easy way as visual apperance is
independent of internal representation.
• Pluggable look-and-feel − SWING based GUI Application look and feel can be changed at run-time, based
on available values
69 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
SWING – Controls:
Every user interface considers the following three main aspects −
• UI Elements − These are the core visual elements the user eventually sees and interacts with.
GWT(Google Web Toolkit) provides a huge list of widely used and common elements varying from basic to
complex, which we will cover in this Lab Manual.
• Layouts − They define how UI elements should be organized on the screen and provide a final look and
feel to the GUI (Graphical User Interface). This part will be covered in the Layout Lab Manual.
• Behavior − These are the events which occur when the user interacts with UI elements. This part will be
covered in the Event Handling Lab Manual.
Every SWING controls inherits properties from the following Component class hierarchy.
70 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
Component
1 A Component is the abstract base class for the non menu user-interface controls of SWING.
Component represents an object with graphical representation
Container
JComponent
A JComponent is a base class for all SWING UI components. In order to use a SWING
3 component that inherits from JComponent, the component must be in a containment hierarchy
SWING UI Elements:
Following is the list of commonly used controls while designing GUI using SWING.
JLabel
1
JButton
2 This class creates a labeled button.
JColorChooser
3 A JColorChooser provides a pane of controls designed to allow a user to manipulate and select a
color.
71 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
JCheck Box
4 A JCheckBox is a graphical component that can be in either an on(true) or off (false) state.
JRadioButton
The JRadioButton class is a graphical component that can be in either an on (true) or off (false)
5
state. in a group.
JList
6 A JList component presents the user with a scrolling list of text items.
JComboBox
7 A JComboBox component presents the user with a to show up menu of choices.
JTextField
8 A JTextField object is a text component that allows for the editing of a single line of text.
JPasswordField
9 A JPasswordField object is a text component specialized for password entry.
JTextArea
10 A JTextArea object is a text component that allows editing of a multiple lines of text.
ImageIcon
11 A ImageIcon control is an implementation of the Icon interface that paints Icons from Images
JScrollbar
A Scrollbar control represents a scroll bar component in order to enable the user to select from
12
range of values.
JOptionPane
13
JOptionPane provides set of standard dialog boxes that prompt users for a value or informs them
72 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
of something.
JFileChooser
14 A JFileChooser control represents a dialog window from which the user can select a file.
JProgressBar
As the task progresses towards completion, the progress bar displays the task's percentage of
15
completion.
JSlider
16 A JSlider lets the user graphically select a value by sliding a knob within a bounded interval.
JSpinner
A JSpinner is a single line input field that lets the user select a number or an object value from an
17
ordered sequence.
Swing provides three generally useful top-level container classes: JFrame, JDialog, and JApplet. When using these
classes, you should keep these facts in mind:
• To appear onscreen, every GUI component must be part of a containment hierarchy. A containment
hierarchy is a tree of components that has a top-level container as its root. We'll show you one in a bit.
• Each GUI component can be contained only once. If a component is already in a container and you try to
add it to another container, the component will be removed from the first container and then added to the
second.
• Each top-level container has a content pane that, generally speaking, contains (directly or indirectly)
the visible components in that top-level container's GUI.
• You can optionally add a menu bar to a top-level container. The menu bar is by convention positioned within
the top-level container, but outside the content pane. Some look and feels, such as the Mac OS look and
feel, give you the option of placing the menu bar in another place more appropriate for the look and feel,
such as at the top of the screen.
73 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
JFRAME Example No 1:
import javax.swing.*;
74 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
import javax.swing.*;
import javax.swing.*;
public class JLabelExample {
75 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
import javax.swing.*;
public class JTextFieldExample {
import javax.swing.*;
public class JTextAreaExample {
f.setSize(300,300);
f.setLayout(null);
f.setVisible(true);
}
76 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
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); }
}
import javax.swing.*;
public class CheckBoxExample {
77 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
import javax.swing.*;
public class RadioButtonExample {
import javax.swing.*;
public class JComboBoxExample {
public static void main(String[] args) {
JFrame f=new JFrame("ComboBox Example");
String country[]={"Pak","Aus","U.S.A","England","Newzealand"};
JComboBox cb=new JComboBox(country);
cb.setBounds(50, 50,90,20);
f.add(cb);
f.setLayout(null);
f.setSize(400,500);
f.setVisible(true);
}
}
78 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
import javax.swing.*;
public class JTableExample {
import javax.swing.*;
public class JListExample {
79 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
import javax.swing.*;
public class JOptionExample {
import javax.swing.*;
import javax.swing.*;
public class JScrollBarExample {
80 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
import javax.swing.*;
public class JMenuExample {
81 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
import javax.swing.*;
public class JpanelExample {
82 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
Layout Manager:
The layout manager automatically positions all the components within the container. Even if you do not use the layout
manager, the components are still positioned by the default layout manager. It is possible to lay out the controls by
hand, however, it becomes very difficult because of the following two reasons.
• Usually, the width and height information of a component is not given when we need to arrange them.
Java provides various layout managers to position the controls. Properties like size, shape, and arrangement varies
from one layout manager to the other. When the size of the applet or the application window changes, the size, shape,
and arrangement of the components also changes in response, i.e. the layout managers adapt to the dimensions of
the appletviewer or the application window.
The layout manager is associated with every Container object. Each layout manager is an object of the class that
implements the LayoutManager interface.
LayoutManager
1
The LayoutManager interface declares those methods which need to be implemented by the
class, whose object will act as a layout manager.
LayoutManager2
The LayoutManager2 is the sub-interface of the LayoutManager. This interface is for those
2
classes that know how to layout containers based on layout constraint object.
83 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
BorderLayout
1
The borderlayout arranges the components to fit in the five regions: east, west, north, south, and
center.
CardLayout
The CardLayout object treats each component in the container as a card. Only one card is visible
2
at a time.
FlowLayout
3 The FlowLayout is the default layout. It layout the components in a directional flow.
GridLayout
4 The GridLayout manages the components in the form of a rectangular grid.
GridBagLayout
This is the most flexible layout manager class. The object of GridBagLayout aligns the
5 component vertically, horizontally, or along their baseline without requiring the components of
the same size.
GroupLayout
6 The GroupLayout hierarchically groups the components in order to position them in a Container.
SpringLayout
A SpringLayout positions the children of its associated container according to a set of
7
constraints.
84 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
import java.awt.BorderLayout;
import javax.swing.*;
public class BorderLayoutExample {
f.add(b1,BorderLayout.NORTH);
f.add(b2,BorderLayout.SOUTH);
f.add(b3,BorderLayout.EAST);
f.add(b4,BorderLayout.WEST);
f.add(b5,BorderLayout.CENTER);
f.setSize(300,300);
f.setVisible(true);
}
}
BorderLayout Example No 16.02:
import java.awt.BorderLayout;
import javax.swing.*;
f.setVisible(true);
85 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
GRID LAYOUT:
The GridLayout is used to arrange the components in rectangular grid. One component is displayed in each
rectangle.
1. GridLayout(): creates a grid layout with one column per component in a row.
2. GridLayout(int rows, int columns): creates a grid layout with the given rows and columns but no gaps
between the components.
3. GridLayout(int rows, int columns, int hgap, int vgap): creates a grid layout with the given rows and
columns alongwith given horizontal and vertical gaps.
import java.awt.GridLayout;
import javax.swing.*;
f.add(b1);f.add(b2);f.add(b3);f.add(b4);f.add(b5);
f.add(b6);f.add(b7);f.add(b8);f.add(b9);
f.setLayout(new GridLayout(3,3));
//setting grid layout of 3 rows and 3 columns
86 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
f.setSize(300,300);
f.setVisible(true);
}
Flow Layout:
The FlowLayout is used to arrange the components in a line, one after another (in a flow). It is the default layout of
applet or panel.
1. FlowLayout(): creates a flow layout with centered alignment and a default 5 unit horizontal and vertical gap.
2. FlowLayout(int align): creates a flow layout with the given alignment and a default 5 unit horizontal and
vertical gap.
3. FlowLayout(int align, int hgap, int vgap): creates a flow layout with the given alignment and the given
horizontal and vertical gap.
87 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
import java.awt.FlowLayout;
import javax.swing.*;
f.add(b1);f.add(b2);f.add(b3);f.add(b4);f.add(b5);
f.setLayout(new FlowLayout(FlowLayout.RIGHT));
//setting flow layout of right alignment
// f.setLayout(new FlowLayout(FlowLayout.LEFT));
f.setSize(300,300);
f.setVisible(true);
}
Self Study :
*BoxLayout, CardLayout,GridBagLayout,GroupLayout,SpringLayout,ScrollPaneLayout
88 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
Tasks No 01:
Design this Form Using Swing Controls ?
Task 02:
Design this Login Form Using Swing Controls?
89 | P a g e
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION
ENGINEERING COMPUTER ENGINEERING DEPARTMENT
The End
90 | P a g e