COMPSCI 125 Spring 2005 ©TheMcGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 7 : Event-Driven Programming and GUI Objects.

Slides:



Advertisements
Similar presentations
Introduction to Java Classes, events, GUI’s. Understand: How to use TextPad How to define a class or object How to create a GUI interface How event-driven.
Advertisements

Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Slides prepared by Rose Williams, Binghamton University Chapter 17 Swing I.
Event Handling Events and Listeners Timers and Animation.
©TheMcGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 7 Event-Driven Programming and Basic GUI Objects.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Chapter 7 Event-Driven Programming and Basic GUI Objects.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 14 GUI and Event-Driven Programming.
Scott Grissom, copyright 2006Ch 11: GUI Slide 1 Graphical User Interfaces (Ch 11) Careful design of a graphical user interface is key to a viable software.
GUI and Event-Driven Programming Part 2. Event Handling An action involving a GUI object, such as clicking a button, is called an event. The mechanism.
GUI and event-driven programming An introduction.
1 Class 8. 2 Chapter Objectives Use Swing components to build the GUI for a Swing program Implement an ActionListener to handle events Add interface components.
Chapter 6: Graphical User Interface (GUI) and Object-Oriented Design (OOD) J ava P rogramming: Program Design Including Data Structures Program Design.
CC1007NI: Further Programming Week 5 Dhruba Sen Module Leader (Islington College)
A.k.a. GUI’s.  If you want to discuss your Lab 2 grade come see me this week. ◦ Office: 436 ERB. One hour prior to class ◦ Open to Appointments MWF 
Java Programming Chapter 10 Graphical User Interfaces.
Java Programming, 3e Concepts and Techniques Chapter 3 Section 65 – Manipulating Data Using Methods – Java Applet.
1 Event Driven Programming wirh Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Java Programming: From Problem Analysis to Program Design, Second Edition1  Learn about basic GUI components.  Explore how the GUI components JFrame,
1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
Introduction to GUI in Java 1. Graphical User Interface Java is equipped with many powerful,easy to use GUI component such as input and output dialog.
Graphical User Interface in Java
Slides prepared by Rose Williams, Binghamton University ICS201 Lecture 13 : Swing I King Fahd University of Petroleum & Minerals College of Computer Science.
Ch 3-4: GUI Basics Java Software Solutions Foundations of Program Design Sixth Edition by Lewis & Loftus Coming up: GUI Components.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -1 Lecture 3 - Graphical User Interfaces r GUI toolkits in Java API r JFrame r GUI components.
Graphical User Interfaces (Part 2) 1. View  view  presents the user with a sensory (visual, audio, haptic) representation of the model state  a user.
Applets and Frames. Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L14: GUI Slide 2 Applets Usually.
Object-Oriented Program Development Using Java: A Class-Centered Approach, Enhanced Edition.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved Chapter 15 Creating User.
CS-1020 Dr. Mark L. Hornick 1 Event-Driven Programming.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
DCS2133 Object Oriented Programming Graphical User Interface & Event-Driven Programming.
Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif.
Java Programming: From Problem Analysis to Program Design, 3e Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7-2 ( Book Chapter 14) GUI and Event-Driven Programming.
Java Programming: From Problem Analysis to Program Design, Second Edition1 Lecture 5 Objectives  Learn about basic GUI components.  Explore how the GUI.
Creating a Window. A basic window in Java is represented by an object of the class Window in the package java.awt.
1 Event Driven Programs with a Graphical User Interface Rick Mercer.
Chapter 14: Introduction to Swing Components. Objectives Understand Swing components Use the JFrame class Use the JLabel class Use a layout manager Extend.
Computer Science [3] Java Programming II - Laboratory Course Lab 4 -1 : Introduction to Graphical user interface GUI Components Faculty of Engineering.
JAVA: An Introduction to Problem Solving & Programming, 6 th Ed. By Walter Savitch ISBN © 2012 Pearson Education, Inc., Upper Saddle River,
1 Event Driven Programs Rick Mercer. 2 So what happens next?  You can layout a real pretty GUI  You can click on buttons, enter text into a text field,
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Lesson 28: More on the GUI button, frame and actions.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Introduction to GUI in 1 Graphical User Interface 3 Nouf Almunyif.
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
Java Programming Fifth Edition Chapter 13 Introduction to Swing Components.
GUIs & Event-Driven Programming Chapter 11 Review.
SE-1020 Dr. Mark L. Hornick 1 Creating Graphical User Interfaces.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7 ( Book Chapter 14) GUI and Event-Driven Programming.
©TheMcGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 7 Event-Driven Programming and Basic GUI Objects.
CSC 205 Programming II Lecture 5 AWT - I.
Chapter 8 Event Handling.
A First Look at GUI Applications
Graphical User Interface (pronounced "gooey")
Java Programming: From Problem Analysis to Program Design,
Ellen Walker Hiram College
Chapter 7-2 (Book Chapter 14)
Chapter 7 (Book Chapter 14)
Chapter 7-2 (Book Chapter 14)
GUI and Event-Driven Programming
Graphical User Interface
Presentation transcript:

COMPSCI 125 Spring 2005 ©TheMcGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 7 : Event-Driven Programming and GUI Objects *Graphical User Interfaces *Inheritance *GUI components *Interfaces *Events and Listeners

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Introduction *This chapter covers the graphical user interface (GUI). In Java, GUI-based programs are implemented by using classes from the javax.swing and java.awt packages. *The Swing classes provide greater compatibility across different operating systems. They are fully implemented in Java, and behave the same on different operating systems.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. GUI Components *The javax.swing package contains a number of GUI components. JFrame JMenu JLabel JButton JTextField ImageIcon JTextArea

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Sample GUI Program

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. GUI Classes *AWT classes are implemented by using the native GUI objects. *Swing classes support many new functionalities not supported by AWT counterparts. *Do not mix the counterparts in the same program because of their differences in implementation.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Event-Driven Programs *To build an effective GUI using objects from the Swing and AWT packages, we must learn a new style of program control called event-driven programming. *An event occurs when the user interacts with a GUI object. *In event-driven programs, we program objects to respond to these events by defining event-handling methods.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Inheritance *As we know from Chapter 1, inheritance is a feature we use to define a more specialized class from an existing class. *The existing class is the superclass and the specialized class is the subclass.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Inheritance hierarchy of JOptionPane *From the API documentation. java.lang.Object - java.awt.Component - java.awt.Container - javax.swing.JComponent - javax.swing.JOptionPane

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Creating a Subclass of JFrame *To create a customized user interface, we often define a subclass of the JFrame class. *The JFrame class contains rudimentary functionalities to support features found in any frame window. *We need to add the behavior that is specific to our application.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Default JFrame Window *A default JFrame window appears at the top left corner of the screen. *You may not notice this because it is so small. *It looks different on computers running different operating systems

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Creating a Subclass of JFrame *To define a subclass of another class, we declare the subclass with the reserved word extends. class Ch7JFrameSubclass1 extends JFrame {... }

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Creating a Subclass of JFrame *We will also add the following default characteristics: The title is set to My First Subclass. The program terminates when the close box is clicked. The size of the frame is 300 pixels wide by 200 pixels high. The frame is positioned at screen coordinate (150, 250). *These properties are set inside the default constructor.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Size and Location of a JFrame *How an instance of Ch7JFrameSubclass1 will appear on the screen.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Inherited Methods *Every method of a superclass is inherited by its subclass. *Because the subclass-superclass relationships are formed into an inheritance hierarchy, a subclass inherits all methods defined in its ancestor classes.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Another Subclass of JFrame *Next we will define another subclass called Ch7JFrameSubclass2, which will have a white background. *We will define this class as an instantiable main class so we don’t have to define a separate main class.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Using the Content Pane *To make the background white, we must access the frame’s content pane, the area of the frame excluding the title and menu bars and the border. *We access the content pane by calling the frame’s getContentPane method. We change the background color by calling the content pane’s setBackground method.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Ch7JFrameSubclass2

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Using Buttons in a JFrame *There are two approaches to placing GUI objects on a frame’s content pane. 1. One approach uses a layout manager, an object that controls the placement of the GUI objects. 2. The other approach uses absolute positioning to explicitly specify the position and size of GUI objects on the content pane.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Absolute Positioning of Components *To use absolute positioning, set the layout manager of a frame’s content pane to none by passing null to the setLayout method. contentPane.setLayout(null); *Set the size and position of a button by calling the button’s setBounds method: okButton.setBounds( 75, 125, 80, 30); The first two arguments specify the button’s position. The last two arguments specify the width and height of the button. *To make a button appear on the frame, add it to the content pane by calling the add method. contentPane.add(okButton);

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Button Placement

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Handling Button Events *An action involving a GUI object, such as clicking a button, is called an event. *The mechanism to process events is called event handling. *The event-handling model of Java is based on the concept known as the delegation-based event model. *With this model, event handling is implemented by two types of objects: event source objects event listener objects.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Event Handling in Java

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Event Sources and Listeners *An event source object is a GUI object where an event occurs. An event source generates events. *An event listener object is an object that includes a method that gets executed in response to the generated events. When an event is generated, the system notifies the relevant event listener objects.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Events *There are many different kinds of events, but the most common one is an action event. *For the generated events to be processed, we must associate, or register, event listeners to the event sources. *If event sources have no registered listeners, the events they generate are ignored.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Listener Classes *An object that can be registered as an action listener must be an instance of a class that is declared specifically for the purpose. We call such classes action listener classes. *To associate an action listener to an action event source, we call the event source’s addActionListener method with the action listener as its argument.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Listeners and Event Sources *A single listener can be associated to multiple event sources. *Likewise, multiple listeners can be associated to a single event source.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Event Handling *When an event source generates an event, the system checks for matching registered listeners. If there is no matching listener, the event is ignored. If there is a matching listener, the system notifies the listener by calling the appropriate method in the listener. *In the case of action events, the method called is actionPerformed. *How does the system know it can call this method for any listener class?

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Interfaces *Like a class, an interface is a reference data type, but unlike a class, an interface includes only constants and abstract methods. An abstract method has only the method header, or prototype; it has no method body. *An interface cannot be instantiated. *You use an interface by writing a class that implements an interface.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Implementing Interfaces *A class that implements a Java interface must provide the method body for all the abstract methods defined in the interface. *By requiring an object we pass as an argument to the addActionListener method to be an instance of a class that implements the ActionListener interface, the system ensures that this object will include the necessary actionPerformed method. We use ActionListener as a parameter type in the addActionListener method An object from any class that implements ActionListener can be used as an argument.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. ActionListener Classes *ActionListener is an interface, not a class. *To ensure that the programmer includes the necessary actionPerformed method in an action listener class, the class must implement the ActionListener interface. import java.awt.event.*; class ButtonHandler implements ActionListener {... } *In the actionPerformed method, we need to define what should happen when an event occurs.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. The actionPerformed method *To change the title of the frame, depending on which button is clicked, we use the actionPerformed method. The method model is: public void actionPerformed(ActionEvent evt){ String buttonText = get the text of the event source; JFrame frame = the frame that contains this event source; frame.setTitle("You clicked " + buttonText); }

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Finding the Source of an Event *We can get the text from the event source using the getActionCommand method of the action event object evt: String buttonText = evt.getActionCommand(); *We can get a reference to the event source itself using the getSource method of the action event object evt.: JButton clickedButton = (JButton) evt.getSource(); String buttonText = clickedButton.getText(); Note that the object returned by the getSource method may be an instance of any Component class, so we type cast the returned object to a proper class in order to use the desired method.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Identifying the Frame *To find the frame that contains the event source, we get the root pane to which the event source belongs, then get the frame that contains this root pane. JRootPane rootPane = clickedButton.getRootPane(); Frame frame = (JFrame) rootPane.getParent();

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Chapter7JButtonFrame *A sample window when it is first opened * after the OK button is clicked *after the CANCEL button is clicked.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Frames as Listeners *A frame window contains nested layers of panes. The topmost pane is called the root pane. *The frame can be the event listener for the GUI objects it contains. cancelButton.addActionListener(this); okButton.addActionListener(this); The Frame can call its setTitle method directly. *The frame class must implement ActionListener

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. GUI Classes for Text *The Swing GUI classes JLabel, JTextField, and JTextArea all deal with text. A JLabel object displays uneditable (by the user) text. A JTextField object allows the user to enter a single line of text. A JTextArea object allows the user to enter multiple lines of text. It can also be used for displaying multiple lines of uneditable text.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. JTextField Class *An instance of JTextField generates action events when the object is active and the user presses the ENTER key. *The actionPerformed method must determine which of the three event sources in our example (two buttons and one text field) generated the event.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. What class does an Object Come From? *The instanceof operator determines the class to which the event source belongs. The general model is thus: if (event.getSource() instanceof JButton ){ //event source is either cancelButton //or okButton... } else { //event source must be inputLine... }

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. JTextField *The getText method of JTextField may be used to retrieve the text that the user entered. public void actionPerformed(ActionEvent event){ if (event.getSource() instanceof JButton){ JButton clickedButton = (JButton) event.getSource(); String buttonText = clickedButton.getText(); setTitle("You clicked " + buttonText); } else {//the event source is inputLine setTitle("You entered ‘" + inputLine.getText() + "’"); }

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. JLabel *A JLabel object is useful for displaying a label indicating the purpose of another object, such as a JTextField object. prompt = new JLabel("Please enter your name");

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Images in JLabel Objects *JLabel objects may also be used to display images. They can display text, image or both *To create a JLabel with an image instead of text, we pass an ImageIcon object instead of a string. *To create the ImageIcon object, we must specify the filename of the image.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. JLabel *We declare the data member private JLabel image; *then create it in the constructor as public Ch7TextFrame2{... image = new JLabel(new ImageIcon("cat.gif"); //note that this assumes the.gif is //in the same directory as the program image.setBounds(10, 20, 50, 50); contentPane.add(image);... }

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Ch7TextFrame2 *A window with one text JLabel, one image JLabel, one JTextField, and two JButton objects.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. JTextArea *Next we will declare a JTextArea object: private JTextArea textArea; *and add statements to create it textArea = new JTextArea(); textArea.setBounds(50, 5, 200, 135); textArea.setBorder(BorderFactory.createLineBorder(Color.red)); textArea.setEditable(false); contentPane.add(textArea);

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Putting Borders on Components by default the rectangle indicating the boundary of the JTextArea object is not shown on the screen. *We call the createLineBorder method of the BorderFactory class, because *We disable editing of the text area in the statement textArea.setEditable(false);

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Modifying Text in a JTextArea *The append method allows us to add text to the text area without replacing old content. *Using the setText method of JTextArea will replace old content with new content. *See Ch7TextFrame3

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Scroll Bars *To add scroll bars to the JTextArea object, we amend the earlier code as follows: textArea = new JTextArea(); textArea.setEditable(false); JScrollPane scrollText = new JScrollPane(textArea); textArea.setBounds(50, 5, 200, 135); textArea.setBorder(BorderFactory.createLin e Border(Color.red)); contentPane.add(scrollText); *See TextFrame4

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Menus *The javax.swing package contains three useful menu-related classes 1.JMenuBar is a bar where the menus are placed. 2.JMenu (such as File or Edit) is a single item in the MenuBar. 3.JMenuItem (such as Copy, Cut, or Paste) is an individual menu choice in the Menu.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Using Menus *When a MenuItem is selected, it generates a menu action event. *We process menu selections by registering an action listener to menu items.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. How to Implement Menus 1.Create a JMenuBar object and attach it to a frame. 2.Create a JMenu object. 3.Create JMenuItem objects and add them to the JMenu object. 4.Attach the JMenu object to the JMenuBar object.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Creating a Menu *We create a fileMenu object as fileMenu = new Menu("File"); The argument to the Menu constructor is the name of the menu. Menu items appear from the top in the order in which they were added to the menu.

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Creating MenuItems *To create and add a menu item New to fileMenu, we execute item = new JMenuItem("New"); item.addActionListener(this); fileMenu.add(item); *And to add a horizontal line as a separator between menu items, we execute fileMenu.addSeparator();

COMPSCI 125 Spring 2005 ©The McGraw-Hill Companies,Inc. Permission required for reproduction or display. Creating the Menu Bar *We create a JMenuBar object JMenuBar menuBar = new JMenuBar(); *Then call the frame’s setMenuBar method to attach it to the frame setMenuBar(menuBar); *Then add the two JMenu objects to the menu bar. menuBar.add(fileMenu); menuBar.add(editMenu);