©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 14 - 1 Chapter 7 ( Book Chapter 14) GUI and Event-Driven Programming.

Slides:



Advertisements
Similar presentations
Java Swing Recitation – 11/(20,21)/2008 CS 180 Department of Computer Science, Purdue University.
Advertisements

Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Java GUI Libraries Swing Programming. Swing Components Swing is a collection of libraries that contains primitive widgets or controls used for designing.
©TheMcGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 7 Event-Driven Programming and Basic GUI Objects.
COMPSCI 125 Spring 2005 ©TheMcGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 7 : Event-Driven Programming and 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.
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
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.
Java Programming Chapter 10 Graphical User Interfaces.
Chapter 13 Advanced GUIs and Graphics. Chapter Objectives Learn about applets Explore the class Graphics Learn about the class Font Explore the class.
1 Event Driven Programming wirh Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
Java Programming: From Problem Analysis to Program Design, Second Edition1  Learn about basic GUI components.  Explore how the GUI components JFrame,
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.
MIT AITI 2003 Lecture 17. Swing - Part II. The Java Event Model Up until now, we have focused on GUI's to present information (with one exception) Up.
GUI programming Graphical user interface-based programming.
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,
Graphical User Interface in Java
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
GUI Clients 1 Enterprise Applications CE00465-M Clients with Graphical User Interfaces.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
Even-Driven Programming and basic Graphical User Interface.
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.
GUI Basics. What is GUI? A graphical user interface (GUI) is a type of user interface item that allows people to interact with programs in more ways than.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 21.1 Test-Driving the Painter Application.
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.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7-2 ( Book Chapter 14) GUI and Event-Driven Programming.
Basics of GUI Programming Chapter 11 and Chapter 22.
Creating a Window. A basic window in Java is represented by an object of the class Window in the package java.awt.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 4 – Completing the Inventory Application.
Sadegh Aliakbary Sharif University of Technology Fall 2011.
1 Event Driven Programs with a Graphical User Interface Rick Mercer.
JAVA: An Introduction to Problem Solving & Programming, 6 th Ed. By Walter Savitch ISBN © 2012 Pearson Education, Inc., Upper Saddle River,
Event-Driven Programming F Procedural programming is executed in procedural order. F In event-driven programming, code is executed upon activation of events.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7-3 ( Book Chapter 14) GUI and Event-Driven Programming.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Swing GUI Components So far, we have written GUI applications which can ‘ draw ’. These applications are simple, yet typical of all Java GUI applications.
Lesson 28: More on the GUI button, frame and actions.
Graphical User Interface (GUI)
MIT AITI 2004 Swing Event Model Lecture 17. The Java Event Model In the last lecture, we learned how to construct a GUI to present information to the.
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
1 A Quick Java Swing Tutorial. 2 Introduction Swing – A set of GUI classes –Part of the Java's standard library –Much better than the previous library:
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 7.1 Test-Driving the Dental Payment Application.
Java Visual Applications CSIS 3701: Advanced Object Oriented Programming.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
©TheMcGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 7 Event-Driven Programming and Basic GUI Objects.
GUIs and Events Rick Mercer.
Chapter 8 Event Handling.
Introduction to Graphics
A First Look at GUI Applications
“Form Ever Follows Function” Louis Henri Sullivan
A Quick Java Swing Tutorial
Chapter 7-2 (Book Chapter 14)
Chapter 7 (Book Chapter 14)
A Quick Java Swing Tutorial
Advanced Programming in Java
Chapter 7-2 (Book Chapter 14)
GUI and Event-Driven Programming
Graphical User Interface
Presentation transcript:

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7 ( Book Chapter 14) GUI and Event-Driven Programming

Objectives After you have read and studied this chapter, you should be able to –Define a subclass of JFrame to implement a customized frame window. –Write event-driven programs using Java's delegation-based event model –Write GUI application programs using JButton, JLabel, ImageIcon, JTextField, and JTextArea. –Understand GUI application programs with menus –Understand GUI application programs that process mouse events

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Graphical User Interface 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.

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Sample GUI Objects Various GUI objects from the javax.swing package.

JOptionPane Using the JOptionPane class is a simple way to display the result of a computation to the user or receive an input from the user. We use the showMessageDialog class method for output. If we pass null as the first argument, the dialog appears on the center of the screen. If we pass a frame object as the first argument, the dialog is positioned at the center of the frame. ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter

Using JOptionPane for Output ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter import javax.swing.*;... JOptionPane.showMessageDialog( null, “I Love Java” ); import javax.swing.*;... JOptionPane.showMessageDialog( null, “I Love Java” );

Using JOptionPane for Output - 2 ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter import javax.swing.*;... JOptionPane.showMessageDialog( null, “one\ntwo\nthree” ); //place newline \n to display multiple lines of output import javax.swing.*;... JOptionPane.showMessageDialog( null, “one\ntwo\nthree” ); //place newline \n to display multiple lines of output

Using JOptionPane for Output - 3 import javax.swing.*; class Ch14ShowMessageDialog { public static void main(String[] args) { JFrame jFrame; jFrame = new JFrame( ); jFrame.setSize(400,300); jFrame.setVisible(true); JOptionPane.showMessageDialog(jFrame, "How are you?"); JOptionPane.showMessageDialog(null, "Good Bye"); jFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter

Using JOptionPane for Output - 3 ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter After Pressing OK or closing the “How are you?” dialog, the “Good Bye” dialog appears

JOptionPane for Input-1 ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter import javax.swing.*;... String inputstr = JOptionPane.showInputDialog( null, “What is your name?” ); import javax.swing.*;... String inputstr = JOptionPane.showInputDialog( null, “What is your name?” ); We use the showInputDialog class method for input. This method returns the input as a String value so we need to perform type conversion for input of other data types

JOptionPane for Input-2 ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter import javax.swing.*;... String inputstr = JOptionPane.showInputDialog( null, “Enter Age:” ); int age= Integer.parseInt(inputstr); import javax.swing.*;... String inputstr = JOptionPane.showInputDialog( null, “Enter Age:” ); int age= Integer.parseInt(inputstr);

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Subclassing JFrame To create a customized frame window, we define a subclass of the JFrame class. The JFrame class contains rudimentary functionalities to support features found in any frame window.

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Creating a Plain JFrame import javax.swing.*; class Ch7DefaultJFrame { public static void main( String[] args ) { JFrame defaultJFrame; defaultJFrame = new JFrame(); defaultJFrame.setVisible(true); }

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

Creating a Subclass of JFrame An instance of Ch14JFrameSubclass1 will have 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. Source File: Ch14JFrameSubclass1.java

Creating a Subclass of JFrame import javax.swing.*; class Ch14JFrameSubclass1 extends JFrame { private static final int FRAME_WIDTH = 300; private static final int FRAME_HEIGHT = 200; private static final int FRAME_X_ORIGIN = 150; private static final int FRAME_Y_ORIGIN = 250; public Ch14JFrameSubclass1( ) { //set the frame default properties setTitle ( "My First Subclass" ); setSize ( FRAME_WIDTH, FRAME_HEIGHT ); setLocation ( FRAME_X_ORIGIN, FRAME_Y_ORIGIN ); //register 'Exit upon closing' as a default close operation setDefaultCloseOperation( EXIT_ON_CLOSE ); } ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Displaying Ch14JFrameSubclass1 Here's how a Ch14JFrameSubclass1 frame window will appear on the screen.

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter The Content Pane of a Frame The content pane is where we put GUI objects such as buttons, labels, scroll bars, and others. We access the content pane by calling the frame’s getContentPane method. This gray area is the content pane of this frame.

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Changing the Background Color Here's how we can change the background color of a content pane to blue: Container contentPane = getContentPane(); contentPane.setBackground(Color.BLUE); Source File: Ch14JFrameSubclass2.java

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Placing GUI Objects on a Frame There are two ways to put GUI objects on the content pane of a frame: –Use a layout manager FlowLayout BorderLayout GridLayout –Use absolute positioning null layout manager

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Placing a Button-1 A JButton object a GUI component that represents a pushbutton. Here's an example of how we place a button with FlowLayout. FlowLayout places objects in the top-to-bottom, left-to right order. contentPane.setLayout( new FlowLayout()); okButton = new JButton("OK"); cancelButton = new JButton("CANCEL"); contentPane.add(okButton); contentPane.add(cancelButton);

Placing a Button-2 import javax.swing.*; import java.awt.*; class Ch14JButtonFrame extends JFrame { private static final int FRAME_WIDTH = 300; private static final int FRAME_HEIGHT = 200; private static final int FRAME_X_ORIGIN = 150; private static final int FRAME_Y_ORIGIN = 250; private JButton cancelButton; private JButton okButton; public static void main(String[] args) { Ch14JButtonFrame frame = new Ch14JButtonFrame(); frame.setVisible(true); } ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter

Placing a Button-3 public Ch14JButtonFrame() { Container contentPane = getContentPane( ); contentPane.setLayout(new FlowLayout()); setSize ( FRAME_WIDTH, FRAME_HEIGHT ); setResizable ( false ); setTitle ( "Program Ch14JButtonFrame" ); setLocation ( FRAME_X_ORIGIN, FRAME_Y_ORIGIN ); //create and place two buttons on the frame's content pane okButton = new JButton("OK"); contentPane.add(okButton); cancelButton = new JButton("CANCEL"); contentPane.add(cancelButton); //register 'Exit upon closing' as a default close operation setDefaultCloseOperation( EXIT_ON_CLOSE ); } } ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Event Handling An action involving a GUI object, such as clicking a button, is called an event. The mechanism to process events is called event handling. Event handling is implemented by two types of objects: –event source objects –event listener objects

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Event Source and Event Listeners Objects An event source is a GUI object where an event occurs. We say an event source generates events. Buttons, text boxes, list boxes, and menus are common event sources in GUI-based applications. An event listener object is an object that includes a method that gets executed in response to the generated events. A listener must be associated, or registered, to a source, so it can be notified when the source generates events.

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Connecting Source and Listener JButton Handler event source event listener notify register A listener must be registered to a event source. Once registered, it will get notified when the event source generates events.

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter There are different event types and event listeners Mouse events are handled by mouse listeners Item selection events are handled by Item listeners and so forth Among the different types of events, the action event is the most common. –Clicking on a button generates an action event –Selecting a menu item generates an action event –and so forth Action events are generated by action event sources and handled by action event listeners. Event Types

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Handling Action Events JButton Button Handler action event source action event listener actionPerformed addActionListener JButton button = new JButton("OK"); ButtonHandler handler = new ButtonHandler( ); button.addActionListener(handler); The class ButtonHandler is a user-defined event listener (event handler). It must implement the Interface ActionListener It must include the method actionPerformed The method actionPerformed includes the code we want to be executed in response to the generated events

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter ActionListener Interface When we call the addActionListener method of an event source, we must pass an instance of a class that implements the ActionListener interface. The ActionListener interface includes one method named actionPerformed. A class that implements the ActionListener interface must therefore provide the method body of actionPerformed. Since actionPerformed is the method that will be called when an action event is generated, this is the place where we put a code we want to be executed in response to the generated events.

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter The ButtonHandler Class

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Container as Event Listener Instead of defining a separate event listener such as ButtonHandler, it is much more common to have an object that contains the event sources be a listener. –Example: We make this frame a listener of the action events of the buttons it contains. event source event listener

©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Ch14JButtonFrameHandler... class Ch14JButtonFrameHandler extends JFrame implements ActionListener {... public void actionPerformed(ActionEvent event) { JButton clickedButton = (JButton) event.getSource(); String buttonText = clickedButton.getText(); setTitle("You clicked " + buttonText); }

Ch14JButtonFrameHandler (complete program-1) import javax.swing.*; import java.awt.*; import java.awt.event.*; class Ch14JButtonFrameHandler extends JFrame implements ActionListener { private static final int FRAME_WIDTH = 300; private static final int FRAME_HEIGHT = 200; private static final int FRAME_X_ORIGIN = 150; private static final int FRAME_Y_ORIGIN = 250; private JButton cancelButton; private JButton okButton; public static void main(String[] args) { Ch14JButtonFrameHandler frame = new Ch14JButtonFrameHandler(); frame.setVisible(true); } ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter

Ch14JButtonFrameHandler (complete program-2) public Ch14JButtonFrameHandler() { Container contentPane = getContentPane( ); setSize (FRAME_WIDTH, FRAME_HEIGHT); setResizable (false); setTitle ("Program Ch14JButtonFrameHandler"); setLocation (FRAME_X_ORIGIN, FRAME_Y_ORIGIN); contentPane.setLayout(new FlowLayout()); okButton = new JButton("OK"); contentPane.add(okButton); cancelButton = new JButton("CANCEL"); contentPane.add(cancelButton); //registering this frame as an action listener of the two buttons cancelButton.addActionListener(this); okButton.addActionListener(this); setDefaultCloseOperation( EXIT_ON_CLOSE ); } ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter

Ch14JButtonFrameHandler (complete program-3) public void actionPerformed(ActionEvent event) { JButton clickedButton = (JButton) event.getSource(); String buttonText = clickedButton.getText(); this.setTitle("You clicked " + buttonText); } } ©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter