1. COS 260 DAY 23
Tony Gauvin

2. Agenda Mini Quiz 10 on Friday Assignment 5 corrected
Questions?
Assignment 5 corrected
Good results
Assignment 6 partially corrected
Assignment 7 posted
Due Dec 1
Mini Quiz 10 on Friday
Chapter 12
Capstone progress report 2 Over Due
Building Graphical User Interfaces

3. Capstone Project Capstone Project Description Fall 2017.pdf
October Proposal Due ed to Tony in Blackboard
October 27 Progress Report ed to Tony in Blackboard
November 17 Progress Report ed to Tony in Blackboard
November Progress Report ed to Tony in Blackboard
December All Deliverables & Presentation Due
Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

4. Final CountDown Nov 28 Dec 1 Dec 5 Dec 8 Dec 12 Gui’s Gui’s Continued
Assignment 7 Due
Miniquiz 10
Dec 5
Handling errors
Dec 8
Min quiz 11
Dec 12
Assignment 8 due
Capstone Projects and presentation
Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

5. Building Graphical User Interfaces
Objects First with Java
Building Graphical User Interfaces
Replace this with your course title and your name/contact details.
6.0
© David J. Barnes and Michael Kölling

6. Overview Constructing GUIs Interface components GUI layout
Event handling
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

7. GUI Principles Components: GUI building blocks.
Buttons, menus, sliders, etc.
Layout: arranging components to form a usable GUI.
Using layout managers.
Events: reacting to user input.
Button presses, menu selections, etc.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

8. AWT and Swing
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

9. Elements of a frame imageviewer 1-0
Window controls
Title
Menu bar
Content pane
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

10. Swing vs AWT AWT (abstract window toolkit) part of original Java API
SWING is built on the awt and added richer components
Swing components start with the letter J
Both wing and AWT will be replaced by JavaFX
Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

11. 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.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

12. The content pane Imageviewer 0-1 Ex 13-1 /**
* 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); }
Imageviewer 0-1
Ex 13-1
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

13. Play Time Ex 13-3 Add button Ex 13.4 Add second button or second label
Alternative Structure imageviwer0-1
Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

14. Adding menus JMenuBar JMenu JMenuItem Displayed below the title.
Contains the menus.
JMenu
e.g. File. Contains the menu items.
JMenuItem
e.g. Open. Individual items.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

15. 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); }
EX 13.5 & 13.6
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

16. 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.
Mouse actions are associated with MouseEvent
Objects can be notified when an event occurs.
Such objects are called listeners.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

17. 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.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

18. ActionListener public interface ActionListener { /**
* Invoked when an action occurs.
ev Details of the event. */
public void actionPerformed(ActionEvent ev); }
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

19. 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);
} imageviewer0-2 ex 13-8,13.9, 13.10
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

20. 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.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

21. Lambdas as event handlers
Review earlier material if necessary:
Chapter 5 introduces lambdas.
Chapter 12 introduces functional interfaces.
Many event handler interfaces consist of a single abstract method.
They are functional interfaces.
Suited to implementation as lambdas.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

22. Lambda for ActionListener
JMenuItem openItem = new JMenuItem("Open");
...
openItem.addActionListener(
(ActionEvent ev) -> { openFile(); } );
General form
item.addActionListener(ev -> { actions });
Imageviewer , 13-13
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

23. The imageviewer project 0-4
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

24. Image processing imageviewer 1-0
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

25. 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.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

26. OFImage Our subclass of BufferedImage.
Represents a 2D array of pixels.
Important methods:
getPixel, setPixel
getWidth, getHeight (from super class)
Each pixel has a color.
We use java.awt.Color.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

27. 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); }
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

28. 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(); }
} ex
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

29. Layout managers Manage limited space for competing components.
FlowLayout, BorderLayout, GridLayout, BoxLayout, GridBagLayout.
Manage Container objects, e.g. a content pane.
Each imposes its own style.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

30. FlowLayout
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

31. BorderLayout
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

32. GridLayout
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

33. BoxLayout Note: no component resizing.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

34. Nested containers
Sophisticated layouts can be obtained by nesting containers.
Use JPanel as a basic container.
Each container will have its own layout manager.
Often preferable to using a GridBagLayout.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

35. Struts and Glue Invisible components used as spacing.
Available from the Box class.
Strut: fixed size.
Component createHorizontalStrut(int width)
Component createVerticalStrut(int height)
Glue: fills available space.
Component createHorizontalGlue()
Component createVerticalGlue()
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

36. Dialogs Modal dialogs block all other interaction.
Forces a response from the user.
Non-modal dialogs allow other interaction.
This is sometimes desirable.
May be difficult to avoid inconsistencies.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

37. JOptionPane standard dialogs
Message dialog
Message text plus an OK button.
Confirm dialog
Yes, No, Cancel options.
Input dialog
Message text and an input field.
Variations are possible.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

38. A message dialog private void showAbout() {
JOptionPane.showMessageDialog(frame,
"ImageViewer\n" + VERSION,
"About ImageViewer",
JOptionPane.INFORMATION_MESSAGE); }
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

39. Image filters Functions applied to the whole image.
int height = getHeight();
int width = getWidth();
for(int y = 0; y < height; y++) {
for(int x = 0; x < width; x++) {
Color pixel = getPixel(x, y);
alter the pixel's color value;
setPixel(x, y, pixel); }
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

40. Adding further filters
private void makeLighter() {
if(currentImage != null) {
currentImage.lighter();
frame.repaint();
showStatus("Applied: lighter"); }
else {
showStatus("No image loaded.");
Code duplication?
Refactor!
private void threshold() {
if(currentImage != null) {
currentImage.threshold();
frame.repaint();
showStatus("Applied: threshold"); }
else {
showStatus("No image loaded.");
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

41. Adding further filters
Define a Filter superclass (abstract).
Create function-specific subclasses.
Create a collection of subclass instances in ImageViewer.
Define a generic applyFilter method.
See imageviewer2-0.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

42. imageviewer2-0
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

43. Buttons and nested layouts
A GridLayout inside
a FlowLayout inside
a BorderLayout.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

44. Borders Used to add decoration around components.
Defined in javax.swing.border
BevelBorder, CompoundBorder, EmptyBorder, EtchedBorder, TitledBorder.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

45. Adding spacing JPanel contentPane = (JPanel)frame.getContentPane();
contentPane.setBorder(new EmptyBorder(6, 6, 6, 6));
// Specify the layout manager with nice spacing
contentPane.setLayout(new BorderLayout(6, 6));
imagePanel = new ImagePanel();
imagePanel.setBorder(new EtchedBorder());
contentPane.add(imagePanel, BorderLayout.CENTER);
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

46. Other components Slider Spinner Tabbed pane Scroll pane
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

47. Nested class syntax Class definitions may be nested.
public class Enclosing { … private class Inner { … } }
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

48. 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.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

49. 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.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

50. Anonymous action listener
JMenuItem openItem = new JMenuItem("Open");
openItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
openFile(); }
});
Compare with the lambda version
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

51. Anonymous class elements
Anonymous object creation
openItem.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEvent e)
openFile(); } );
Class definition
Actual parameter
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

52. 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.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

53. Review Aim for cohesive application structures.
Endeavor to keep GUI elements separate from application functionality.
Pre-defined components simplify creation of sophisticated GUIs.
Layout managers handle component juxtaposition.
Nest containers for further control.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.

54. Review Many components recognize user interactions with them.
Reactive components deliver events to listeners.
Lambdas are commonly used to implement listeners.
Anonymous inner classes are used where lambdas are not possible.
© 2017 Pearson Education, Inc. Hoboken, NJ. All rights reserved.