Introduction to Event Handling GUIs are eventdriven A

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 AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Text Fields and an Introduction to Event Handling with Nested Classes • Class JText. Component – Superclass of JText. Field • Superclass of JPassword. Field – Adds echo character to hide text input in component – Allows user to enter text in the component when component has the application’s focus AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Create a new JText. Field AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Create a new JText. Field Outline Create a new uneditable JText. Field Create a new JPassword. Field Create event handler Register event handler Create event handler class by implementing the Action. Listener interface Declare action. Performed method AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY 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 AGDER COLLEGE FACULTY 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 AGDER COLLEGE FACULTY 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 AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Some event classes of package java. awt. event AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

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

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

Registering Events • Every JComponent has instance variable listener. List – Object of type Event. Listener. List – Maintains references to all its registered listeners AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Event registration for JText. Field text. Field 1 AGDER COLLEGE FACULTY 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 • Mouse. Events are handled by Mouse. Listeners and Mouse. Motions. Listeners • Key. Events are handled by Key. Listeners AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Mouse Event Handling • Mouse events – Create a Mouse. Event object – Handled by Mouse. Listeners and Mouse. Motion. Listeners – Mouse. Input. Listener combines the two interfaces – Interface Mouse. Wheel. Listener declares method mouse. Wheel. Moved to handle Mouse. Wheel. Events AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Mouse. Listener and Mouse. Motion. Listener interface methods. AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Mouse. Listener and Mouse. Motion. Listener interface methods. AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Look-and-Feel Observation Method calls to mouse. Dragged and mouse. Released are sent to the Mouse. Motion. Listener for the Component on which a mouse drag operation started. Similarly, the mouse. Released method call at the end of a drag operation is sent to the Mouse. Listener for the Component on which the drag operation started. AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Create JPanel to capture mouse events Set background to white Create JLabel and add to application AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Create event handler for mouse events Outline Register event handler Implement mouse listener interfaces Declare mouse. Clicked method Find location of mouse click Declare mouse. Pressed method Declare mouse. Released method AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Declare mouse. Entered method Outline Set background of JPanel Declare mouse. Exited method Set background of JPanel AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Declare mouse. Dragged method Outline Declare mouse. Moved method AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Adapter Classes • Adapter class – Implements event listener interface – Provides default implementation for all event-handling methods AGDER COLLEGE FACULTY 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 eventadapter class is an object of the corresponding event-listener type (e. g. , an object of a subclass of Mouse. Adapter is a Mouse. Listener). AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Extending Mouse. Adapter • Mouse. Adapter – Adapter class for Mouse. Listener and Mouse. Motion. Listener interfaces – Extending class allows you to override only the methods you wish to use AGDER COLLEGE FACULTY 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. AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

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

Outline Register event handler AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Get number of times mouse button was clicked Test for right mouse button Test for middle mouse button AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

11. 16 Key-Event Handling • Key. Listener interface – For handling Key. Events – Declares methods key. Pressed, key. Released and key. Typed AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Implement Key. Listener interface Set background color Register application as event handler for itself AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Declare key. Pressed method Outline Get code of pressed key Declare key. Released method Get code of released key Declare key. Typed method Output character typed AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Test if it was an action key Determine any modifiers pressed AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Layout Managers • Layout managers – Provided to arrange GUI components in a container – Provide basic layout capabilities – Implement the interface Layout. Manager AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Flow. Layout • Flow. Layout – Simplest layout manager – Components are placed left to right in order they are added – Components can be left aligned, centered or right aligned AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Layout managers. AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Create Flow. Layout Set layout of application AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Add JButton; Flow. Layout will handle placement Set alignment to left Adjust layout Add JButton; Flow. Layout will handle placement Set alignment to center AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Adjust layout Add JButton; Flow. Layout will handle placement Set alignment to right Adjust layout AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Border. Layout • Border. Layout – Arranges components into five regions – north, south, east, west and center – Implements interface Layout. Manager 2 – Provides horizontal gap spacing and vertical gap spacing AGDER COLLEGE FACULTY 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. AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

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

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

Outline Declare Border. Layout instance variable Create Border. Layout Set layout Register event handler AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Add buttons to application using layout manager constants Make button invisible Make button visible Update layout AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline horizontal gap vertical gap AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Grid. Layout • Grid. Layout – Divides container into a grid – Every component has the same width and height AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Declare two Grid. Layout instance variables Create Grid. Layout AGDER COLLEGE Set layout FACULTY OF ENGINEERING & SCIENCE

Outline Add button to JFrame Use second layout Use first layout Update layout AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Grid. Bag. Layout • Grid. Bag. Layout Manager – Similar to Grid. Layout 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 Grid. Bag. Layout layout manager to properly place the components in the grid AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Grid. Bag. Layout (Cont. ) • Grid. Bag. Constraints object – Describes how a component is placed in a Grid. Bag. Layout – anchor specifies the relative position of the component in an area that it does not fill • Constants: NORTH, NORTHEAST, SOUTHEAST, SOUTHWEST, 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 AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Grid. Bag. Layout (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 Grid. Bag. Layout 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” AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Designing a GUI that will use Grid. Bag. Layout. Column 0 1 2 0 1 Row 2 3 AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Grid. Bag. Constraints fields. AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Create a Grid. Bag. Layout object Create a Grid. Bag. Constraints object AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Cause the JText. Area to always fill its entire allocated area Call utility method add. Component with the JText. Area object, row, column and numbers of columns and rows to span as arguments When the window is resized, button 2 will grow AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

button 3 will still grow because of the weight values of button 2 Outline Set constraints and add component AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY 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 set. Menu. Bar, such as JFrame and JApplet – Class Menu. Bar • Contains the methods necessary to manage a menu bar – Class JMenu • Contains the methods necessary for managing menus – Class JMenu. Item • Contains the methods necessary to manage menu items – Can be used to initiate an action or can be a submenu AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Using Menus with Frames (Cont. ) – Class JCheck. Box. Menu. Item • Contains the methods necessary to manage menu items that can be toggled on or off – Class JRadio. Button. Menu. Item • Contains the methods necessary to manage menu items that can be toggled on or off like JCheck. Box. Menu. Items • When multiple JRadio. Button. Menu. Items are maintained as part of a Button. Group, 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 AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Create a JMenu Call JMenu method set. Mnemonic Add the “About…” JMenu. Item to file. Menu AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Create an Action. Listener to process about. Item’s action event Outline Display a message dialog box Create and add menu item exit. Item Register an Action. Listener that terminates the application AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Add file. Menu to a JMenu. Bar and attach the JMenu. Bar to the application window Create menu format. Menu Create submenu color. Menu Create JRadio. Button. Menu. Item array color. Items Create a Button. Group to ensure that only one of the menu items is selected at a time Add JRadio. Button. Menu. Items to AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE color. Menu and register Action. Listeners

Outline Invoke Abstract. Button method set. Selected Add color. Menu to format. Menu and add a horizontal separator line Create JRadio. Button. Menu. Item array fonts Create a Button. Group to ensure that only one of the menu items is selected at a time Add JRadio. Button. Menu. Items to color. Menu and register Action. Listeners AGDER COLLEGE Set default selection and add horizontal separator FACULTY OF ENGINEERING & SCIENCE

Outline Create JCheck. Box. Menu. Items Add font. Menu to format. Menu and format. Menu to the JMenu. Bar AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Determine the selected JRadio. Button. Menu. Item get. Source method returns a reference to the JRadio. Button. Menu. Item that generated the event AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Called if the user selects a JCheck. Box. Menu. Item in the font. Menu Determine whether either or both of the JCheck. Box. Menu. Items are selected AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Menu Mnemonic characters Menu bar AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE

Outline Expanded submenu Menu items Separator line AGDER COLLEGE FACULTY OF ENGINEERING & SCIENCE