1. Lec.10 (Chapter 8 & 9) GUI Jiang (Jen) ZHENG June 27 th, 2005

2. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 2 Outline Intro. To Java GUI AWT & SWING Java Components Sample Components JFrame, JLabel, JButton, JTextField Even-Driven Programming Concept Layout Manager FlowLayout, GridLayout JPanel, BorderLayout Terminating a GUI ActionListener, WindowListener, MouseListener Updating the Display

3. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 3 Graphical Interfaces So far all of our programs have used Input from the keyboard Output to the console This is effective but in today’s world is not so user-friendly Users want to use the mouse Users want windows with dialog boxes and buttons Users need maximum guidance with minimum room for error

4. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 4 Graphical Interfaces Java has all of the tools for us to design and implement complex graphical interfaces Graphical output Use of a mouse Graphical components for input Ex: Windows with buttons, textfields, pulldown menus, radiobuttons, labels, and more To use these tools we need to learn some Java classes and some programming theory But once we learn how to do it we will typically prefer it over console applications

5. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 5 AWT and Swing The AWT (Abstract Windowing Toolkit) was developed for the first versions of Java Created components such as Frame, Panel, Button, TextField, Label However, the look and feel of the AWT varied on different windowing systems The same AWT Java program looks different when run on MS Windows machines, MACs and Sun Workstations This is because the underlying windowing systems on those machines differ

6. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 6 AWT and Swing Since a goal of Java is to be platform independent, its look and feel should also be platform independent Swing was developed from Java v. 1.2 to be more consistent in its look and feel across all platforms It also adds some extra features that did not exist in the AWT Many Swing components are similar to AWT in name, but with a “J” in front Ex: JFrame, JPanel, JButton, JTextField, JLabel

7. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 7 Components Components: the objects that make up a GUI JButton JLabel JCkeckbox JTextField JRadioButton JFileChooser …

8. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 8 Sample Components JRadioButton JCheckBox JButton JComboBox JList JButton

9. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 9 Sample Components Different Borders JMenu

10. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 10 Sample Components JScroll Bar JSlider Dialog (JOptionPane)

11. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 11 Sample Components File Selection Dialog (JFileChooser)

12. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 12 JFrames JFrames are objects that will be the windows in our graphical applications We can draw/paint graphics within them We can place and manipulate graphical components within them To use them we: Create a JFrame object Size it as desired Show it on the display

13. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 13 JLabels JLabels are simple components to show formatted text on the display We can set the font type, size and color We can set and change the text itself as desired throughout program execution Let’s look at a very simple example: Create a JFrame, then put a JLabel in it and display it

14. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 14 Simple Example See ex23a.java See the comments to determine how the various objects are created and set up properly Note that this example does not really do much No interaction with the user Closing the window does not even terminate the program  We must CTRL-C in the console to terminate But it does show us some of the basic setup for graphical applications Let’s now add a bit more functionality Add a button that user can click to change the color of the label text

15. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 15 JButtons JButtons are simple components that can also show text on the display However, in addition to showing text, they also respond to clicks of the mouse If a user clicks the mouse within a JButton, an ActionEvent object is generated in response This object is passed automatically to an ActionListener object  The ActionListener must be registered to “listen” to the JButton  ActionListener is actually an interface with the single method actionPerformed()  Any class that implements actionPerformed() can be an ActionListener

16. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 16 Event-Driven Programming This causes the actionPerformed method within the ActionListener to execute  It is the actionPerformed method that is doing the actual response to the button click This idea is called event-driven programming As program executes, user generates events in various ways  Ex: click a button, move the mouse, edit text Programmer writes code to respond to the various events that may occur There are many different types of events in Java programs, but the basic idea for all of them is similar:

17. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 17 Event-Driven Programming Some object generates an event object The event object is passed to some event listener object A method in the event listener executes to handle the event It is important that event handlers are linked to the appropriate event generators Otherwise event will still be generated but will not be responded to See ex23b.java

18. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 18 Another Example Let’s look at another simple example: Toggle Button Click it once and it does an action Click it again and it does a different action  Each click it alternates between the two actions The setup of this program is very similar to ex23b.java Only difference is what the listener is doing See ex23c.java

19. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 19 Multiple Components If we want to have multiple components, we need to determine how to lay them out To do this we use a layout manager These determine how components appear in a window and how much space is allocate for them There are many layout managers in Java Two simple ones are:  FlowLayout  Places components as we read a book – left to right top to bottom  GridLayout  Places components in an equally sized 2-dimensional rectangular grid

20. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 20 Multiple Components Multiple components may also need to interact with each other Listener for one component may need to access the other component In this case we must allow the listener access to all components involved -- so it must be different from how we did it in ex23b.java and ex23c.java Ex: Consider a JTextField This is a component in which the user can enter text Once user hits “Enter”, the component generates an ActionEvent  Same event generated by a JButton

21. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 21 Multiple Components We can use this to process input from a user For example to change the contents of a JLabel or a JButton Let’s look at another example Our JFrame will have a JButton and a JTextField The JButton will behave as in ex23b – clicking it will change the color of the text The JTextField will allow us to enter new text for the JButton We will also set things up differently to allow for more convenient access See ex23d.java

22. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 22 JPanel What if we want different parts of our window laid out differently? There is a GridBagLayout that allows for arbitrary configurations, but it is quite complicated to use A simpler solution is to subdivide our window We can do this with JPanels Have most of the functionality of JFrames, except without the title/menu bar Can store other components and lay them out using a layout manager

23. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 23 BorderLayout So now we can use the layout manager of our JFrame to store our JPanels We can then use our JPanels to store our other components See drawing on board When doing this, a common way of laying out our JFrame is BorderLayout BorderLayout subdivides our window into 5 areas  NORTH, SOUTH, EAST, WEST, CENTER We can put a component in each area or just some of them If the component is a JPanel, we can then put our other components within that

24. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 24 How to Terminate GUIs How to terminate a graphical program? So far we have seen that closing the window does not necessarily stop the program This is because graphical applications in Java must be explicitly terminated using the System.exit(0); method call However, we need to make sure the method is called only when we really want to quit the program In the text, they show how you can set up a button to stop the program  This is fine, but most users would like closing the window to also stop the program

25. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 25 ActionListener, WindowListener We can handle this with another listener So far we have only discussed ActionListener, which listens for ActionEvents Another useful listener in Java is WindowListener, which listens for WindowEvents  Ex: opening, minimizing, closing, activating, etc.  See API Because there are many different things a WindowEvent can represent, we have multiple methods in the WindowListener interface  However, we are only interested in one for now: windowClosing()

26. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 26 WindowListner However, to be a WindowListener, a class must implement all methods in the interface So we would have to implement all 7 methods, even though we only really need one  For the other 6 we would just have empty braces To avoid this problem, Java has adapter classes for most of its event handling interfaces  These trivially implement ALL of the methods in the interface  We then extend the adapter and override only the methods we need  In this case WindowAdapter See Counters.java

27. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 27 MouseEvents and MouseListeners One of the most useful events in Java is the MouseEvent Allows us to act based on users manipulation of the mouse There are two different listeners for the mouse One for "change of state"  Pressing or releasing a button  Entering or leaving a component One for "motion"  Moving the mouse  Dragging the mouse Let's see how to do this  See ex24.java

28. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 28 Updating the Display Often an event will cause some change on the display A JLabel or JButton will be changed These are updated on the display automatically, so we don't have to take any extra action Some graphics are drawn In this case we DO have to take action Components have a Graphics context that allows graphics to be painted on the screen Graphics are drawn through execution of the method paint() or paintComponent()

29. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 29 Updating the Display Note that there are a LOT of different ways of drawing and updating the display in Java, using JFrames, JPanels, JComponents, JCanvas, etc. However, they all have one important requirement: By default graphics are only drawn when "necessary"  Ex: If the window is covered and then uncovered, or minimized and then restored If we want them to be drawn at other times, we must request this via the method repaint() This asks the window to be redrawn when it otherwise would not have been

30. CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10 30 Updating the Display For example, if we are drawing a line as we move the mouse, we must repaint the screen after EACH PIXEL in order to see its effect Let's look at another example See ex25.java