Software Design 5.1 From Using to Programming GUIs l Extend model of "keep it simple" in code to GUI  Bells and whistles ok, but easy to use and hide.

Slides:



Advertisements
Similar presentations
Event handling and listeners What is an event? user actions and context event sources and listeners Why should my programs be event- driven? User interaction.
Advertisements

1 Graphical User Interface (GUI) Applications Abstract Windowing Toolkit (AWT) Events Handling Applets.
Fall 2007CS 225 Graphical User Interfaces Event Handling Appendix C.
Event Driven Programming and GUIs Part 3 CS221 – 4/15/09.
Java GUI Libraries Swing Programming. Swing Components Swing is a collection of libraries that contains primitive widgets or controls used for designing.
Event Handling Events and Listeners Timers and Animation.
Events ● Anything that happens in a GUI is an event. For example: – User clicks a button, presses return when typing text, or chooses a menu item ( ActionEvent.
Swing CS-328 Dick Steflik John Margulies. Swing vs AWT AWT is Java’s original set of classes for building GUIs Uses peer components of the OS; heavyweight.
1 GUI Elements in Java Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
1 CMSC 132: Object-Oriented Programming II Nelson Padua-Perez William Pugh Department of Computer Science University of Maryland, College Park.
The Composite Pattern.. Composite Pattern Intent –Compose objects into tree structures to represent part-whole hierarchies. –Composite lets clients treat.
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.
10.1 AWT The AWT classes Users today expect a Graphical User Interface (GUI) Improves application usability Difficult to implement cross-platform.
GUI Programming in Java Tim McKenna GUI Programming Concepts l conventional programming: sequence of operations is determined by the program.
CSE 331 Software Design & Implementation Dan Grossman Spring 2015 GUI Event-Driven Programming (Based on slides by Mike Ernst, Dan Grossman, David Notkin,
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.
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 
GUI Programming in Java
Java Programming Chapter 10 Graphical User Interfaces.
20-753: Fundamentals of Web Programming Copyright © 1999, Carnegie Mellon. All Rights Reserved. 1 Lecture 16: Java Applets & AWT Fundamentals of Web Programming.
ACM/JETT Workshop - August 4-5, ExceptionHandling and User Interfaces (Event Delegation, Inner classes) using Swing.
Software Construction Lecture 10 Frameworks
Welcome to CIS 083 ! Events CIS 068.
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
Java GUI building with the AWT. AWT (Abstract Window Toolkit) Present in all Java implementations Described in (almost) every Java textbook Adequate for.
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.
Java Programming: Advanced Topics 1 Common Elements of Graphical User Interfaces Chapter 6.
Software Design 9.1 From Using to Programming GUIs l Extend model of "keep it simple" in code to GUI  Bells and whistles ok, should be easy to use and.
GUIs in Java Swing, Events CS2110, SW Development Methods Readings: MSD, Chapter 12 Lab Exercise.
Ch 3-4: GUI Basics Java Software Solutions Foundations of Program Design Sixth Edition by Lewis & Loftus Coming up: GUI Components.
Field Trip #19 Animations with Java By Keith Lynn.
 2002 Prentice Hall, Inc. All rights reserved Introduction Graphical User Interface (GUI) –Gives program distinctive “look” and “feel” –Provides.
1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers.
– Advanced Programming P ROGRAMMING IN Lecture 21 Introduction to Swing.
1 Outline 1 Introduction 2 Overview of Swing Components 3 JLabel 4 Event Handling 5 TextFields 6 How Event Handling Works 7 JButton 8 JCheckBox and JRadioButton.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
CS Lecture 00 Swing overview and introduction Lynda Thomas
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.
Timer class and inner classes. Processing timer events Timer is part of javax.swing helps manage activity over time Use it to set up a timer to generate.
Layout Managers Arranges and lays out the GUI components on a container.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
Lec.10 (Chapter 8 & 9) GUI Jiang (Jen) ZHENG June 27 th, 2005.
CPS 108/ola.1 From XP to javax.swing.* l What parts of embracing change can we embrace in 108?  Evolutionary design, small releases, iterative enhancement.
UID – Event Handling and Listeners Boriana Koleva
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
Week 6: Basic GUI Programming Concepts in Java Example: JFrameDemo.java container : a screen window/applet window/panel that groups and arranges components.
Object Oriented Programming.  Interface  Event Handling.
CSE 331 Software Design & Implementation Hal Perkins Autumn 2012 Event-Driven Programming 1.
Project JETT/Duke 1 javax.swing, events, and GUIs l GUI programming requires processing events  There’s no visible loop in the program  Wire up/connect.
Chapter 14: Introduction to Swing Components. Objectives Understand Swing components Use the JFrame class Use the JLabel class Use a layout manager Extend.
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,
Java Swing, Events Readings: Just Java 2: Chap 19 & 21, or Eckel’s Thinking in Java: Chap 14 Slide credits to CMPUT 301, Department of Computing Science.
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.
1 Lecture 8: User Interface Components with Swing.
Sep 181 Example Program DemoTranslateEnglishGUI.java.
Introduction to GUI Programming in Java: Frames, Simple Components, and Layouts.
COMPOSITE PATTERN NOTES. The Composite pattern l Intent Compose objects into tree structures to represent whole-part hierarchies. Composite lets clients.
CIS 270—Application Development II Chapter 11—GUI Components: Part I.
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:
AWT Vs SWING. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in most Java textbooks Adequate for many applications Uses.
Graphical User Interfaces
A First Look at GUI Applications
Ellen Walker Hiram College
Chap 7. Building Java Graphical User Interfaces
Graphical User Interfaces -- Introduction
A Quick Java Swing Tutorial
Presentation transcript:

Software Design 5.1 From Using to Programming GUIs l Extend model of "keep it simple" in code to GUI  Bells and whistles ok, but easy to use and hide l We're talking about software design  Not HCI or user-interface design or human factors…  However, compare winamp to iTunes l How do we design GUIs  Programming, drag-and-drop, …  How do we program/connect GUIs?

Software Design 5.2 javax.swing, events, and GUIs l GUI programming requires processing events  There’s no visible loop in the program  Wire up/connect widgets Menu, button, text area, spinner, combobox, … some generate events, some process events l Pressing this button causes the following to happen  We want to do practice “safe wiring”, meaning?  Open-closed principle

Software Design 5.3 Building GUIs l We need to put widgets together, what makes a good user-interface? What makes a bad user- interface?  How do we lay widgets out, by hand? Using a GUI-builder? Using a layout manager?  How do we cope with widget complexity? l Use the Sun Java Tutorial  See other online sources

Software Design 5.4 JComponent/Container/Component l The java.awt package was the original widget package, it persists as parent package/classes of javax.swing widgets  Most widgets are JComponents (subclasses), to be used they must be placed in a Container  The former is a swing widget, the latter awt, why? l Container is a component, but contains a collection of components (similar to what design pattern?)  Composite Design Pattern

Software Design 5.5 Composite, Container (continued) l A Container is also a Component, but not all Containers are JComponents (what?)  JFrame is often the “big container” that holds all the GUI widgets, we’ll use this and JApplet (awt counterparts are Frame and Applet) l A JPanel is a JComponent that is also a Container  Holds JComponents, for example and is holdable as well

Software Design 5.6 What do Containers do? l A Container is a Component, so it’s possible for a Container to “hold itself”? Where have we seen this? “ You want to represent part-whole hierarchies of objects. You want clients to be able to ignore the difference between compositions of objects and individual objects. Clients will treat all objects in the composite structure uniformly ”. l Composite pattern solves the problem. Think tree, linked list: leaf, composite, component

Software Design 5.7 Parents and Children l What about parent references?  Does child need to know who contains it? l What about child references?  Does parent need to know who it contains? l In Java/Swing, a parent is responsible for painting its children  For “paint” think draw, arrange, manage, …

Software Design 5.8 Widget layout l A Layout Manager “decides” how widgets are arranged in a Container  In a JFrame, we use the ContentPane for holding widgets/components, not the JFrame itself l Strategy pattern: “ related classes only differ in behavior, configure a class with different behaviors… you need variants of an algorithm reflecting different constraints…context forwards requests to strategy, clients create strategy for the context ”  Context == JFrame/container, Strategy == Layout l Layouts: Border, Flow, Grid, GridBag, Spring, …  I’ll use Border, Flow, Grid in my code

Software Design 5.9 BorderLayout (see code) l Default for the JFrame contentpane l Provides four areas, center is “main area” for resizing l Recursively nest for building complex (yet simple) GUIs BorderLayout.CENTER for adding components  Some code uses “center”, bad idea (bugs?) CENTER NORTH SOUTH WESTWEST EASTEAST

Software Design 5.10 Action and other events l Widgets generate events, these events are processed by event listeners  Different types of events for different scenarios: press button, release button, drag mouse, press mouse button, release mouse button, edit text in field, check radio button, …  Some widgets “fire” events, some widgets “listen” for events l To process events, add a listener to the widget, when the widget changes, or fires, its listeners are automatically notified.  Observer/Observable (related to MVC) pattern

Software Design 5.11 Adding Listeners l In lots of code you’ll see that the Container widget is the listener, so pressing a button or selecting a menu is processed by the Container/Frame’s actionPerformed method  All ActionListeners have an actionPerformed method, is this interface/implements or inheritance/extends?  Here’s some “typical” code, why is this bad? void actionPerformed(ActionEvent e) { if (e.getSource() == thisButton) … else if (e.getSource() == thatMenu)… }

Software Design 5.12 A GUI object can be its own client l Occasionally a GUI will be a listener of events it generates  Simple, but not extendable  Inner classes can be the listeners, arguably the GUI is still listening to itself, but … Encapsulating the listeners in separate classes is better l Client (nonGUI) objects cannot access GUI components  Properly encapsulated JTextField, for example, responds to aGui.displayText(), textfield not accessible to clients  If the GUI is its own client, it shouldn’t access textfield Tension: simplicity vs. generality l Don’t wire widgets together directly or via controller that manipulates widgets directly  Eventual trouble when GUI changes

Software Design 5.13 Using inner/anonymous classes l For each action/event that must be processed, create an object to do the processing  Command pattern: parameterize object by an action to perform, queue up requests to be executed at different times, support undo  There is a javax.swing Event Queue for processing events, this is the hidden while loop in event processing GUI programs

Software Design 5.14 Anonymous classes l The inner class can be named, or it can be created “anonymously”  For reuse in other contexts, sometimes naming helpful  Anonymous classes created close to use, easy to read (arguable to some)

Software Design 5.15 Listeners l Events propagate in a Java GUI as part of the event thread  Don’t manipulate GUI components directly, use the event thread  Listeners/widgets register themselves as interested in particular events Events go only to registered listeners, can be forwarded/consumed

Software Design 5.16 More on Listeners ActionListener, KeyListener, ItemListener, MouseListener, MouseMotionListener, …, see java.awt.event.*  Isolate listeners as separate classes, mediators between GUI, Controller, Application  Anonymous classes can help here too

Software Design 5.17 Listeners and Adapters l MouseListener has five methods, KeyListener has three  What if we’re only interested in one, e.g., key pressed or mouse pressed?  As interface, we must implement all methods as no-ops  As adapter we need only implement what we want

Software Design 5.18 Adapters and Interfaces l Single inheritance can be an annoyance in this situation  Can only extend one class, be one adapter, … l What about click/key modifiers, e.g., shift/control/left/both  Platform independent, what about Mac?