1. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GUI Components ikt403 – Object-Oriented Software Development

2. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Introduction to Event Handling GUIs are event-driven –A user interaction creates an event Common events are clicking a button, typing in a text field, selecting an item from a menu, closing a window and moving the mouse –The event causes a call to a method called an event handler

3. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Text Fields and an Introduction to Event Handling with Nested Classes Class JTextComponent –Superclass of JTextField Superclass of JPasswordField –Adds echo character to hide text input in component –Allows user to enter text in the component when component has the application’s focus

4. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create a new JTextField

5. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create a new JTextField Create a new uneditable JTextField Create a new JPasswordField Create event handlerRegister event handler Create event handler class by implementing the ActionListener interface Declare actionPerformed method

6. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

7. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

8. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

9. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Steps Required to Set Up Event Handling for a GUI Component Several coding steps are required for an application to respond to events –Create a class for the event handler –Implement an appropriate event-listener interface –Register the event handler

10. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Common GUI Event Types and Listener Interfaces Event types –All are subclasses of AWTEvent –Some declared in package java.awt.event –Those specific to Swing components declared in javax.swing.event

11. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Common GUI Event Types and Listener Interfaces Delegation event model –Event source is the component with which user interacts –Event object is created and contains information about the event that happened –Event listener is notified when an event happens

12. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Some event classes of package java.awt.event

13. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Some common event-listener interfaces of package java.awt.event.

14. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE How Event Handling Works Remaining questions –How did the event handler get registered? –How does the GUI component know to call actionPerformed rather than some other event-handling method?

15. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Registering Events Every JComponent has instance variable listenerList –Object of type EventListenerList –Maintains references to all its registered listeners

16. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Event registration for JTextField textField1

17. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Event-Handler Invocation Events are dispatched to only the event listeners that match the event type –Events have a unique event ID specifying the event type MouseEvent s are handled by MouseListener s and MouseMotionsListener s KeyEvent s are handled by KeyListener s

18. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Mouse Event Handling Mouse events –Create a MouseEvent object –Handled by MouseListener s and MouseMotionListener s –MouseInputListener combines the two interfaces –Interface MouseWheelListener declares method mouseWheelMoved to handle MouseWheelEvent s

19. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE MouseListener and MouseMotionListener interface methods.

20. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE MouseListener and MouseMotionListener interface methods.

21. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Look-and-Feel Observation Method calls to mouseDragged and mouseReleased are sent to the MouseMotionListener for the Component on which a mouse drag operation started. Similarly, the mouseReleased method call at the end of a drag operation is sent to the MouseListener for the Component on which the drag operation started.

22. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create JPanel to capture mouse events Set background to whiteCreate JLabel and add to application

23. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create event handler for mouse events Register event handler Implement mouse listener interfaces Find location of mouse click Declare mouseClicked methodDeclare mousePressed methodDeclare mouseReleased method

24. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare mouseEntered methodSet background of JPanel Declare mouseExited methodSet background of JPanel

25. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare mouseDragged methodDeclare mouseMoved method

26. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

27. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

28. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Adapter Classes Adapter class –Implements event listener interface –Provides default implementation for all event-handling methods

29. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Software Engineering Observation When a class implements an interface, the class has an “is a” relationship with that interface. All direct and indirect subclasses of that class inherit this interface. Thus, an object of a class that extends an event-adapter class is an object of the corresponding event-listener type (e.g., an object of a subclass of MouseAdapter is a MouseListener ).

30. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Extending MouseAdapter MouseAdapter –Adapter class for MouseListener and MouseMotionListener interfaces –Extending class allows you to override only the methods you wish to use

31. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Common Programming Error If you extend an adapter class and misspell the name of the method you are overriding, your method simply becomes another method in the class. This is a logic error that is difficult to detect, since the program will call the empty version of the method inherited from the adapter class.

32. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Event-adapter classes and the interfaces they implement in package java.awt.event.

33. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Register event handler

34. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Get number of times mouse button was clicked Test for right mouse buttonTest for middle mouse button

35. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

36. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

37. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE 11.16 Key-Event Handling KeyListener interface –For handling KeyEvent s –Declares methods keyPressed, keyReleased and keyTyped

38. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Implement KeyListener interface Set background colorRegister application as event handler for itself

39. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare keyPressed method Get code of pressed key Declare keyReleased method Get code of released keyDeclare keyTyped method Output character typed

40. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Test if it was an action key Determine any modifiers pressed

41. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

42. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

43. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Layout Managers Layout managers –Provided to arrange GUI components in a container –Provide basic layout capabilities –Implement the interface LayoutManager

44. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE FlowLayout –Simplest layout manager –Components are placed left to right in order they are added –Components can be left aligned, centered or right aligned

45. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Layout managers.

46. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create FlowLayout Set layout of application

47. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Add JButton ; FlowLayout will handle placement Set alignment to left Adjust layout Add JButton ; FlowLayout will handle placement Set alignment to center

48. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Adjust layout Add JButton ; FlowLayout will handle placement Set alignment to right Adjust layout

49. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

50. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

51. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE BorderLayout –Arranges components into five regions – north, south, east, west and center –Implements interface LayoutManager2 –Provides horizontal gap spacing and vertical gap spacing

52. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Look-and-Feel Observation Each container can have only one layout manager. Separate containers in the same application can use different layout managers.

53. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Look-and-Feel Observation If no region is specified when adding a Component to a BorderLayout, the layout manager assumes that the Component should be added to region BorderLayout.CENTER.

54. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Common Programming Error When more than one component is added to a region in a BorderLayout, only the last component added to that region will be displayed. There is no error that indicates this problem.

55. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare BorderLayout instance variable Create BorderLayout Set layoutRegister event handler

56. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Add buttons to application using layout manager constants Make button invisibleMake button visible Update layout

57. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline horizontal gapvertical gap

58. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

59. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridLayout –Divides container into a grid –Every component has the same width and height

60. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Declare two GridLayout instance variables Create GridLayout Set layout

61. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Add button to JFrame Use second layoutUse first layout Update layout

62. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

63. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridBagLayout GridBagLayout Layout Manager –Similar to GridLayout in that it arranges components in a grid, but more flexible The components can vary in size and can be added in any order –Determining the appearance of the GUI Draw the GUI on paper Draw a grid over it, dividing the components into rows and columns –The initial row and column numbers should be 0 –Used by the GridBagLayout layout manager to properly place the components in the grid

64. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridBagLayout (Cont.) GridBagConstraints object –Describes how a component is placed in a GridBagLayout –anchor specifies the relative position of the component in an area that it does not fill Constants: NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST, NORTHWEST and CENTER (the default) –fill defines how the component grows if the area in which it can be displayed is larger than the component Constants: NONE (the default), VERTICAL, HORIZONTAL and BOTH

65. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridBagLayout (Cont.) –gridx and gridy specify where the upper-left corner of the component is placed in the grid –gridwidth and gridheight specify the number of columns and rows a component occupies –weightx and weighty specify how to distribute extra horizontal and vertical space to grid slots in a GridBagLayout when the container is resized A zero value indicates that the grid slot does not grow in that dimension on its own –However, if the component spans a column/row containing a component with nonzero weight value, it will grow in the same proportion as the other components in that column/row Use positive nonzero weight values to prevent “huddling”

66. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Designing a GUI that will use GridBagLayout. Column 0 12 0 1 2 3 Row

67. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GridBagConstraints fields.

68. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create a GridBagLayout object Create a GridBagConstraints object

69. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Cause the JTextArea to always fill its entire allocated area Call utility method addComponent with the JTextArea object, row, column and numbers of columns and rows to span as arguments When the window is resized, button2 will grow

70. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline button3 will still grow because of the weight values of button2 Set constraints and add component

71. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

72. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

73. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Using Menus with Frames Menus –Allow the user to perform actions without unnecessarily cluttering a GUI with extra components –Can be attached only to objects of the classes that provide member setMenuBar, such as JFrame and JApplet –Class MenuBar Contains the methods necessary to manage a menu bar –Class JMenu Contains the methods necessary for managing menus –Class JMenuItem Contains the methods necessary to manage menu items –Can be used to initiate an action or can be a submenu

74. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Using Menus with Frames (Cont.) –Class JCheckBoxMenuItem Contains the methods necessary to manage menu items that can be toggled on or off –Class JRadioButtonMenuItem Contains the methods necessary to manage menu items that can be toggled on or off like JCheckBoxMenuItem s When multiple JRadioButtonMenuItem s are maintained as part of a ButtonGroup, only one item in the group can be selected at a given time –Mnemonics Special characters that can provide quick access to a menu or menu item from the keyboard

75. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline

76. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create a JMenu Call JMenu method setMnemonic Add the “ About… ” JMenuItem to fileMenu

77. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create an ActionListener to process aboutItem ’s action event Display a message dialog box Create and add menu item exitItem Register an ActionListener that terminates the application

78. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Add fileMenu to a JMenuBar and attach the JMenuBar to the application window Create menu formatMenu Create submenu colorMenu Create JRadioButtonMenuItem array colorItems Create a ButtonGroup to ensure that only one of the menu items is selected at a time Add JRadioButtonMenuItem s to colorMenu and register ActionListener s

79. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Invoke AbstractButton method setSelected Add colorMenu to formatMenu and add a horizontal separator line Create JRadioButtonMenuItem array fonts Create a ButtonGroup to ensure that only one of the menu items is selected at a time Add JRadioButtonMenuItem s to colorMenu and register ActionListener s Set default selection and add horizontal separator

80. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Create JCheckBoxMenuItem s Add fontMenu to formatMenu and formatMenu to the JMenuBar

81. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Determine the selected JRadioButtonMenuItem getSource method returns a reference to the JRadioButtonMenuItem that generated the event

82. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Called if the user selects a JCheckBoxMenuItem in the fontMenu Determine whether either or both of the JCheckBoxMenuItem s are selected

83. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Menu Mnemonic characters Menu bar

84. AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE Outline Menu items Expanded submenu Separator line