Chapter Six
GUI and Java Applets
Compiled by: Nigusu Y. (nigusu02@[Link] )
Contents
o GUI
o Applet
o Swing Components
o Layout Managers
Graphical User Interface (GUI)
• GUI enables interactivity with the user using graphical components such
as button, textfield, etc
• Graphical User Interface (GUI)
• Gives program distinctive “look” and “feel”
• Provides users with basic level of familiarity
• Built from GUI components (controls, widgets, etc.)
• User interacts with GUI component via mouse, keyboard, etc.
AWT and Swing GUI
oAWT and Swing are used to develop window-based applications in Java.
oAwt is an abstract window toolkit that provides various component classes like
Label, Button, TextField, etc., to show window components on the screen.
oAll these classes are part of the [Link] package.
oSwing is the part of JFC (Java Foundation Classes) built on the top of AWT and
written entirely in Java.
• The [Link] API provides all the component classes like JButton,
JTextField, JCheckbox, JMenu, etc.
• The components of Swing are platform-independent, i.e., swing doesn't
depend on the operating system to show the components.
AWT vs SWING GUI
Applet
▪ An applet is a program written in the Java programming language that can be
included in an HTML page, much in the same way an image is included in a
page.
▪ An applet is a Java program designed to be executed via a Java-enabled web
browser
▪ When you use a Java technology enabled browser to view a page that contains
an applet, the applet's code is transferred to your system and executed by the
browser's Java Virtual Machine (JVM)
▪ Applet programs can be viewed from web browsers such Internet Explorer and
Netscape
How To Develop an Applet
• You must have TWO files: java file and html file to order develop an Applet
• Java file (*.java) is used to write source Code
• HTML file (*.html) is used to embed applet in order to be viewed from Internet
browsers
Cont…
• EXAMPLE OF HTML file ([Link]):
<html>
<applet code=“[Link]” width=200 height=200>
</applet>
</html>
Methods in class JApplet
o init(): this method called by the browser or applet viewer to inform this applet
that it has been loaded into the system.
ostart(): this method called by the browser or applet viewer to inform this applet
that it should start its execution.
ostop(): called by the browser or applet viewer to inform this applet that it should
stop its execution.
odestroy(): This method called by the browser or applet viewer to inform this
applet that it is being reclaimed and that it should destroy any resources that it has
allocated.
o paint( ): method is called each time your applet’s output must be redrawn.
Note: It is NOT compulsory to have all these methods in an Applet
Swing GUI
• Swing GUI design has following elements : Container, Components And Layout
Manager
• Container: A space where all the components controlled and grouped.
• Example: Container container = getContentPane();
• Frame: A resizable, movable window with title bar and close button.
• JPanel: JPanel is a region internal to a Jframe or another JPanel.
• Components: Graphical components that enables interactivity between user and
computer/machine.
Example: Jbutton, Jlabel. Jtextbox….
• Layout Manager: To determine how we are going arrange the components in the
container
Basic Swing components
o Jlabel: An area where uneditable text or icons can be displayed.
o JTextField: An area in which the user inputs data from the keyboard. The area can also display
information.
o Jbutton: An area that triggers an event when clicked.
o JCheckBox: A GUI component that is either selected or not selected.
o JComboBox: A drop-down list of items from which the user can make a selection by clicking
an item in the list or possibly by typing into the box.
o Jlist: An area where a list of items is displayed from which the user can make a selection by
clicking once on any element in the list.
• Multiple elements can be selected.
o Jpanel: A container in which components can be placed.
o Jslider:Simulates a slider control
o JProgressBar: Displays the progress of a time consuming operation
Component: JLabel
• Label
• Provide text on GUI
• Defined with class Jlabel
• Can display single line
• Example:
JLabel nameLabel1 = new JLabel("Student name");
//Creates label with the label Student Name
JLabel nameLabel2 = new JLabel();
//Creates an empty label
public class Label {
public static void main(String args[]) [Link](150, 60, 200, 30);
l2 = new JLabel("Password :");
{
[Link](50, 120, 100, 30);
JLabel l1, l2; p1 = new JPasswordField("");
JTextField t1; [Link](150, 120, 200, 30);
JPasswordField p1; cb = new JCheckBox("Save Password");
[Link](50, 150, 200, 30);
JCheckBox cb;
b = new JButton("Login");
JButton b; [Link](150, 180, 100, 30);
[Link](l1);
JFrame f = new JFrame("Login Page"); [Link](l2);
[Link](JFrame.EXIT_ON_CLOSE); [Link](t1);
[Link](p1);
l1 = new JLabel("User Name :"); [Link](cb);
[Link](b);
[Link](50, 60, 100, 30); [Link](400, 400);
[Link](null);
t1 = new JTextField("");
[Link](true);
}
}
Component: JTextField
o JTextField
o Single line area in which user can enter text
o Example:
JTextField txt1 = new JTextField(“First Name");
//Creates textfield with that displays the message First Name
JTextField txt2 = new JTextField();
//Creates an empty textfield
JTextField txt3 = new JTextField(10);
//Creates textfield with 10 columns
public class TextFiled
{
public static void main(String[] args)
{
JFrame frame = new JFrame("Textbox demo");
[Link](JFrame.EXIT_ON_CLOSE);
[Link]().setBackground([Link]);
JTextField tx1 = new JTextField(20);
JTextField tx2 = new JTextField(20);
[Link](new FlowLayout());
[Link](tx1);
[Link](tx2);
[Link](new Dimension(100, 25));
[Link](new Dimension(100, 25));
[Link](400, 300);
[Link](true);
}
}
Component: JButton
• Button
• Component user clicks to trigger a specific action.
• Example:
JButton button1 = new JButton(“RESET");
//Creates button with that displays the message
RESET
JButton button2 = new JButton();
//Creates an empty button
public class ButtonDemo
{
public static void main(String[] args)
{
JFrame frame = new JFrame("Login and Register");
[Link](JFrame.EXIT_ON_CLOSE);
[Link]().setBackground([Link]);
JButton button1 = new JButton("Login");
JButton button2 = new JButton("Register");
[Link]([Link]); // Set button background color
[Link]([Link]); // Set button text color
[Link]([Link]); // Set button background color
[Link]([Link]); // Set button text color
[Link](new Dimension(120, 40));
[Link](new Dimension(120, 40));
[Link](new FlowLayout());
[Link](button1);
[Link](button2);
[Link](400, 300);
[Link](true);
}
}
Component: JCheckBox and JRadioButton
✓ State buttons
✓ On/Off or true/false values
oJCheckBox
• A combo box displays a particular option with a pull down menu from
which the user can choose a different option
• The currently selected option is shown in the combo box
• A combo box can be editable, so that the user can type their option directly
into the box
oJRadioButton
• Action performed method use is same as regular buttons
• But one needs to put them in a group so they become mutually exclusive
//ComboBox demo
import [Link];
import [Link].*;
public class ComboBox
{
public static void main(String[] args)
{
JFrame frame = new JFrame("JComboBox Example");
[Link](JFrame.EXIT_ON_CLOSE);
String[] items = {"Apple", "Banana", "Orange", "Mango"};
JComboBox<String> comboBox = new JComboBox<>(items);
[Link](comboBox);
[Link](new FlowLayout([Link]));
[Link](200, 300);
[Link](true);
}
}
public class RadioButton {
public static void main(String[] args)
{
JFrame frame = new JFrame("Radio Button Example");
[Link](JFrame.EXIT_ON_CLOSE);
JRadioButton radioButton1 = new JRadioButton("Male", true);
JRadioButton radioButton2 = new JRadioButton("Female", false);
ButtonGroup group = new ButtonGroup();
[Link](radioButton1);[Link](radioButton2);
[Link](radioButton1);[Link](radioButton2);
// Add radio buttons to the frame
[Link](new FlowLayout());
[Link](300, 300);
[Link](true);
}
}
//CheckBox
public class CheckBox
{
public static void main(String[] args) {
JFrame frame = new JFrame("JCheckBox Example");
[Link](JFrame.EXIT_ON_CLOSE);
[Link](new FlowLayout()); arrangement
JCheckBox checkBox1 = new JCheckBox("Injibara",true); selected
JCheckBox checkBox2 = new JCheckBox("Bahirdar" );
JCheckBox checkBox3 = new JCheckBox("Jimma");
[Link](checkBox1); [Link](checkBox2);
[Link](checkBox3);
[Link](300, 300);
[Link](true);
}
}
Compnent: JList
String[] entries = {“alpha”, “beta”, “gamma”, “delta”,“zeta”, “eta” };
JPanel jp = new JPanel();
JList list = new JList(entries);
JScrollPane scroller = new JScrollPane(list);
[Link](
ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS);
[Link](
ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);
[Link](scroller);
[Link](4);
[Link](ListSelectionModel.SINGLE_SELECTION);
[Link]().add(jp);
Compnent: JTextArea
JFrame jf = new JFrame();
JPanel jp = new JPanel();
JButton jb = new JButton("Just click it");
[Link](this);
text = new JTextArea(10,20);
[Link](true);
JScrollPane scroller = new JScrollPane(text);
[Link](
ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS);
[Link](
ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);
[Link](scroller); Create a JScrollPane and
give it the text area that it
[Link]().add([Link],jp); is going to scroll for
[Link]().add([Link],jb);
23
Component: JOptionPane
import [Link].*;
public class JOptionPaneExample
{
public static void main(String[] args)
{
JFrame f=new JFrame("Option pane");
[Link](JFrame.EXIT_ON_CLOSE);
[Link](f,"Hello, Welcome to Swing.");
}
}
24
Component: JTable
public class JTableExample {
public static void main(String[] args)
{
JFrame f = new JFrame();
[Link](JFrame.EXIT_ON_CLOSE);
String data[][] = {{"521", "Madhu", "43400"},{"512", "Hari", "54500"},{"509", "Ganesh", "70000"}};
String column[] = {"ID", "NAME", "SALARY"};
JTable jt = new JTable(data, column);
[Link](30,40,200,300);
JScrollPane sp = new JScrollPane(jt);
[Link](new BorderLayout());
[Link](sp, [Link]);
[Link](sp);
[Link](300, 400);
[Link](true);
[Link]();
[Link]("JTable Example");
}
} 25
Component: JTable
public class JTableExample {
public static void main(String[] args)
{
JFrame f = new JFrame();
[Link](JFrame.EXIT_ON_CLOSE);
String data[][] = {{"521", "Madhu", "43400"},{"512", "Hari", "54500"},{"509", "Ganesh", "70000"}};
String column[] = {"ID", "NAME", "SALARY"};
JTable jt = new JTable(data, column);
[Link](30,40,200,300);
JScrollPane sp = new JScrollPane(jt);
[Link](new BorderLayout());
[Link](sp, [Link]);
[Link](sp);
[Link](300, 400);
[Link](true);
[Link]();
[Link]("JTable Example");
}
} 26
Component: JProgressBar
public class SimpleProgressBar {
[Link](300, 150);
public static void main(String[] args) [Link](true);
for (int i = 0; i <= 100; i++)
{ {
[Link](i);
JFrame frame = new JFrame("Simple Progress Bar"); try
{
[Link](JFrame.EXIT_ON_CLOSE);
[Link](50);
JProgressBar progressBar = new JProgressBar(0, 100); }
catch (InterruptedException e)
[Link](true); {
[Link]();
[Link]([Link]); }
}
JPanel panel = new JPanel(); }
}
[Link](progressBar);
[Link](new BorderLayout());
[Link](panel, [Link]);
27
Layout Managers
• A layout manager is a Java object associated with a particular component (usually
with a background component)
• The layout manager controls the components contained within the component the
layer manager is associated with.
• Layout manager:
✓ Provided for arranging GUI components
✓ Provide basic layout capabilities
✓ Processes layout details
✓ Programmer can concentrate on basic “look and feel”
Layout Manager Description
o FlowLayout
• Default for [Link], [Link] and [Link]. Places
components sequentially
• (left to right) in the order they were added. It is also possible to specify the
order of the components using the Container method add that takes a
Component and an integer index position as arguments.
o BorderLayout
• Default for the content panes of JFrames (and other windows) and JApplets.
Arranges the components into five areas: North, South, East, West and Center.
o GridLayout
• Arranges the components into rows and columns.
FlowLayout
• Most basic layout manager
• GUI components placed in container from left to right
• We can centralised the components that using
• FlowLayout manager using the following command: new
FlowLayout([Link]);
• NOTE: FlowLayout is the default layout if an applet has not been given any
layout setting by the programmer.
• Used layout: Justify, centre, left and right
BorderLayout
o BorderLayout: Arranges components into five regions
▪ Arranges components
• NORTH (top of container)
• SOUTH (bottom of container)
• EAST (left of container)
• WEST (right of container)
• CENTER (Center of container)
GridLayout
✓ Divides container into grid of specified row an Columns
✓ Components are added starting at top-left cell
✓ Proceed left-to-right until row is full
//Grid Layout demo with Japplet
public class Channelgrid extends JApplet
{
private JButton channel1, channel2, channel3;
public Channelgrid( ) {
Container con = getContentPane( );
[Link]( new GridLayout(2,4) );
channel1 = new JButton(“Channel 1”);
channel2 = new JButton(“Channel 2”);
channel3 = new JButton(“Channel 3“);
[Link](channel1); [Link](channel2); [Link](channel3);
}
}
Direct Positioning
• You can place a component at a specific <x,y> position
• Method:
- choose not to use a Layout Manager setLayout( null );
- position components with the method setLocation and setSize.
• setLocation(int x, int y);
• setSize(int width, int height);
OR
• setBounds(int x, int y, int width, int height);
Swing JPanels
✓ Helps organize components
✓ Class JPanel is JComponent subclass
✓ May have components (and other panels) added to them
✓ Panels is useful when developing GUI that has more than one layout and many
components
✓ An applet can have more than one Jpanels
✓ The rules is that the more panels in an applet, the easier to organize the
components
✓ Finally, panel should be added to main container
Example
import [Link].*;
import [Link].*;
public class SimpleGUI1 implements ActionListener {
…
JPanel panelA = new JPanel();
JPanel panelB = new JPanel();
[Link](new JButton(“button 1”));
[Link](new JButton(“button 2”));
[Link](new JButton(“button 3”));
[Link](panelB);
[Link]([Link]);
[Link]([Link]);
… Both panelA and panelB have
} their own layout managers.
35
