Introduction to GUI/Swing

1

Dr. Jens Bennedsen, Aarhus Uni., School of Engineering Aarhus, Denmark

jbb@ase.au.dk

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