1. 10/20/2005week71 Graphics, mouse and mouse motion events, KeyEvent Agenda Classes in AWT for graphics Example java programs –Graphics –Mouse events –Mouse motion events –Key Event

2. 10/20/2005week72 Classes in Abstract Windowing Toolkit Color - define and manipulate colors Font Graphics - draw Strings, lines, rectangles etc We will illustrate these classes through an example - a tictactoe board and how to handle moves by the user.

3. 10/20/2005week73 Introduction Java’s graphics capabilities –Drawing 2D shapes –Controlling colors –Controlling fonts Java 2D API (not required in this course) –More sophisticated graphics capabilities Drawing custom 2D shapes Filling shapes with colors and patterns

4. 10/20/2005week74 Classes used from Java’s original graphics capabilities and from the Java2D API. Classes and interfaces from the Java2D API that appear in package java.awt Object Color Component Font FontMetrics Graphics Polygon Graphics2D Classes from the Java2D API that appear in package java.awt.geom GradientPaint BasicStroke TexturePaint RectangularShape GeneralPath Line2D RoundRectangle2D Arc2D Ellipse2D Rectangle2D

5. 10/20/2005week75 coordinate system Java’s coordinate system –Scheme for identifying all points on screen –Upper-left corner has coordinates (0,0) –Coordinate point composed of x-coordinate and y-coordinate

6. 10/20/2005week76 Java coordinate system. Units are measured in pixels

7. 10/20/2005week77 Graphics Contexts and Graphics Objects Graphics context –Enables drawing on screen –Graphics object manages graphics context Controls how information is drawn –Class Graphics is abstract Cannot be instantiated Contributes to Java’s portability –Class Component method paint takes Graphics object public void paint( Graphics g ) –Called through method repaint

8. 10/20/2005week78 Color Control Class Color –Defines methods and constants for manipulating colors –Colors are created from red, green and blue components RGB values Check the API page for Color

9. 10/20/2005week79 Color constants and their RGB values

10. 10/20/2005week710 Color methods and color-related Graphics methods

11. 10/20/2005week711 Font Control Class Font –Contains methods and constants for font control –Font constructor takes three arguments Font name –Monospaced, SansSerif, Serif, etc. Font style –Font.PLAIN, Font.ITALIC and Font.BOLD Font size –Measured in points (1/72 of inch) Check the API page for Font

12. 10/20/2005week712 Font -related methods and constants

13. 10/20/2005week713 Font -related methods and constants

14. 10/20/2005week714 Font Control Font metrics –Height –Descent (amount character dips below baseline) –Ascent (amount character rises above baseline) –Leading (difference between descent and ascent)

15. 10/20/2005week715 Font metrics (not required in this course)

16. 10/20/2005week716 FontMetrics and Graphics methods for obtaining font metrics

17. 10/20/2005week717 Drawing Lines, Rectangles and Ovals Class Graphics –Provides methods for drawing lines, rectangles and ovals All drawing methods require parameters width and height

18. 10/20/2005week718 Graphics methods that draw lines, rectangles and ovals

19. 10/20/2005week719 Graphics methods that draw lines, rectangles and ovals (not required in this course)

20. 10/20/2005week720 First version of tictactoe board

21. 10/20/2005week721 First version of tictactoe board Note : a) Color change b) Font change c) drawing line d) drawing filled rect ShowTicTaeToe

22. 10/20/2005week722 Second version of TicTacToe In this version we want the user to be able to make a move. We will only show a single O or X. The user can specify the row and column to select. Alternately a O or an X will be displayed.

23. 10/20/2005week723 Second version of TicTacToe The user has selected row = 0 and column = 1.

24. 10/20/2005week724 Second version of TicTacToe Next the user has selected row = 2 and column = 0. The X and O will be used alternately.

25. 10/20/2005week725 Second version of TicTacToe Changes from earlier version - We now show moves by user. New method used fillOval(x, y, width, height) Note use of repaint() and use of super in paint

26. 10/20/2005week726 Idea : a) While(forever) b) Display the board c) get row and column from user d) determine where the move is to be displayed e) display X and O in alternate iterations How to display X ? Use 2 lines. How to display 0 ? Use filled circle. /week7/TicTacToe/TicTacToe.java

27. 10/20/2005week727 Next version of Tictactoe In this version, we wish to incorporate mouse events so that users can specify the move by clicking in the desired position. There are a number of mouse events. There are 2 types of mouse related events - –mouse events –mouse motion events The corresponding listeners are –MouseListeners –MouseMotionListeners

28. 10/20/2005week728 Event handlers for events with mouse Two basic types of mouse events –Mouse events with the event handlers mousePressed, mouseClicked, mouseReleased, mouseEntered and mouseExited –Mouse motion events with the event handlers mouseDragged mouseMoved Your program must include all handlers!!!

29. 10/20/2005week729 What do we wish to achieve? See the sample run of the program: /week7/TicTacToe/TicTacToe2.java

30. 10/20/2005week730 Idea used in the application Display board as usual. Listen for the event “mousePressed” When it happens, find out where it occurred. Determine which square it is Show a circle or a X in the designated square. Note that in this application we are not concerned with mouse motions!!

31. 10/20/2005week731 Final version of Tictactoe In this final version, we wish to have the ability to change our mind after pressing a mouse button to specify the position of X or O. This can be done by dragging the mouse. The position becomes final only when the mouse is released This illustrates the use of mouse motion handlers

32. 10/20/2005week732 What we wish to achieve? See the sample run of the program: /week7/TicTacToe/TicTacToe3.java

33. 10/20/2005week733 Idea used in the application Everything is the same as in the earlier application. In addition, listen for the event “mouseDragged” When it happens, find out the current position of the mouse. As the mouse moves from square to square, move the figure with it. The move is final only when mouse is released.

34. 10/20/2005week734 Structure of program // Import classes just as before public class TicTacToe3 extends JFrame implements MouseListener, MouseMotionListener { // Var declaractions // Constructor //paint method // mouse event methods as needed // other methods as needed // mouse motion events – mouse dragged, // mouse moved // main method }

35. 10/20/2005week735 public void mouseDragged( MouseEvent e ) public void mouseMoved( MouseEvent e ) Additional methods needed public void mouseReleased( MouseEvent e )

36. 10/20/2005week736 Key Event Handling Interface KeyListener –Handles key events Generated when keys on keyboard are pressed and released KeyEvent –Contains virtual key code that represents key..\..\week7\keydemo