Introduction to GUI/Swing
1
Dr. Jens Bennedsen, Aarhus Uni., School of Engineering Aarhus, Denmark
Overview
• JAVA and GUIs: SWING
◦ Container, Components, Layouts
◦ Using SWING
Swing
Swing’s JButton import java.awt.*;
import javax.swing.*;
public class MyFrame extends JFrame {
Icon icon1 = new ImageIcon("sesbastien-1.jpg");
Icon icon2 = new ImageIcon("sesbastien-2.jpg");
Icon icon3 = new ImageIcon("sesbastien-3.jpg");
public MyFrame() {
JButton b1 = new JButton(icon1);
b1.setPressedIcon(icon2);
b1.setRolloverIcon(icon3);
b1.setRolloverEnabled(true); b1.setToolTipText("Hello");
add(b1, BorderLayout.NORTH);
}
public static void main(String args[]) {
JFrame f = new MyFrame();
f.pack(); f.setVisible(true);
}
}
3
Quiz
What is the correct UML diagram for the
program?
CIS 068
JFrame
MyFrame
MyFrame
JFrame
JFrame
MyFrame
MyFrame
JFrame
MyFrame
JFrame
A B C D E
Icons
A fixed-size image or glyph
Can be used with almost all components (e.g. JButton)
Icon is an interface that any class can
implement
Icon used over Image because Image
is asynchronously loaded and not
serializable
5
The Second Swing Program Example:
The Second Swing Program
Swing
The GUI
Swing
Container: JFrame
Layout: BorderLayout
North
Center
Components: JLabel JButton, containing
an ImageIcon
Steps to build a GUI
swing
1. import package
2. set up top level container
(e.g. JFrame)
3. apply layout
(e.g. BorderLayout)
4. add components
(e.g. Label, Button)
5. REGISTER listeners
6. show it to the world !
The Source
swing
1. import package
2. set up top level container
(e.g. JFrame)
3. apply layout
(e.g. BorderLayout)
4. add components
(e.g. Label, Button)
5. REGISTER listeners
6. show it to the world !
Swing Components
Swing
• Top Level Containers
• General Purpose Containers
• Special Purpose Containers
• Basic Controls
• Uneditable Information Displays
• Interactive Displays of Highly Formatted
Information
Swing Components
Swing
Top Level Containers
Your application usually extends one of these classes !
Swing Components
General Purpose Containers
Swing
Swing Components
General Purpose Containers
• typically used to collect Basic Controls
(JButton, JChoiceBox…)
• Added to layout of top-level containers
Swing
JPanel
JFrame
Swing Components
Basic Controls
Swing
Swing Components
Basic Controls
• Unlike ‘passive’ containers, controls are the
‘active’ part of your GUI Remark: containers aren’t only ‘passive’, they are also ‘active’ sources of events, eg.
Mouse-events.
• Being the visible part of your interface,
controls bring your application to life
• Controls are event sources !
• Objects of your application register to
controls to handle the events
Swing
Composite Pattern
Exercise with the person next to you:
1. Google ”composite pattern” and find a
UML diagram for it
2. Find out what class JPanel could be and
what class JButton could be
CIS 068
Swing Components
Uneditable Information Displays
CIS 068
Swing Components
Interactive Displays of Highly Formatted
Information
CIS 068
Swing Components
Interactive Displays of Highly Formatted
Information
• Define standard interfaces for frequently
needed tasks
... go to java.sun.com for further
information ...
Swing
Layout Management
How to glue it all together:
The Layout Management
Swing
Layout Management
• The process of determining the size and position
of components
• A layout manager is an object that performs
layout management for the components within
the container.
• Layout managers have the final say on the size
and position of components added to a container
• Using the add method to put a component in a
container, you must ALWAYS take the container's
layout manager into account
Swing
Layout Management
... and finally, the layout manager preserves
the world from home made layout-design !
Swing
Layout Management
Java supplies five commonly used layout managers:
1. BorderLayout
2. BoxLayout
3. FlowLayout
4. GridBagLayout
5. GridLayout
SWing
Layouts
BorderLayout
Swing
Position must be specified, e.g. add (“North”, myComponent)
Layouts
BoxLayout
Swing
The BoxLayout class puts
components in a single row
or column.
It respects the components‘
requested maximum sizes.
Layouts
FlowLayout
Swing
FlowLayout is the default layout manager for every JPanel.
It simply lays out components from left to right, starting new
rows if necessary
Layouts GridBagLayout
Swing
GridBagLayout is the most sophisticated, flexible layout manager the
Java platform provides. If you really want to use it, go to java.sun.com …
Layouts GridLayout
Swing
GridLayout simply makes a bunch of components equal in size and
displays them in the requested number of rows and columns .
JFrame Example
public class FrameTester {
public static void main (String args[]) {
JFrame f = new JFrame ("JFrame Example");
Container c = f.getContentPane();
c.setLayout (new FlowLayout());
for (int i = 0; i < 5; i++) {
c.add (new JButton ("No"));
c.add (new Button ("Batter"));
}
c.add (new JLabel ("Swing"));
f.setSize (300, 200);
f.setVisible(true);
}
}
30
Graphics
The java.awt.Graphics class provides
methods for drawing on a GUI
component
◦ AWT:java.awt.Canvas
◦ Swing: javax.swing.JPanel
A Graphics object is passed to the
paint() method of the component
◦ Overwrite paint() to generate custom
graphics
31
Graphics and pixels
Java componets are made up of individual pixels
◦ Each pixel has an RGB colour and an (x,y) position
defined using the coordinate system below
32
(0,0)
Increasing y
Increasing x
(7,3)
Graphics
Methods of the Graphics class include ◦ void setColor(Color c)
sets the drawing color to c
◦ void drawLine(int x1, int y1, int x2, int y2)
draws a line between (x1,y1) and (x2,y2) ◦ void drawString(String str, int x, int y)
Draws str so that the upper left corner is at (x,y)
You can get the graphics component of a
e.g. Jframe by getGraphics()
33
Events
An event is some kind of action a Java program can respond to ◦ e.g. pressing a key, moving the mouse, …
The Java event model allows a component to notify one or more objects whenever a particular event occurs
It is based on ◦ event classes
◦ event listner interface
◦ Adapter classes
The classes/interfaces are defined in two main packages: ◦ java.awt.event – AWT/Swing events
◦ javax.swing.event – Swing only events
34
Event listener
Event listener interfaces defines the
methods required to receive event
notifications:
◦ Examples
ActionListener – pressing a button
KeyListener – pressing a key on the keyboard
MouseListener – pressing/releasing a mouse
button
WindowListener – changing the status of a
window (like minimizing, maximizing, …)
35
Notifications
An object that wishes to recieve notifications about a perticular event (e.g. a mouse button press) must: 1. Implement the appropriate event listener
interface
2. Implement the methods defined by the interface
3. be associated with the component that generates the event
36
public class ButtonExample implements ActionListner
public void ActionPerformed(ActionEvent ae) {
…}
Jbutton b = new Jbutton(”Press me”);
b.addActionListener(…)
Concrete example
BearButtonTest
CIS 068
Deployment
A Java program can be deployed as either
an Applet or as an application
◦ Application
Launched from the command line
Unrestricted access to the host system
◦ Applet
Executed using either an applet viewer or a web
browser
Limited access to the host system
39
Applets
An Applet extends either:
◦ Java.applet.Applet
◦ Javax.swing.Japplet
In both cases the Applet has a life-cycle
consisting of four stages
1. Initialisation
2. Begin execution
3. End execution
4. Perform final cleanup
40
Applets
The life-cycle is implemented using the following methods: ◦ init(): Called by the browser (or
appletviewer) to inform the applet that it has been loaded
◦ start(): Called by the browser to inform the applet that it should start its execution
◦ stop(): Called by the browser to inform the applet that it should stop its execution
◦ destroy(): Called by the browser to inform the applet that it is being reclaimed and should destroy any resources it has allocated
41
Example - Applet
Hello world applet
42
Applets on a webpage
Including an Applet in a webpage
To include the HelloWorld Applet
43
<html>
<body>
<h1>My First Applet</h1>
<applet code="HelloWorld.class" width="100" height="100">
</applet>
</body>
</html>
<applet code=class file name= appletName
width=pixels height=pixels>
<param name=paramName value=paramValue>
…
</applet>
At last... This was a BRIEF overview and introduction to SWING.
SWING has MUCH more to offer, see
• http://docs.oracle.com/javase/tutorial/uiswing/
CIS 068