1. Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh

2. Many intro. to programming examples use  Input from the keyboard (or file)  Output to the console (or file) 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 Graphical Interfaces

3. Java contains tools for design and implement with graphical interfaces  Graphical output and use of a mouse and other graphical components for input o Ex: Windows with buttons, textfields, pulldown menus, radiobuttons, labels, and more To use these tools, need Java classes and some programming theory  Typically prefer it over console applications Graphical Interfaces

4. 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 o This is because the underlying windowing systems on those machines differ AWT and Swing

5. 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  Also adds extra features that did not exist in the AWT  Many Swing components are similar to AWT in name, but with a “J” in front o Ex: JFrame, JPanel, JButton, JTextField, JLabel AWT and Swing

6. In addition to Swing, since JDK 1.7 programmers also have the option of using JavaFX  This allows for graphics and multimedia across multiple platforms  It is actually a set of packages that work together  We will not be discussing this today, but see: http://docs.oracle.com/javafx/2/overview/jfxpub-overview.htm#CJACGDDE JavaFX

7. Focus on JFrames  To use: o Create a JFrame object o Size it as desired o Show it on the display  Once we have a JFrame we can do a LOT o Draw graphics within it o Store and organize other components o React to events such as mouse movement and clicking JFrames

8. JLabels are simple components to show formatted text on the display  Change font type, size and color  Set and change the text itself as desired throughout program execution  Very simple example: o Create a JFrame, then put a JLabel in it and display it  See ex1a.java See ex1a.java  Note how the various objects are created and set up properly JLabels

9. This example does not really do much  No interaction with the user But it does show us some of the basic setup for graphical applications To Add a bit more functionality  Add a button that user can click to change the color of the label text Simple Example

10. JButtons are simple components that show text on the display, like a JLabel  In addition to showing text, it responds to clicks of the mouse o If a user clicks the mouse within a JButton, an ActionEvent object is generated in response o 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() JButtons

11.  Any class that implements actionPerformed() can be an ActionListener This causes the actionPerformed method within the ActionListener to execute  The actionPerformed method 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 Event-Driven Programming

12.  There are many different types of events in Java programs, but the basic idea for all of them is similar: 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 ex1b.javaex1b.java Event-Driven Programming

13.  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 ex1b.java  Only difference is what the listener is doing  See ex1c.javaex1c.java Another Example

14.  If we want to have multiple components, we need to determine how to lay them out Use a layout manager  These determine how components appear in a window and how much space is allocated for them There are many layout managers in Java  Two simple ones are: 1.FlowLayout Places components as we read a book – left to right top to bottom 2.GridLayout Places components in an equally sized 2-dimensional rectangular grid Multiple Components

15.  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 ex1b.java and ex1c.java  Ex: Consider a JTextField This component allows the user to enter text Once user hits “Enter”, the component generates an ActionEvent Same event generated by a JButton Multiple Components

16.  use 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 ex1b – clicking it will change the color of the text The JTextField will allow us to enter new text for the JButton Need to set things up differently to allow for more convenient access  See ex1d.javaex1d.java Multiple Components

17.  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 More on GUIS

18.  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  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  See ex2.javaex2.java More on GUIS

19.  What if we want to encapsulate data within a JPanel?  The JPanel class contains instance variables and methods, but these are geared toward its graphical function  We can attach components to it but this is solely for display purposes  The variables are still outside the JPanel  What if we want it to also store and manipulate our own data in the JPanel?  We need to extend it using inheritance More on JPanels

20.  Drawing Shapes and Figures  Java Graphics allow many predefined figures to be drawn drawRect, fillRect, draw3DRect, fill3DRect drawOval, fillOval drawLine drawArc, fillArc drawPolygon, fillPolygon  The Graphics2D class extends the functionality to allow objects implementing the Shape interface to be drawn  MouseEvents  These can be used to recognize and respond to arbitrary actions by the mouse Still More

21.  See ex3.javaex3.java  More complex example  Shows a more "moderate" graphical program  Uses JPanel subclass, MouseListener and Shapes Another Example