introduction to gui/swingbennedsen.org/java/swing-slides - inked.pdf · swing components basic...
TRANSCRIPT
![Page 1: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/1.jpg)
Introduction to GUI/Swing
1
Dr. Jens Bennedsen, Aarhus Uni., School of Engineering Aarhus, Denmark
![Page 2: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/2.jpg)
Overview
• JAVA and GUIs: SWING
◦ Container, Components, Layouts
◦ Using SWING
Swing
![Page 3: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/6.jpg)
The Second Swing Program Example:
The Second Swing Program
Swing
![Page 7: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/7.jpg)
The GUI
Swing
Container: JFrame
Layout: BorderLayout
North
Center
Components: JLabel JButton, containing
an ImageIcon
![Page 8: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/8.jpg)
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 !
![Page 9: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/9.jpg)
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 !
![Page 10: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/10.jpg)
Swing Components
Swing
• Top Level Containers
• General Purpose Containers
• Special Purpose Containers
• Basic Controls
• Uneditable Information Displays
• Interactive Displays of Highly Formatted
Information
![Page 11: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/11.jpg)
Swing Components
Swing
Top Level Containers
Your application usually extends one of these classes !
![Page 12: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/12.jpg)
Swing Components
General Purpose Containers
Swing
![Page 13: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/13.jpg)
Swing Components
General Purpose Containers
• typically used to collect Basic Controls
(JButton, JChoiceBox…)
• Added to layout of top-level containers
Swing
JPanel
JFrame
![Page 14: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/14.jpg)
Swing Components
Basic Controls
Swing
![Page 15: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/17.jpg)
Swing Components
Uneditable Information Displays
CIS 068
![Page 18: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/18.jpg)
Swing Components
Interactive Displays of Highly Formatted
Information
CIS 068
![Page 19: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/19.jpg)
Swing Components
Interactive Displays of Highly Formatted
Information
• Define standard interfaces for frequently
needed tasks
... go to java.sun.com for further
information ...
Swing
![Page 20: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/20.jpg)
Layout Management
How to glue it all together:
The Layout Management
Swing
![Page 21: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/22.jpg)
Layout Management
... and finally, the layout manager preserves
the world from home made layout-design !
Swing
![Page 23: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/23.jpg)
Layout Management
Java supplies five commonly used layout managers:
1. BorderLayout
2. BoxLayout
3. FlowLayout
4. GridBagLayout
5. GridLayout
SWing
![Page 24: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/24.jpg)
Layouts
BorderLayout
Swing
Position must be specified, e.g. add (“North”, myComponent)
![Page 25: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/25.jpg)
Layouts
BoxLayout
Swing
The BoxLayout class puts
components in a single row
or column.
It respects the components‘
requested maximum sizes.
![Page 26: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/26.jpg)
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
![Page 27: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/27.jpg)
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 …
![Page 28: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/28.jpg)
Layouts GridLayout
Swing
GridLayout simply makes a bunch of components equal in size and
displays them in the requested number of rows and columns .
![Page 29: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/29.jpg)
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
![Page 30: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/31.jpg)
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)
![Page 32: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/32.jpg)
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
![Page 33: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/33.jpg)
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
![Page 34: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/34.jpg)
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
![Page 35: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/35.jpg)
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(…)
![Page 36: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/36.jpg)
Concrete example
BearButtonTest
CIS 068
![Page 37: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/37.jpg)
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
![Page 38: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/38.jpg)
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
![Page 39: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/39.jpg)
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
![Page 40: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/40.jpg)
Example - Applet
Hello world applet
42
![Page 41: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/41.jpg)
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>
![Page 42: Introduction to GUI/Swingbennedsen.org/java/swing-slides - inked.pdf · Swing Components Basic Controls •Unlike ‘passive’ containers, controls are the ‘active’ part of your](https://reader034.vdocuments.us/reader034/viewer/2022051917/6008ad7f6f100a50d11218d3/html5/thumbnails/42.jpg)
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