1 Lecture 25 Listening to buttons and mice Quotes by Tony Hoare There are two ways of constructing a software design: (1) make it so simple that there.

Slides:



Advertisements
Similar presentations
Graphical User Interfaces CS 2110 Spring Ivan Sutherland: “Sketchpad”,
Advertisements

Fall 2007CS 225 Graphical User Interfaces Event Handling Appendix C.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
1 GUIs (Graphical User Interfaces) Purpose of these two lectures: Provide you with basics of writing GUI programs in Java, not an in-depth study. Readings.
CS/ENGRD 2110 FALL 2014 Lecture 15: Graphical User Interfaces (GUIs): Listening to events 1.
CPSC150 JavaLynn Lambert CPSC150 Week 12 InheritanceInterfaces.
1 Listening to events on GUIs Sec contains this material. Corresponding lectures on ProgramLive CD is a better way to learn the material. Top finalists.
Unit 11 Object-oriented programming: Graphical user interface Jin Sa.
CPSC150 Week 12 Graphical User Interfaces Chapter 11.
PROGRAMMING REVIEW Lab 2 EECS 448 Dr Fengjun Li and Meenakshi Mishra.
Chapter 8: Graphical User Interfaces Objectives - by the end of this chapter, you should be able to do the following: –write a simple graphical user interface.
Review Session for EXCEPTIONS & GUIS -David Gries 1 Adapted from Previous Review Slides.
CSE 219 Computer Science III Graphical User Interface.
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.
עקרונות תכנות מונחה עצמים תרגול 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,
GUI Components and Design Here we add one more component to our programs, JButtons –JButtons can only be inserted into JPanels (or JApplets) –Clicking.
CS Lecture 01 Frames and Components and events Lynda Thomas
GUI Chapter 10 Graphics context and objects Creating a window based application JFrame, JTextField, JButton Containers and Controls Graphics commands Layout.
Lesson 34: Layering Images with Java GUI. The FlowLayout RECAP.
Field Trip #19 Animations with Java By Keith Lynn.
1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers.
CS2110. GUIS: Listening to Events 1 Download the demo zip file from course website and look at the demos of GUI things: sliders, scroll bars, combobox.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Copyright © 2002, Systems and Computer Engineering, Carleton University c-Gui3.ppt * Object-Oriented Software Development Part 18-c Building.
MT311 Java Application Development and Programming Languages Li Tak Sing ( 李德成 )
MIT-AITI 2004 – Lecture 16 Introduction to Swing.
Lec.10 (Chapter 8 & 9) GUI Jiang (Jen) ZHENG June 27 th, 2005.
CS2110. GUIS: Listening to Events Also Example of Stepwise Refinement and Anonymous classes 1 Download the demo zip file from course website and look at.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
1 12 Apr 2011 GUIS: Graphical User Interfaces Their mouse had a mean time between failure of … a week … it would jam up irreparably, or... jam up on the.
1 GUIS: Graphical User Interfaces Their mouse had a mean time between failure of … a week … it would jam up irreparably, or... jam up on the table--...
Computer Science 209 GUIs Model/View/Controller Layouts.
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.
1 Listening to events on GUIs Sec contains this material. Corresponding lectures on ProgramLive CD is a better way to learn the material. Why men.
GUI Tutorial 2. What did we do last time?  Basic flow  instance variables, set up in ctor, close operation, size, visible  JFrame  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.
Graphical User Interface (GUI)
1 CS211 Lecture 24 GUIs (Graphical User Interfaces) Readings in Weiss: Appendix B does a good job of laying out the basics. Study it! ProgramLive has a.
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 12. Listening to events. Inner and anonymous classes Why men think “computer” should be a feminine word 1. No one but their creator understands their.
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:
GUI.1 Graphical User Interfaces GUIs. GUI.2 The Plan Components Flat Layouts Hierarchical Layouts Designing a GUI Coding a GUI.
Review Session for EXCEPTIONS & GUI -Ankur Agarwal 1.
A Quick Java Swing Tutorial
CS2110. GUIS: Listening to Events
GUIs and Events Rick Mercer.
Object-Orientated Analysis, Design and Programming
CS2110. GUIS: Listening to Events
8 April 2008 GUIS —Graphical User Interfaces
Graphical User Interface (pronounced "gooey")
A Quick Java Swing Tutorial
CS2110 Lecture 14. GUIS-Layout Spring 2016
Listening to events on GUIs
Ellen Walker Hiram College
CS2110. GUIS: Listening to Events
GUIS: Graphical User Interfaces
CS2110. GUIS: Listening to Events
CS2110. GUIS: Listening to Events
A Quick Java Swing Tutorial
Lecture 21. Listening to events on a GUI (and development of a loop)
CS2110. GUIS: Listening to Events
CiS 260: App Dev I Chapter 6: GUI and OOD.
12. Listening to events. Inner and anonymous classes
13 April 2010 GUIS: Graphical User Interfaces
Presentation transcript:

1 Lecture 25 Listening to buttons and mice Quotes by Tony Hoare There are two ways of constructing a software design: (1) make it so simple that there are obviously no deficiencies and (2) make it so complicated that there are no obvious deficiencies. Inside every large program is a small program trying to get out. The unavoidable price of reliability is simplicity. I was eventually persuaded of the need to design programming notations so as to maximize the number of errors that cannot be made, or if made, can be reliably detected at compile time. You cannot teach beginners top-down program- ming because they don't know which end is up.

2 Lecture 25 Listening to buttons and mice Reading material is the same as the previous lecture. The programs we demo today are on the website. Download them and experiment with them! Look at java.awt and javax.swing as examples of how one designs a large system of classes. This is not the only way to do GUIs. This is how Java does it.

3 Review of lecture 23: Lecture 24. We: (1) Looked at different components, like JButton, JPanel. (2) Saw three different layout managers: 1.FlowLayout 2.BorderLayout 3.BoxLayout They are used to lay out components as they are added to a container. (3) Saw how to add components to a container. End with pack() and show().

4 Basic Hierarachy of GUI classes A Component generally has a position and size, can be painted, can receive input events. Canvas: rectangular component with methods for painting it. Subclass it and override method paint() Component: abstract Container Window Frame JFrame JComponent JPanel JButton JCheckBox JComboBox JLabel JRadioBox JTextArea JTextField JFileChooser Canvas Dialog JDialog

5 Container: superclass of all Components that can hold other components. Components are generally added to a Container c: c.add(new JButton(“yes”)); c.add(new JButton(“no”), “north”); Basic top-level containers: JWindow: top-level window with no border JFrame: top-level window with border, menubar JDialog: top-level window used for a dialog JPanel, primary use: as a container of other components. Allows one to organize objects into a unit, often to simplify layouts. See this on the next slides. JPanel, secondary use: paint on it with graphics commands --lines, circles, text, etc. (instead of using class Canvas). Container WindowJComponent JPanelJFrameJDialog

6 Listening to a button public class ButtonDemo1 extends JFrame implements ActionListener { private JButton westButton= new JButton("west"); private JButton eastButton= new JButton("east"); /** Constructor: invisible frame: title t, 2 buttons */ public ButtonDemo1(String t) { super(t); Container cp= getContentPane(); cp.add(westButton,BorderLayout.WEST); cp.add(eastButton,BorderLayout.EAST); westButton.setEnabled(false); eastButton.setEnabled(true); westButton.addActionListener(this); eastButton.addActionListener(this); pack(); } public void actionPerformed(ActionEvent e) { boolean b= eastButton.isEnabled(); eastButton.setEnabled(!b); westButton.setEnabled(b); } 1. write procedure actionPerformed 2. implement ActionListener 3. Register this object with the button

7 public class ButtonDemo2 extends JFrame implements ActionListener { private JButton westButton= new JButton("west"); private JButton eastButton= new JButton("east"); /** Constructor: inv frame with title t, two buttons */ public ButtonDemo2(String t) { super(t); Container cp= getContentPane(); cp.add(westButton,BorderLayout.WEST); cp.add(eastButton,BorderLayout.EAST); westButton.setEnabled(false); eastButton.setEnabled(true); westButton.addActionListener(this); eastButton.addActionListener(new BeListener()); } public void actionPerformed(ActionEvent e) { boolean b= eastButton.isEnabled(); eastButton.setEnabled(!b); westButton.setEnabled(b); } private class BeListener implements ActionListener { public void actionPerformed(ActionEvent e) { boolean b= eastButton.isEnabled(); eastButton.setEnabled(!b); westButton.setEnabled(b); } listener for eastButton listener for westButton, in its own inner class different listeners for different buttons

8 Processing mouse clicks /** A red or green square, possibly with a pink disk */ public class Square extends JPanel { public static final int HEIGHT= 50; // height and public static final int WIDTH= 50; // width, square private int x, y; // Coordinates of square on board private bool hasDisk= false; // = "square has pink disk" public Square(int x, int y) { // a square at (x,y) this.x= x; this.y= y; setPreferredSize(new Dimension(WIDTH,HEIGHT)); this.addMouseListener(new MouseEvents()); } public void paint(Graphics g) { // paint this square if ((x+y)%2 == 0) { g.setColor(Color.green); } else { g.setColor(Color.red); } g.fillRect(0,0,WIDTH-1,HEIGHT-1); if (hasDisk) { g.setColor(Color.pink); g.fillOval(7,7,WIDTH-14,HEIGHT-14); } g.setColor(Color.black); g.drawRect(0,0,WIDTH-1,HEIGHT-1); g.drawString("("+x+", "+y+")", 10, 5+HEIGHT/2); } // continued on next slide //

9 // Class Square (continued) // /** Complement the "has pink disk" property */ public void complementDisk() { hasDisk= !hasDisk; repaint(); // Don’t call paint(Graphics) directly } // instead, call inherited method repaint() /** Remove pink disk (if present) */ public void clearDisk() { hasDisk= false; repaint(); } /** Contains methods that process mouse events */ public class MouseEvents extends MouseInputAdapter { /** Complement the "has pink disk" property */ public void mouseClicked(MouseEvent e) { complementDisk(); } } API class MouseInputAdapter has several methods for processing mouse clicks, mouse presses, mouse releases, etc. We override only one of them here. That’s how we get the program to listen to mouse events.

10 /** Demo use of a mouse listener. Instance is a JFrame that is a 2x2 grid of squares, each of class Square, and a button with title "reset". Clicking an empty square draws a pink disk on it. Clicking again removes it. Clicking button "reset" removes all pink disks. This class listens to clicks of the button. Clicks on a square are listened to in class Square. */ public class MouseDemo extends JFrame { Box bl= new Box(BoxLayout.Y_AXIS); Square b00= new Square(0,0); Square b01= new Square(0,1); Box br= new Box(BoxLayout.Y_AXIS); Square b10= new Square(1,0); Square b11= new Square(1,1); JButton jb= new JButton("reset"); Box b= new Box(BoxLayout.X_AXIS); // continued on next page //

11 // class MouseDemo continued from last page */ /** Constructor: an invisible JFrame with title t */ public MouseDemo(String t) { super(t); bl.add(b00); bl.add(b01); br.add(b10); br.add(b11); b.add(bl); b.add(br); Container cp= getContentPane(); cp.add(b, BorderLayout.CENTER); cp.add(jb, BorderLayout.SOUTH); jb.addActionListener(new ButtonListener()); pack(); setResizable(false); // don’t let user resize!!! } /** Respond to mouse click on button jb */ public class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent e) { b00.clearDisk(); b01.clearDisk(); b10.clearDisk(); b11.clearDisk(); } // An inner class so that it can refer to fields b00, etc.