95-712 Object Oriented Programming Java 1 GUI example taken from “Computing Concepts with Java 2” by Cay Horstmann GUI Programming.

Slides:



Advertisements
Similar presentations
Basic Java – Interface design. Understand: How to use TextPad for Java How to define classes and objects How to create a GUI interface How event-driven.
Advertisements

Multithreading : animation. slide 5.2 Animation Animation shows different objects moving or changing as time progresses. Thread programming is useful.
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.
Financial Engineering Project Course. Week 7 Java GUI programming and Java Threads GUI example taken from “Computing Concepts with Java 2” by Cay Horstmann.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Event Handling Events and Listeners Timers and Animation.
Gui Interfaces a la Swing Up to speed with Swing by Steven Gutz is a good source It don’t mean a thing if it ain’t got that swing Duke Ellington.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Carnegie Mellon University, MISM1 Java GUI programming and Java Threads GUI example taken from “Computing Concepts with Java 2” by Cay Horstmann Thread.
Unit 111 Java GUI Components and Events  Learning Outcomes oDistinguish between GUI components and containers. oIdentify and distinguish top-level containers.
Lecture 19 Graphics User Interfaces (GUIs)
1 lecture 12Lecture 13 Event Handling (cont.) Overview  Handling Window Events.  Event Adapters Revisited.  Introduction to Components and Containers.
Unit 11 Object-oriented programming: Graphical user interface Jin Sa.
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.
1 Event Driven Programming wirh Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Object-Oriented Programming (Java), Unit 19 Kirk Scott 1.
Java Programming: From Problem Analysis to Program Design, Second Edition1  Learn about basic GUI components.  Explore how the GUI components JFrame,
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 20.1 Test-Driving the Screen Saver Application.
Layout Management Containers can arrange their components. Our container is a JPanel, and it can set the way it’s components will be laid out : mypanel.setLayout.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
Graphical User Interface CSI 1101 N. El Kadri. Plan - agenda Graphical components Model-View-Controller Observer/Observable.
עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling.
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,
Adding Graphics to a Frame Application Applets: Can generate drawings by overriding paint Frame: Do not draw directly on a frame. Draw graphics on a JPanel.
Copyright © 2002, Systems and Computer Engineering, Carleton University Gui1.ppt * Object-Oriented Software Development Part 18 Building.
Object-Oriented Programming (Java), Unit 19 Kirk Scott 1.
1 Object-Oriented Programming (Java), Unit 17 Kirk Scott.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Object-Oriented Programming (Java), Unit 18 Kirk Scott 1.
Swing GUI Components You can create graphics components to place on your applet using classes available in the Swing package ( javax.swing ) Class names.
Swing Differences between Swing and AWT Naming Conventions All Swing components begin with a capital J -- JPanel, JButton, JScrollBar, JApplet, etc..
MT311 Java Application Development and Programming Languages Li Tak Sing ( 李德成 )
Event Driven Programming. Event-driven Programming In the early days of computing communication with the outside world was accomplished using a technique.
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.
Introduction to GUI Programming with Java Graphical User Interfaces With AWT and Swing Towson University *Ref:
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 21.1 Test-Driving the Painter Application.
Creating a GUI with JFC/Swing. What are the JFC and Swing? JFC –Java Foundation Classes –a group of features to help people build graphical user interfaces.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
CS 4244: Internet Programming User Interface Programming in Java 1.0.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
Chapter 12Java: an Introduction to Computer Science & Programming - Walter Savitch 1 Chapter 12 l Event-Driven Programming and GUIs l Swing Basics and.
Ch13 Creating windows and applets. Short overview AWT (Abstract Windowing Toolkit) Early Java development used graphic classesEarly Java development used.
©2000, John Wiley & Sons, Inc. Horstmann/Java Essentials, 2/e Chapter 10: Event Handling 1 Event Handling.
Java Programming: From Problem Analysis to Program Design, Second Edition1 Lecture 5 Objectives  Learn about basic GUI components.  Explore how the GUI.
CIS Intro to JAVA Lecture Notes Set 8 9-June-05.
©2000, John Wiley & Sons, Inc. Horstmann/Java Essentials, 2/e Chapter 10: Event Handling 1 Chapter 10 Event Handling.
Basics of GUI Programming Chapter 11 and Chapter 22.
Java Swing One of the most important features of Java is its ability to draw graphics.
1 Event Driven Programs with a Graphical User Interface Rick Mercer.
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.
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.
EE2E1. JAVA Programming Lecture 5 Graphics programming and Swing.
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
Event Driven (Asynchronous) Programming. Event handling in Unity Subclass a class that contains event handling methods, and then override those methods.
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.
GUIs and Events Rick Mercer.
Java Applet What is a Java Applet? How is applet compiled?
A First Look at GUI Applications
GUI AND GRAPHICS.
Ellen Walker Hiram College
Constructors, GUI’s(Using Swing) and ActionListner
Lecture 4: Standard Java Graphics
Presentation transcript:

Object Oriented Programming Java 1 GUI example taken from “Computing Concepts with Java 2” by Cay Horstmann GUI Programming

Object Oriented Programming Java 2 Frame Windows A Frame window has a border and a title bar A Frame window has an addWindowListener method. We can use this method to add listeners to our frame window.

Object Oriented Programming Java 3 An example import javax.swing.*; import java.awt.event.*; public class InternetFrameExample { public static void main(String[] args) { JFrame f = new InternetFrame("Example"); f.setTitle("Internet browser"); f.show(); } javax means Java standard extension Tell the window manager to display the frame.

Object Oriented Programming Java 4 class InternetFrame extends JFrame { public InternetFrame(String s){ setSize(300,300); WindowCloser listener = new WindowCloser(); addWindowListener(listener); } private class WindowCloser extends WindowAdapter { public void windowClosing(WindowEvent e) { System.exit(0); } windowOpened() widowClosed() windowClosing() : Add the handler

Object Oriented Programming Java 5

6 Adding User Interface Components to a Frame Do not draw directly on the surface of a frame. Frames have been designed to arrange user interface components. User interface components are such things as buttons, menus, scroll bars, and so on. If you want to draw on a frame, draw on a separate component and then add that component to the frame. The Swing UI toolkit provides the Jpanel class for this purpose.

Object Oriented Programming Java 7 Drawing on a JPanel To draw on a Jpanel you override the paintComponent method. Make sure that from within your paintComponent method you call super.paintComponent(…) so that the superclass method paintComponent has a chance to erase the existing contents, redraw the borders and decorations, etc.

Object Oriented Programming Java 8 Adding the Panel to the JFrame The surface of a Swing frame is covered with four panes. Each of these four has a purpose. We are interested in getting access to the JFrame’s content pane. So, call the getContentPane on the JFrame. This call returns a Container object. Add your Panel object to the content pane Container.

Object Oriented Programming Java 9 Adding a Panel to a JFrame x = getContentPane (a contentPane holds components for display). x refers to a Container (may contain other components) c = a Panel or some other component. Add c to x using x’s layout manager (a content pane uses border layout) JFrame getContentPane()

Object Oriented Programming Java 10 Adding a JTextfield to the JFrame JFrame getContentPane() class MyFrame extends JFRAME { private JTextField textField; public MyFrame() { Container cp = getContentPane(); textField = new JTextField(); cp.add(textField, “South”); cp

Object Oriented Programming Java 11 We may want to add a listener to the TextField JFrame getContentPane() Class MyFrame extends JFRAME { private JTextField textField; public myFrame() { Container cp = getContentPane(); textField = new JTextField(); cp.add(textField, “South”); textField.addActionListener( new TextFieldListener()); cp

Object Oriented Programming Java 12 Output first! -- user enters number of eggs and we draw them

Object Oriented Programming Java 13 Strategy Think about What do we want on the screen? What events should we listen for? What should we do when those events occur? What processing will we do when user input arrives? What object has responsibilities for what activities? Think about The ‘has-a’ relationship,e.g., the Jframe’s ContentPane “has-a” Panel and a TextField. The ‘is-a’ relationship,e.g., The TextFieldListener ‘is-an’ actionListener.

Object Oriented Programming Java 14 // Example // Eggs.java import java.awt.Container; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; import java.awt.geom.Ellipse2D; import java.util.Random; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JTextField; We need classes from the awt, util, and swing packages.

Object Oriented Programming Java 15 public class Eggs { public static void main(String[] args) { EggFrame frame = new EggFrame(); frame.setTitle("Enter number of eggs"); frame.show(); } This thread is done after creating a frame and starting up the frame thread. A frame now exists and is running.

Object Oriented Programming Java 16 The EggFrame Constructor Set the size of the frame Add a listener to listen for the stop event Create a JPanel object to draw on and a JTextField object to interact with the user via the keyboard Add a listener for the JTextField Add the Jpanel and the JTextField to the contentPane container.

Object Oriented Programming Java 17 class EggFrame extends JFrame { private JTextField textField; private EggPanel panel; public EggFrame() { final int DEFAULT_FRAME_WIDTH = 300; final int DEFAULT_FRAME_HEIGHT = 300; setSize(DEFAULT_FRAME_WIDTH, DEFAULT_FRAME_HEIGHT); addWindowListener(new WindowCloser()); panel = new EggPanel(); textField = new JTextField(); textField.addActionListener(new TextFieldListener()); Container contentPane = getContentPane(); contentPane.add(panel, "Center"); contentPane.add(textField, "South"); } A listener for the jframe window A textField listener As before

Object Oriented Programming Java 18 The constructor will be called from our main thread. The other thread operates asynchronously. What do we mean by asynchronous execution? Who is running the show? Don’t programs run sequentially? We have to think differently. Event driven programming

Object Oriented Programming Java 19 The TextField The TextField object will call us when it detects an event. We don’t ‘read the input’. We set up a babysitter to respond. The TextField object sends us an event object.

Object Oriented Programming Java 20 // Use an inner class to listen on the text field private class TextFieldListener implements ActionListener { public void actionPerformed(ActionEvent event) { String input = textField.getText(); panel.setEggCount(Integer.parseInt(input)); textField.setText(""); } We do two things when we have a textfield event. 1)Get the data 2)Tell the panel the number of eggs to display

Object Oriented Programming Java 21 // Use an inner class to listen on the text field private class TextFieldListener implements ActionListener { public void actionPerformed(ActionEvent event) { String input = textField.getText(); panel.setEggCount(Integer.parseInt(input)); textField.setText(""); } Note how handy the inner class is. Both panel and textField are available. What if the listener were not an object of an inner class. how would it get access to these variables? We can’t just pass the variables on the call because we don’t make the call.

Object Oriented Programming Java 22 private class WindowCloser extends WindowAdapter { public void windowClosing(WindowEvent event) { System.exit(0); } This is how we respond when the close signal is received. system.exit(0) stops the java virtual machine. 0 means normal termination.

Object Oriented Programming Java 23 How about the panel object What are the panel object’s responsibilities? get input? _____ repaint itself? _____ keep track of the egg count? _____ hold the data it needs to repaint itself? _____ Do we want our panel to inherit properties and methods from any existing classes? _____

Object Oriented Programming Java 24 How about the panel object What are the panel object’s responsibilities? get input? No, that’s the TextField’s job. repaint itself? Sure, that’s its main job. keep track of the egg count? Yes, better here where it’s needed hold the data it needs to repaint itself? Yes Do we want our panel to inherit properties from any existing classes? Sure, we want to re-use existing code whenever possible.

Object Oriented Programming Java 25 How about the panel object When should the panel object repaint itself? What will the panel need to repaint itself? Who actually calls the paintComponent method?

Object Oriented Programming Java 26 How about the panel object When should the panel object repaint itself? When a new input arrives from the user. When the egg count changes. What will the panel need to repaint itself? A graphics objectto draw on. Who actually calls the paintComponent method? While we have to provide a paintComponent method we don’t call it directly. It’s called by the Java run-time environment after we make a call on repaint.

Object Oriented Programming Java 27 class EggPanel extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; // draw eggCount ellipses with random centers Random generator = new Random(); for (int i = 0; i < eggCount; i++) { double x = getWidth() * generator.nextDouble(); double y = getHeight() * generator.nextDouble(); Ellipse2D.Double egg = new Ellipse2D.Double(x, y, EGG_WIDTH, EGG_HEIGHT); g2.draw(egg); }

Object Oriented Programming Java 28 public void setEggCount(int count) { eggCount = count; repaint(); } private int eggCount; private static final double EGG_WIDTH = 30; private static final double EGG_HEIGHT = 50; }