1. 1 COS 260 DAY 24 Tony Gauvin

2. 2 Agenda Questions? 10 th Mini Quiz Corrected –So-so results Capstone progress report over due Course evaluations Assignment 6 Due Assignment 7 Posted Discussion on Building Graphic User Interfaces

3. 3 Final Countdown Dec 3 –Finish Chapter 11 –Assignment 6 due Dec 7 –11 th mini quiz –Begin Chapter 12 Dec 10 –Finish Chapter 12 –Assignment 7 Due Dec 14 @ 10 AM –12 th mini quiz –Capstone Presentations Copyright © 2014 Pearson Education, Inc. Slide 1-3

4. Building Graphical User Interfaces 5.0

5. 5 Overview Constructing GUIs Interface components GUI layout Event handling Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

6. 6 The imageviewer project Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

7. 7 Image processing Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

8. 8 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. Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

9. 9 Important Support Classes Color –http://docs.oracle.com/javase/7/docs/api/ja va/awt/Color.htmlhttp://docs.oracle.com/javase/7/docs/api/ja va/awt/Color.html BufferedImage –http://docs.oracle.com/javase/7/docs/api/ja va/awt/image/BufferedImage.htmlhttp://docs.oracle.com/javase/7/docs/api/ja va/awt/image/BufferedImage.html Graphics –http://docs.oracle.com/javase/7/docs/api/ja va/awt/Graphics.htmlhttp://docs.oracle.com/javase/7/docs/api/ja va/awt/Graphics.html Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

10. 10 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. Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

11. 11 Adding an ImagePanel Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling public class ImageViewer { private JFrame frame; private ImagePanel imagePanel; … private void makeFrame() { Container contentPane = frame.getContentPane(); imagePanel = new ImagePanel(); contentPane.add(imagePanel); } … }

12. 12 Loading an image Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling public class ImageViewer { private JFrame frame; private ImagePanel imagePanel; … private void openFile() { File selectedFile = …; OFImage image = ImageFileManager.loadImage(selectedFile); imagePanel.setImage(image); frame.pack(); } … }

13. 13 Things to Do Add two labels –Image file name over the image –Status under below the image Add Filter menu Add Help menu –Dialog with “About Image viewers” Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

14. 14 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. https://docs.oracle.com/javase/tutorial/u iswing/layout/visual.html https://docs.oracle.com/javase/tutorial/u iswing/layout/visual.html Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

15. 15 FlowLayout Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

16. 16 BorderLayout Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

17. 17 GridLayout Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

18. 18 BoxLayout Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling Note: no component resizing.

19. 19 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() https://docs.oracle.com/javase/tutorial/u iswing/layout/box.html https://docs.oracle.com/javase/tutorial/u iswing/layout/box.html Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

20. 20 Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

21. 21 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. Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

22. 22 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. https://docs.oracle.com/javase/tutorial/u iswing/components/dialog.html https://docs.oracle.com/javase/tutorial/u iswing/components/dialog.html Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

23. 23 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. Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

24. 24 A message dialog Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling private void showAbout() { JOptionPane.showMessageDialog(frame, "ImageViewer\n" + VERSION, "About ImageViewer", JOptionPane.INFORMATION_MESSAGE); }

25. 25 Image filters Functions applied to the whole image. Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling 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); }

26. 26 Adding further filters Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling private void makeLighter() { if(currentImage != null) { currentImage.lighter(); frame.repaint(); showStatus("Applied: lighter"); } else { showStatus("No image loaded."); } private void threshold() { if(currentImage != null) { currentImage.threshold(); frame.repaint(); showStatus("Applied: threshold"); } else { showStatus("No image loaded."); } Code duplication? Refactor!

27. 27 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. Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

28. 28 imageviewer2-0 Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

29. 29 Buttons and nested layouts Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling A GridLayout inside a FlowLayout inside a BorderLayout.

30. 30 Borders Used to add decoration around components. Defined in javax.swing.border –BevelBorder, CompoundBorder, EmptyBorder, EtchedBorder, TitledBorder. https://docs.oracle.com/javase/tutorial/u iswing/components/border.html https://docs.oracle.com/javase/tutorial/u iswing/components/border.html Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

31. 31 Adding spacing Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling 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);

32. 32 Other components Slider Spinner Tabbed pane Scroll pane https://docs.oracle.com/javase/tutori al/uiswing/components/index.html Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

33. 33 Music Player revisited Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

34. 34 Gui Design Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling http://sixrevisions.com/user-interface/website-wireframing/

35. 35 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. Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling

36. 36 Review Many components recognize user interactions with them. Reactive components deliver events to listeners. Anonymous inner classes are commonly used to implement listeners. Objects First with Java - A Practical Introduction using BlueJ, © David J. Barnes, Michael Kölling