Graphical User Interface Components: Part 1 Chapter 11

2 Graphical User Interface (GUI) Gives program distinctive “____” and “_____” Provides users with basic level of familiarity Built from GUI components (controls, widgets, etc.) –User interacts with GUI component via _________, _____________, etc Check out this visual index of componentsvisual index – components/components.html

3 Netscape Window With GUI Components menu bar buttoncombo boxmenus scroll bars

4 Some Basic GUI Components

5 Three Parts of a GUI Application 1.___________________ that make up the Graphical User Interface 2.Listeners that receive the events and ___________ to them 3.______________ that does useful work for the user

6 Swing GUI Components Package javax.swing Components originate from AWT (package java.awt ) Contain look and feel –_______________ and how users ____________ with program Lightweight components –Written completely in _____________

7 Overview of Swing Components Class Component –Contains method _____ for drawing Component onscreen Class Container –Collection of related components –Contains method _______ for adding components Class ___________ (See Sun tutorial)Sun tutorial –Pluggable look and feel for customizing look and feel –Shortcut keys (mnemonics) –Common _____________ capabilities Object Component Container JComponent

8 Events Generated by Swing Components Act that results in the eventListener type User clicks a button, presses Return while typing in a text field, or chooses a menu item ActionListener User closes a frame (main window) WindowListener User presses a mouse button while the cursor is over a component MouseListener User moves the mouse over a component MouseMotionListener Component becomes visible ComponentListener Component gets the keyboard focus FocusListener Table or list selection changes ListSelectionListener

9 Events Generated by Swing Components Each event is represented by an ___________ –Object gives information about the event –Identifies the event _________. Event sources are typically ____________, –Other kinds of objects can also be event sources. Each event source can have ____________________ registered on it. –Conversely, a single listener can register with multiple event sources.

10 JLabel Label –Provide ___________ on GUI –Defined with class JLabel –Can display: Single line of_______________ text Image Text and _____________ View Figure 13.4Figure 13.4 –Note uses of the JLabel Class

11 Event Handling An event occurs every time the user –____________ a character or –Pushes a _________________ Any object can be ___________ of the event. That object must: –_________________ the appropriate interface –Be registered as an _____________________ on the appropriate event source.

12 Event Handling GUI's are event driven –Events occur when user ___________ with GUI –e.g., moving mouse, pressing button, typing in text field, etc. Class java.awt.AWTEvent Checkout Sun tutorial on event handlingSun tutorial – overview/event.html

13 Some Event Classes Of Package java.awt.event Object EventObject AWTEvent ActionEvent AdjustmentEvent ItemEvent TextEvent ContainerEvent FocusEvent PaintEvent WindowEvent InputEvent MouseWheelEvent ComponentEvent KeyEvent MouseEvent Object EventObject AWTEvent ComponentEvent TextEvent ItemEvent AdjustmentEvent ActionEvent WindowEvent InputEvent MouseEventKeyEvent MouseWheelEvent FocusEvent PaintEvent ContainerEvent

14 Event Handling Model Three parts –Event _________________ GUI component with which user interacts –Event object Encapsulates _____________________ that occurred –Event listener ___________ event object when notified, then _______ Programmer must perform two tasks –______________ event listener for event source –Implement event-handling method (event handler)

15 Event Listener Object When a GUI program is running, each action of the user generates an event The following are some types of events: –_____________ the mouse –Clicking the mouse on a _______________ –________________ into a text area For a program to respond to an event there must be an _______________________ in the GUI program that listens to that type of event

16 What is an Event Listener? An event listener is an. –It "listens" for events from a specific GUI component (itself an object) When an event is generated by the GUI component –A method in the ______________ object is invoked to respond to the event

17 What If …? When there is no event listener for an event –A program can _________________ events –If there is no listener for an event, the event is just ignored When a tree falls in the forest and there's no one present to hear it, does it make a sound?

18 Event- listener Interfaces Of Package java.awt. event interface EventListener interface ActionListener interface AdjustmentListener interface ComponentListener interface ContainerListener interface FocusListener interface ItemListener interface KeyListener interface MouseListener interface MouseMotionListener interface TextListener interface WindowListener «interface» EventListener «interface» ActionListener «interface» AdjustmentListener «interface» ComponentListener «interface» ContainerListener «interface» FocusListener «interface» ItemListener «interface» KeyListener «interface» MouseListener «interface» MouseMotionListener «interface» TextListener

19 Textfields JTextField –___________________ area in which user can enter text J________________Field –Extends JTextField –________________ characters that user enters View Figure 13.7Figure 13.7 –Illustrates capabilities of textfields

20 How Event Handling Works You must ______________ the event handler –Through component’s method addActionListener 39 textField1.addActionListener( handler ); 40 textField2.addActionListener( handler ); 41 textField3.addActionListener( handler ); 42 passwordField.addActionListener( handler );

21 How Event Handling Works The component knows to call actionPerformed because … –______________________________ only to listeners of appropriate type –Each event type has corresponding event- listener ____________________ Event __________ specifies event type that occurred

22 Event Registration for JTextField textField1 textField1 listenerList... handler This reference is created by the statement textField1.addActionListener( handler ); public void actionPerformed( ActionEvent event ) { // event handled here } JTextField object TextFieldHandler object

23 JButton Button –Component user _________________ to trigger a specific action –Several different types Command buttons __________ boxes Toggle buttons _______________ buttons –javax.swing.AbstractButton subclasses Command buttons are created with class _________ Generate _____________ when user clicks button

24 Swing Button Hierarchy JComponent AbstractButton JToggleButton JRadioButtonJCheckBox JButton JComponent AbstractButton JButton JToggleButton JCheckBoxJRadioButton

25 JButton Example View Figure 13.10, Button Test.javaFigure Look for –________________ of the buttons –_______________ ButtonHandler which does event handling for the button –Call to. addActionListener(handler) method _____________ buttons to receive events –The actionPerformed() method

26 Comments on JButton To detect when user clicks button –Program must have an object that implements __________________ interface Program must register object as an _______________ on the button (the event source) –Using the addActionListener method When user clicks the button, it fires an ____________. –Results in the invocation of the action listener's actionPerformed method –The only method in the ActionListener interface

27 The paint Method Revisited A Swing GUI needs to paint itself –The __________________ –In response to becoming unhidden –Because it needs to _______________________ in the program's state Starts with the highest component that needs to be repainted –Works its way down the containment hierarchy. Sun tutorial on the paint methodSun tutorial – draw.html

28 An Example of Painting View SwingApplication.javaSwingApplication.java Containment hierarchy

29 An Example of Painting When the GUI for SwingApplication is painted … Top-level container, _______________, paints itself. _______________ first paints its background It then tells the JPanel to paint itself. –Content pane's background rectangle doesn't actually appear in the finished GUI because the content pane is completely obscured by the JPanel. –The JPanel first paints its background, –Next, it paints its ___________________. –Finally, the panel asks its _______________ to paint themselves. To paint itself, ___________________ paints its background rectangle if necessary –It then paints the text that it contains. To paint itself, the JLabel paints its _______________.

30 JCheckBox and JRadioButton State buttons –On/Off or true/false values Java provides three types – – – View Figure which demonstrates the JCheckBox featureFigure 13.11

31 Things to Note Declaration of JCheckBox ___________ Instantiation of JCheckBox _________ _______ JCheckBox's to receive events from CheckBoxHandler CheckBoxHandler invokes method itemStateChanges Change JTextField font, depending on which JCheckBox was selected

32 Demonstration of JRadioButton When viewing Figure 13.12, look for the followingFigure –Declaration of JRadioButton references –____________ specification –Instantiation of JRadioButton objects –Registration of JRadioButton 's to receive events –RadioButtonHandler invokes method ___________________

33 JComboBox –_________________ from which user can select –Also called a drop-down list Note features in Figure 13.13Figure Instantiate JComboBox to show three Strings from names array at a time Register JComboBox to _________________ ItemListener invokes method itemStateChanged

34 JList A ______________ is a series of items –User can select one _____________ items –Single-selection vs. multiple-selection JList demonstration, Figure 13.14Figure –Note use of ColorNames array to populate JList –Specification of SINGLE_SELECTION –Registration of _______________ to receive events –ListSelectionListener invokes method valueChanged –Background set according to user choice

35 Multiple-Selection Lists Multiple-selection list capabilities –Select many items from Jlist –Allows ________________ selection Look for the following in Figure 13.15Figure –Use of ColorNames array –Specification of MULTIPLE_INTERVAL_SELECTION option –Use of JButton and JListCopyList method

36 Mouse Event Handling Event-listener interfaces for mouse events –MouseListener –MouseMotionListener –___________ for MouseEvents In Figure note use of…Figure –Register JFrame to receive ____________ –Methods invoked for various mouse events

37 Listener Interfaces Most listener interfaces contain __________________________________ For example, the MouseListener interface contains five methods: –mousePressed –mouseReleased –mouseEntered –mouseExited –mouseClicked

38 Listener Interfaces Suppose your class directly implements MouseListener, –Then you must ______________________ MouseListener methods. –Even if you care only about mouse clicks Methods for those events you don't care about can have ______________. –Resulting collection of empty method bodies can make code harder to read and maintain

39 Adapter Classes Solution is to use ________________ classes For example, the MouseAdapter class implements the MouseListener interface. An adapter class __________________________ of all its interface's methods. To use an adapter –Create a ___________________ of it, instead of directly implementing a listener interface. –By extending MouseAdapter, your class ___________ empty definitions of all five of the methods that MouseListener contains.

40 Adapter Classes Characteristics of an adapter class –Implements interface –Provides __________________ of each interface method –Used when all methods in interface __________

41 Adapter Classes Example of use of an adapter class –Figure 13.19, the Painter programFigure Note –Registration of MouseMotionListener to listen for window’s mouse-motion events –_______________ method mouseDragged, but not method mouseMoved –Store _____________ where mouse was dragged, then ____________ JFrame

42 Extending MouseAdapter The MouseDetails.java program, Figure Figure Demonstrates –How to determine the ________________________________ –How to distinguish between _____________________

43 ______________ Methods Help distinguish among –left-, –center- and –right-mouse-button clicks

44 Key Event Handling Interface KeyListener Handles __________________ –Generated when keys on keyboard are pressed and released KeyEvent –Contains _________________ that represents key Demonstrated in Figure 13.22Figure 13.22

45 Layout Managers Layout manager capabilities –Provided for ____________ GUI components –Provide basic layout capabilities –Processes layout details –Programmer can concentrate on basic “look and feel” –Interface __________________

46 Layout Managers Layout manager methods

47 FlowLayout Most basic layout manager GUI components placed in container from ______________________ Example program, Figure 13.24Figure –Layout set as FlowLayout –Note results as user presses button

48 ___________Layout Arranges components into five regions –NORTH (top of container) –SOUTH (bottom of container) –EAST (left of container) –WEST (right of container) –CENTER (___________ of container) View example, Figure 13.25Figure 13.25

49 GridLayout Divides container into grid of specified _____________________ Components are added starting at ______________________ cell –Proceed left-to-fight until row is full GridLayout demonstration, Figure 13.26Figure –Clicking buttons toggles between different layouts

50 Panels Helps ______________ components Class JPanel is JComponent subclass May have components (and other panels) added to them Panel example, Figure 13.27Figure 13.27

51 Combining Components and Graphics View SmileyFace.javaSmileyFace.java Note use of Canvas1 which extends _____________ –This is where the ______________ takes place –The response to the Change button is to call the ______________ method for the canvas object Note creation of Panel object p in constructor –That is where the ___________ are placed –The panel is added to the "South" area

52 Applying Concepts Suppose you wish to have a GUI which accomplishes the following –Enter _________ in text boxes –Press button to do ___________

53 Step By Step View code to create the windowcreate the window Note –Class (program) extends ______________ –Constructor sets up window using methods inherited from JFrame –Method main()_____________ class object

54 Add the Text Labels View additional codeadditional code Note –Declaration, ______________ of JLabels –Container reference, pane Gets ________________ for contentPane –pane layout specified –JLabels added

55 Add the Text Boxes View next iteration of code for adding the JTextFieldsnext iteration Note –Declaration, instantiation of JTextFields –Change grid layout of pane for 2 columns –Adding to pane

56 Final Version View final code versionfinal code Note –________________, instantiation of buttons –Declaration, ____________________, instantiation of action handlers Different author, does not use _____________________ classes –Add action handlers to the buttons _________________ never actually calls the action handlers

57 Implement an Event Handler Every event handler requires three bits of code: 1.Code that specifies that the class either a)__________________ a listener interface or b)_________________ that implements a listener interface. For example: public class MyClass implements ActionListener {… 2.Code that registers an instance of the event handler class as a ___________________ upon one or more components. For example: someComponent.addActionListener(instanceOfMyClass); 3.Code that implements the ________________________________ For example: public void actionPerformed(ActionEvent e) {...//code that reacts to the action... }