Java GUI

OOP May 2015

UTP2008

Standard Classes

1. Many GUI classes

2. To construct an interface, just setup GUI objects.
3. Examples:
a. Creating a button:
JButton button = new JButton(OK);
b. Creating a panel:
JPanel panel = new JPanel();
c. Adding button to panel:
panel.add(button);

UTP2008

java.awt
1. These standard classes are organized under the following packages:

java.awt in the core JDK.

SWING API In the support package JFC.

2. java.awt is a package. Contains all of the classes for creating GUI and
for painting graphics and images.

Component

Button, Canvas,
TextComponent, Label, etc..

Container
Window

Frame

JFrame

UTP2008

Panel

Dialog

JWindow

java.aw
t

JDialog

Applet

JApplet

javax.swin
g

javax.swing
1. AWT provides only basic GUI components.
2. Enhanced GUI components are in a different package:
javax.swing.*
javax.
swing
JPanel

JMenuBar
JComponent

AbstractButton

JTextComponent
JLabel

JButton

JTextArea
JTextField

JToggleButton

JCheckBox

UTP2008

JRadioButton

JPasswordField

Composition of a Java GUI

A Java GUI comprises of the following
elements:
1.

Containers are in the top GUI

containment hierarchy serves to
contain GUI components.

2.

Components are objects derived

from the JComponent class. Also
known as the widgets.

3.

Layout Managers provide

automatic layout of the components.

(Image taken from Sun Microsystem SL275 SE6 textbook)

UTP2008

Demo
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

import java.awt.*;
import javax.swing.*;
public class HelloGUI {
JFrame myFrame;
JLabel myLabel;
Container myPane;
public HelloGUI() {
myFrame = new JFrame("Hello GUI");
myPane = myFrame.getContentPane();
myLabel = new JLabel("Hello Java GUI! Welcome to my life.");
}
public void launchFrame(){
myPane.add(myLabel);
myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
myFrame.pack();
myFrame.setVisible(true);
}
public static void main(String[] args) {
HelloGUI myHelloGUIObject = new HelloGUI();
myHelloGUIObject.launchFrame();
}
}

UTP2008

How to create a GUI in Java

Steps:
1. Declare the class fields of the GUI elements
needed:
a. Containers: ?
b. Widgets: ?
2. Initiate elements in the constructor of the class
(=instantiation of the GUI objects).
3. Assemble the widgets in the containers.
4. Launch the application.
UTP2008

A SIMPLE EXAMPLE
Create the following GUI:

UTP2008

UML

Instantiate the
objects.

Assemble and
show the objects.
We also want to make this class the application entry
class. How?
UTP2008

Code Explained
1.

import java.awt.*;

1.

2.

import javax.swing.*;

2.

public void createAndShowGUI(){

myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

3.

3.

public class MyGUI {

4.

private JFrame myFrame;

5.

private Container myPane;

6.
7.

5.
myPanel.setBackground(Color.YELLOW);

7.

myPanel.add(myButton1);

private JPanel myPanel;

8.

myPanel.add(myButton2);

private JButton myButton1, myButton2;

9.

public MyGUI() {

10.

myFrame = new JFrame("My Window");

11.

myPane = myFrame.getContentPane();

12.

myPanel = new JPanel();

13.

10.

myFrame.pack();

11.

myFrame.setVisible(true);

12.

13.

public static void main(String[] args) {

14.

myGUI myDemo = new myGUI();

15.

myDemo.createAndShowGUI();

14.

myButton1 = new JButton("Button 1");

16.

15.

myButton2 = new JButton("Button 2");

17.

16.

myPane.add(myPanel);

6.

8.
9.

4.

}
}

UTP2008

10

Code Explained

1. Create frame from JFrame.

2. Acquire content pane from the frame.
3. Create panel from JPanel.
4. Create and add widget(s) to the panel.
5. Add the panel to the pane.

UTP2008

11

Important Methods Used

1.

setDefaultLookAndFeelDecorated(true)

Applies decorative

borders and window titles to frames.

So that
the program will exit when the close button is clicked.

2.

setDefaultCloseOperationJFrame.EXIT_ON_CLOSE)

3.

pack()

Causes the JFrame to be sized to fit the preferred

size.
4.

setVisible(true)

5.

add(myButton)

Makes the JFrame visible.

JButton is added to the content pane, not to

the JFrame directly.

UTP2008

12

Containers
1.

You need containers to contain the widgets.

2.

In Java, you need to set up 3 container-related items before you

can start adding widgets to your application:
a. A frame
b. A pane.
c. A panel

UTP2008

13

Panel Example
1. import java.awt.*;
2. import javax.swing.*;
3.
4. public class Demo_Panel {
5.
private JFrame myFrame;
6.
private Container myPane;
7.
private JPanel myPanel1,myPanel2;
8.
9.
public Demo_Panel() {
10.
myFrame = new JFrame("My Window");
11.
myPane = myFrame.getContentPane();
12.
myPanel1 = new JPanel();
13.
myPanel2 = new JPanel();
14.
}
15. //see next page

UTP2008

14

Panel Example
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
UTP2008

//from previous page

public void createAndShowGUI(){
myFrame.setLayout(null);
myFrame.setSize(215,245);
myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
myPane.setBackground(Color.BLACK);
myPanel1.setSize(200,100);
myPanel1.setBackground(Color.RED);
myPanel1.setLocation(5, 5);
myPanel2.setSize(200,100);
myPanel2.setBackground(Color.YELLOW);
myPanel2.setLocation(5,110);
myPane.add(myPanel1);
myPane.add(myPanel2);
myFrame.setVisible(true);
}
public static void main(String[] args) {
Demo_Panel myDemo = new Demo_Panel();
myDemo. createAndShowGUI();
}
15

JLabel
1. JLabel myLabel1 = new JLabel(Hello);
2. panel.add(myLabel1);
3. myLabel1.setName(Login name:);

UTP2008

16

JTextField
1.
2.
3.

UTP2008

JTextField textField;
textField = new JTextField(jTextField1");
panel.add(textField);

17

JCheckBox
1.
2.
3.
4.
5.
6.
7.

UTP2008

JCheckBox checkbox1, checkbox2;

checkbox1 = new JCheckBox(jCheckBox1);
checkbox1.addActionListener(this);
panel.add(checkbox1);
checkbox2 = new JCheckBox(jCheckBox2");
checkbox2.addActionListener(this);
panel.add(checkbox2);

18

JRadioButton
1.
2.
3.
4.
5.
6.
7.

UTP2008

JRadioButton radiobox1, radiobox2;

radiobox1 = new JRadioButton(jRadioButton1");
radiobox1.addActionListener(this);
panel.add(radiobox1);
radiobox2 = new JRadioButton(jRadioButton2");
radiobox2.addActionListener(this);
panel.add(radiobox2);

19

ButtonGroup
1.
2.
3.
4.
5.
6.
7.

UTP2008

ButtonGroup bg1, bg2;

bg1 = new ButtonGroup(); bg2 = new ButtonGroup();
bg1.add(radiobox1);
bg1.add(radiobox2);
bg1.add(radiobox3);
bg2.add(radiobox4);
bg2.add(radiobox5);

20

Combo Box
1.
2.
3.

UTP2008

private String[] s1 =
{"None","Diploma","Bachelor","Master",PhD"};
cb1 = new JComboBox(s1);
cb1.setSelectedItem("None");

21

Scrollpane
1.
2.

a = new JTextArea();
scrol = new JScrollPane(a);

JTextArea
JScrollPane

UTP2008

22

Layout Manager
1.

In Java, to arrange widgets onto a panel, we enlist the help of layout

managers.

2.

Who are these layout managers?

Answer: Objects whose job to manage layout of widgets.

3.

The default layout manager of the panel container is an instance of the

FlowLayout class. This manager lay things out in a sequential order from
left to right.

4.

The default layout manager of the frame container is an instance of the

BorderLayout class. This manager maintains the interface as regions
whereby each region can only accommodate one component.

UTP2008

23

Customizing the Layout Manager

5. We can customize the layout manager for the container:
a. To change the layout to Flow layout
myFrame.setLayout(new FlowLayout());
b. To change the layout to Border layout,
myFrame.setLayout(new BorderLayout());
c.

To change the layout to Grid layout

myFrame.setLayout(new GridLayout());

d. To change the layout to Box layout

myFrame.setLayout(new BoxLayout());
e. To change the layout to Card layout
myFrame.setLayout(new CardLayout());

UTP2008

24

BorderLayout
1. BorderLayout is the default layout of the frame. Hence dont have to set
the layout.
2. The frame is divided into 5 regions:- CENTER, PAGE_START,
PAGE_END, LINE_START, and LINE_END.

3. Each region can store only one component. For example, if I try to
add more than one button in any one region, only the last added
button will be shown.

UTP2008

25

FlowLayout
1.

Panel container default layout is flow layout.

2.

However, on the frame container, flowLayout is not default.

3.

Hence have to set the layout explicitly if we want the frame to have flow
layout instead of borderlayout.

4.

Example:
myFrame.setLayout(new FlowLayout());

5.

Typical feature of flow layout is more than one widgets will be

automatically rearranged in the container should there be any resize. The
order of arrangement is left to right and top-down.

UTP2008

26

GridLayout
1.

GridLayout is not the default layout of the frame. Hence have to set the
layout explicitly.

2.

Syntax:
SetLayout(new GridLayout(int rows, int cols));

3.

Examples:

UTP2008

27

BoxLayout
import java.awt.Component;

private static void launchGUI() {

import java.awt.Container;

//Create and set up the window.

import javax.swing.BoxLayout;

JFrame frame = new JFrame("BoxLayoutDemo");

import javax.swing.JButton;

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

import javax.swing.JFrame;
//Set up the content pane.
public class BoxLayoutDemo {

addComponentsToPane(frame.getContentPane());

public static void addComponentsToPane(Container pane) {

//Display the window.

pane.setLayout(new BoxLayout(pane, BoxLayout.Y_AXIS));

frame.pack();
frame.setVisible(true);

addAButton("Button 1", pane);

addAButton("Button 2", pane);

addAButton("Button 3", pane);

public static void main(String[] args) {

addAButton("Long-Named Button 4", pane);

launchGUI();

addAButton("5", pane);
}

}
}

private static void addAButton(String text, Container container) {

JButton button = new JButton(text);
button.setAlignmentX(Component.CENTER_ALIGNMENT);
container.add(button);

The above code generates Box Layout arrangement of buttons. Run and
study the code.

UTP2008

28

The GUI class

1.

import javax.swing.*;

2.
3.
4.
5.

public class MyGUI

{
JButton button1;
JPanel panel;

6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

public MyGUI()
{
button1 = new JButton(Exit");
panel = new JPanel();
panel.add(button1);
}
JPanel getPanel()
{
return panel;
}

Declare attributes for

class.

Initiate components.
Then assemble.

Return assembled panel

and widgets.

UTP2008

29

The Application Class

1.
2.

import javax.swing.*;
import java.awt.*;

3.
4.

public class MyApp

{

5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

Resides in

Resides in

public static void main(String[] args)

{
JFrame myFrame = new JFrame("Demo");
Container myPane = myFrame.getContentPane();

Initialize JFrame
object with parameter
Demo.
Use JFrame method
to retrieve the content
pane.
Instantiate the other
class MyGUI as
object.

MyGUI myGUIObject = new MyGUI();

JPanel myPanel = myGUIObject.getPanel();
myPane.add(myPanel);
Call getPanel()
method in MyGUI
myFrame.pack();
object
myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
myFrame.setVisible(true);
}
}

UTP2008

30