Graphical User Interface (GUI) Fawzi Emad Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.

Slides:



Advertisements
Similar presentations
Introduction to Java 2 Programming
Advertisements

Java Software Development Paradigm Lecture # 12. Basics of GUI.
Graphic User Interfaces Layout Managers Event Handling.
CMSC 341 Building Java GUIs. 09/26/2007 CMSC 341 GUI 2 Why Java GUI Development? Course is about Data Structures, not GUIs. We are giving you the opportunity.
Corresponds with Chapter 12
Unit 091 Introduction to GUI Programming Introduction to User Interfaces Introduction to GUI Programming GUI Design Issues GUI Programming Issues Java.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
1 Chapter 7 Graphics and Event Handling. 2 Overview The java.awt and javax.swing packages and their subpackages support graphics and event handling. Many.
Understanding SWING Architecture CS 4170 UI Design Hrvoje Benko Oct. 9, 2001.
Graphical User Interfaces (GUIs) GUI: An application that uses graphical objects to interact with users GUI applications consist of: –Events: A user or.
Graphical User Interface (GUI) Nelson Padua-Perez Bill Pugh Department of Computer Science University of Maryland, College Park.
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.
Graphical User Interface (GUI) Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
Creating a GUI with Swing. Introduction Very useful link: Swing – is a part of JFC (Java Foundation.
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.
Object-Oriented Analysis and Design
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
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 Programming in Java Tim McKenna GUI Programming Concepts l conventional programming: sequence of operations is determined by the program.
Introduction to Java Swing “We are the sultans of swing” – Mark Knopfler.
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.
MVC pattern and implementation in java
20-753: Fundamentals of Web Programming Copyright © 1999, Carnegie Mellon. All Rights Reserved. 1 Lecture 16: Java Applets & AWT Fundamentals of Web Programming.
Chapter 13 Advanced GUIs and Graphics. Chapter Objectives Learn about applets Explore the class Graphics Learn about the class Font Explore the class.
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
Java Swing, Events and MVC Optional Readings: Eckel’s Thinking in Java: Chap 14 (
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.
Object Oriented Programming Ders 11: Interfaces Mustafa Emre İlal
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.
3461A Readings from the Swing Tutorial. 3461A Overview  The follow is the Table of Contents from the trail “Creating a GUI with JFC/Swing” in the “The.
Java Programming: Advanced Topics 1 Common Elements of Graphical User Interfaces Chapter 6.
1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers.
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.
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.
Java Programming: Advanced Topics 1 Components and Facilities for Rich Graphical User Interfaces Chapter 7.
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.
SWING 101. IF YOU GET LOST - IMPORTANT LINKS  Swing articles:
CSCI Swing1 The Abstract Windowing Toolkit Since Java was first released, its user interface facilities have been a significant weakness –The Abstract.
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.
Computer Science [3] Java Programming II - Laboratory Course Lab 4: Common GUI Event Types and Listener Interfaces Layout Mangers Faculty of Engineering.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
University of Limerick1 Software Architecture Java Layout Managers.
Lec.10 (Chapter 8 & 9) GUI Jiang (Jen) ZHENG June 27 th, 2005.
The Abstract Window Toolkit (AWT) supports Graphical User Interface (GUI) programming. AWT features include: a rich set of user interface components; a.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
Swing - 2 Session 13. Swing - 2 / 2 of 38 Objectives (1) Discuss trees and tables Discuss progress bars Discuss MVC architecture Describe menus.
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.
Ajmer Singh PGT(IP) JAVA IDE Programming - I. Ajmer Singh PGT(IP) GUI (Graphical User Interface) It is an interface that uses a graphic entities along.
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.
1 Lecture 8: User Interface Components with Swing.
Applets. 9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L12: Applets Slide 2 Applets Usually.
Introduction to GUI Programming in Java: Frames, Simple Components, and Layouts.
Introduction to Swing Mr. Crone. What is Swing? a collection of pre-made Java classes used to create a modern graphical user interface.
A Quick Java Swing Tutorial
Chap 7. Building Java Graphical User Interfaces
Chapter 13: Advanced GUIs and Graphics
Graphical User Interfaces -- Introduction
Steps to Creating a GUI Interface
Advanced GUIs and Graphics
Graphical User Interface
Presentation transcript:

Graphical User Interface (GUI) Fawzi Emad Chau-Wen Tseng Department of Computer Science University of Maryland, College Park

Graphical User Interface (GUI) User interface Interface between user and computer Both input and output Affects usability of computer Interface improving with better hardware Switches & light bulbs Punch cards & teletype (typewriter) Keyboard & black/white monitor (text) Mouse & color monitor (graphics)

Graphical User Interface (GUI) Design issues Ease of use Ease of understanding Ability to convey information Maintainability Efficiency

Graphic User Interface Overview GUI elements Java GUI classes Event-driven programming Model-View-Controller (MVC) Pattern

GUI Elements Component  items displayed (widgets) Container  region containing widgets Layout  arrangement of container Event  interactions for GUI

GUI Elements – Component Definition Actual items (widgets) user sees in GUI Examples Labels (fixed text) Text areas (for entering text) Buttons Checkboxes Tables Menus Toolbars Etc…

GUI Elements – Container Definition Abstractions occupying space in GUI Properties Usually contain one or more widgets Can be nested in other containers Example Window containing 1 menu (component) 3 buttons (component) 2 windows (container)

GUI Elements – Layout Definition Arrangement of widgets in container Layout specification Logical terms (2 nd row, 1 st column, left) Preferred approach Actual coordinates (100 pixels, 5 inches) Can be too rigid, limited to certain window sizes Layout manager Entity translating layout specifications into actual coordinates at runtime, depending on conditions

Example Java Layout Managers GridLayout Lays out components in a grid of user specified size BorderLayout Designates portions of the container as North, South, East, West, and Center CardLayout Adds components one on top of another GridBagLayout Customizable manager that can use rows and columns of varying lengths

GUI Elements – Events Definition Action or condition occurring outside normal flow of control of program Examples Mouse clicks Keyboard input Menu selections Window actions

Event-driven Programming Normal (control flow-based) programming Approach Start at main() Continue until end of program or exit() Event-driven programming Unable to predict time & occurrence of event Approach Start with main() Build GUI Await events (& perform associated computation)

Event-driven Programming in Java During implementation Implement event listeners for each event Usually one event listener class per widget At run time Register listener object with widget object Java generates event object when events occur Java then passes event object to event listener Example of observer design pattern

Event-driven Programming in Java Example listeners & actions causing event ActionEvent  clicking button in GUI CaretEvent  selecting portion of text in GUI FocusEvent  component gains / loses focus KeyEvent  pressing key ItemEvent  selecting item from pull-down menu MouseEvent  dragging mouse over widget TextEvent  changing text within a field WindowEvent  closing a window

Java GUI Classes AWT (Abstract Window Toolkit) (java.awt.*) Old GUI framework for Java (Java 1.1) Some reliance on native code counterparts Platform independence problems Swing (javax.swing.*) New GUI framework first introduced in Java 1.2 Includes AWT features plus many enhancements Pure Java components (no reliance on native code) Pluggable look and feel architecture

Java GUI Components Examples JFrame JTextfield Jlabel Button JList JComboBox Menu Combo Panes Indicators Dialog boxes JFileChooser Color chooser JTable JTree

JFrame

JTextField and JLabel

Buttons Toolbar

JList and JComboBox

Menu

Panels and Panes Tabbed Pane Split Pane Scroll Pane

Various Indicators Spinner Slider Progress Bar

A Dialog Box

JFileChooser

Color Chooser

Jtable and JTree

Text Fields

Simple Java GUI Example import javax.swing.*; public class HelloWorldApplication { public static void main(String[ ] args) { JFrame myFrame = new ThreadExample(“Hello”); myFrame.setSize(300, 150); myFrame.setVisible(true); }

JFrame Hierarchy Several super classes and well as implemented interfaces Many, many member methods including inherited methods that allow for operations such as resizing, setting properties, adding components, etc. Other top level containers JDialog (dialog boxes) JApplet (web applets) JWindow (stripped down JFrame, no title bar or window buttons) Object Component Container Window Frame JFrame

JFrame Structure Most things go into content pane getContentPane() Use glassPane for pop up menus, some animations Methods getRootPane() getLayeredPane() getContentPane() getGlassPane() Can set…Pane explicitly glassPane rootPane JFrame layeredPane LayeredPane contains contentPane LayeredPane manages (optional) JMenuBar

Model-View-Controller (MVC) Pattern Developed at Xerox PARC in 1978 Separates GUI into 3 components Model  application data View  visual interface Controller  user interaction Model View Controller

MVC Interaction Order 1. User performs action, controller is notified 2. Controller may request changes to model 3. Controller may tell view to update 4. Model may notify view if it has been modified 5. View may need to query model for current data 6. View updates display for user Model View Controller ,5 6

MVC Pattern – Advantages Separates data from its appearance More robust Easier to maintain Provides control over interface Easy to support multiple displays for same data Model GUI

MVC Pattern – Model Contains application & its data Provide methods to access & update data Interface defines allowed interactions Fixed interface enable both model & GUIs to be easily pulled out and replaced Examples Text documents Spreadsheets Web browser Video games

MVC Pattern – Controller Users interact with the controller Interprets mouse movement, keystrokes, etc. Communicates those activities to the model Interaction with model indirectly causes view(s) to update

MVC Pattern – View Provides visual representation of model Multiple views can display model at same time Example: data represented as table and graph When model is updated, all its views are informed & given chance to update themselves

Principles of GUI Design Model Should perform actual work Should be independent of the GUI But can provide access methods Controller Lets user control what work the program is doing Design of controller depends on model View Lets user see what the program is doing Should not display what controller thinks is happening (base display on model, not controller)

Principles of GUI Design Combining controller & view Appropriate if very interdependent Especially in small programs Separation of concerns Never mix model code with GUI code View should represent model as it really is Not some remembered status Controller should talk to model and view Avoid manipulate them directly