1. 1 Graphical User Interfaces
Objektorienterade applikationer d2, förel. 1
1 Graphical User Interfaces
BK Chap. 13
Replace this with your course title and your name/contact details.
DAT055, 18/19, lp 3

2. Objektorienterade applikationer d2, förel. 1
Overview
Java API for GUIs
Constructing GUIs
Interface components
Event handling
Example: image viewer
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

3. Objektorienterade applikationer d2, förel. 1
GUI Principles
Components: GUI building blocks.
Buttons, menus, sliders, etc.
Events: reacting to user input.
Button presses, menu selections, etc.
Layout: arranging components to form a usable GUI.
Using layout managers.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

4. Objektorienterade applikationer d2, förel. 1
AWT and Swing
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

5. Objektorienterade applikationer d2, förel. 1
Elements of a frame
Window controls
Title
Menu bar
Content pane
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

6. Objektorienterade applikationer d2, förel. 1
Creating a frame
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;   
public class ImageViewer {
private JFrame frame;
/**
* Create an ImageViewer show it on screen. */
public ImageViewer()
makeFrame(); }
// rest of class omitted.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

7. Objektorienterade applikationer d2, förel. 1
The content pane
/**
* Create the Swing frame and its content. */
private void makeFrame() {
frame = new JFrame("ImageViewer");
Container contentPane = frame.getContentPane();
JLabel label = new JLabel("I am a label.");
contentPane.add(label);
frame.pack();
frame.setVisible(true); }
Visa ver. 0-1
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

8. Objektorienterade applikationer d2, förel. 1
Adding menus
JMenuBar
Displayed below the title.
Contains the menus.
JMenu
e.g. File. Contains the menu items.
JMenuItem
e.g. Open. Individual items.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

9. Objektorienterade applikationer d2, förel. 1
private void makeMenuBar(JFrame frame) {
JMenuBar menubar = new JMenuBar();
frame.setJMenuBar(menubar);
// create the File menu
JMenu fileMenu = new JMenu("File");
menubar.add(fileMenu);
JMenuItem openItem = new JMenuItem("Open");
fileMenu.add(openItem);
JMenuItem quitItem = new JMenuItem("Quit");
fileMenu.add(quitItem); }
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

10. Objektorienterade applikationer d2, förel. 1
Event handling
Events correspond to user interactions with components.
Components are associated with different event types.
Frames are associated with WindowEvent.
Menus are associated with ActionEvent.
Objects can be notified when an event occurs.
Such objects are called listeners.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

11. Standard sequential control flow
Objektorienterade applikationer d2, förel. 1
Standard sequential control flow
Explicit method call in code
written by the programmer .
object ( );
value
method
parameter passing
object : Type
method call
Programmet styr interaktionen med användaren.
method( ) { … } x
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

12. Event driven control flow
Objektorienterade applikationer d2, förel. 1
Event driven control flow
user interaction
GUI component
listener registration
OS +
JVM
parameter passing
Listener object
event
: ActionListener
method call
Användaren styr interaktionen med programmet.
actionPerformed( ) { … } e
Method automatically called as reaction to user activity
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

13. Centralized event receipt
Objektorienterade applikationer d2, förel. 1
Centralized event receipt
A single object handles all events.
Implements the ActionListener interface.
Defines an actionPerformed method.
It registers as a listener with each component.
item.addActionListener(this)
It has to work out which component has dispatched the event.
import java.awt.event.*;
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

14. Objektorienterade applikationer d2, förel. 1
ActionListener
public interface ActionListener {
public void actionPerformed(ActionEvent ev); }
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

15. Objektorienterade applikationer d2, förel. 1
public class ImageViewer implements ActionListener { …
public void actionPerformed(ActionEvent e)
String command = e.getActionCommand();
if(command.equals("Open")) { }
else if (command.equals("Quit")) {
private void makeMenuBar(Jframe frame)
openItem.addActionListener(this);
Visa ver. 0-2
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

16. Centralized event handling
Objektorienterade applikationer d2, förel. 1
Centralized event handling
The approach works.
It is used, so you should be aware of it.
However …
It does not scale well.
Identifying components by their text is fragile.
An alternative approach is preferred.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

17. Objektorienterade applikationer d2, förel. 1
Nested class syntax
Class definitions may be nested.
public class Enclosing { … private class Inner { … } }
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

18. Objektorienterade applikationer d2, förel. 1
Inner classes
Instances of the inner class are localized within the enclosing class.
Instances of the inner class have access to the private members of the enclosing class.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

19. Anonymous inner classes
Objektorienterade applikationer d2, förel. 1
Anonymous inner classes
Obey the rules of inner classes.
Used to create one-off objects for which a class name is not required.
Use a special syntax.
The instance is always referenced via its supertype, as it has no subtype name.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

20. Anonymous action listener
Objektorienterade applikationer d2, förel. 1
Anonymous action listener
JMenuItem openItem = new JMenuItem("Open");
openItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
openFile(); }
});
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

21. Anonymous class elements
Objektorienterade applikationer d2, förel. 1
Anonymous class elements
Anonymous object creation
openItem.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEvent e)
openFile(); } );
Class definition
Actual parameter
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

22. Action listener with λ expression
Objektorienterade applikationer d2, förel. 1
Action listener with λ expression
JMenuItem openItem = new JMenuItem("Open");
openItem.addActionListener(
(ActionEvent e) -> { openFile(); } );
λ expression
Anonymous functions, or λ expressions, is a new feature in Java 8.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

23. Objektorienterade applikationer d2, förel. 1
Exit on window close
frame.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } });
WindowAdapter provides a no-op implementation of the WindowListener interface.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

24. The imageviewer project
Objektorienterade applikationer d2, förel. 1
The imageviewer project
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

25. Objektorienterade applikationer d2, förel. 1
Image processing
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

26. Class responsibilities
Objektorienterade applikationer d2, förel. 1
Class responsibilities
ImageViewer
Sets up the GUI structure.
ImageFileManager
Static methods for image file loading and saving.
ImagePanel
Displays the image within the GUI.
OFImage
Models a 2D image.
ImagePanel extends Component
OFImage extends BufferedImage
(se bild 24)
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

27. Objektorienterade applikationer d2, förel. 1
OFImage
Our subclass of BufferedImage.
Represents a 2D array of pixels.
Important methods:
getPixel, setPixel
getWidth, getHeight
Each pixel has a color.
We use java.awt.Color.
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

28. Objektorienterade applikationer d2, förel. 1
Adding an ImagePanel
public class ImageViewer {
private JFrame frame;
private ImagePanel imagePanel; …
private void makeFrame()
Container contentPane = frame.getContentPane();
imagePanel = new ImagePanel();
contentPane.add(imagePanel); }
En ImagePanel är en Component som kan lagras i en Container.
(se bild 22)
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

29. Objektorienterade applikationer d2, förel. 1
Loading an image
public class ImageViewer {
private JFrame frame;
private ImagePanel imagePanel; …
private void openFile()
File selectedFile = …;
OFImage image =
ImageFileManager.loadImage(selectedFile);
imagePanel.setImage(image);
frame.pack(); }
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3

30. Objektorienterade applikationer d2, förel. 1
Review
Aim for clean application structures.
Keep GUI elements separate from application functionality!
Pre-defined components simplify creation of sophisticated GUIs.
Many components recognize user interactions with them.
Reactive components deliver events to listeners.
Clean = Cohesive
Objektorienterade applikationer, DAT055, DAI2, 18/19, lp 3
DAT055, 18/19, lp 3