Widget. Widget is a generic name for parts of an interface that have their own behaviour. e.g., buttons, progress bars, sliders, drop-down

Size: px
Start display at page:

Download "Widget. Widget is a generic name for parts of an interface that have their own behaviour. e.g., buttons, progress bars, sliders, drop-down"

Transcription

1 Widgets Jeff Avery

2 Widget Widget is a generic name for parts of an interface that have their own behaviour. e.g., buttons, progress bars, sliders, drop-down menus, spinners, file dialog boxes, etc are also called components, or controls can have their own appearance receive and interpret their own events put into libraries (toolkits) for reuse Widget from Wow Wow Wubbzy

3 Logical Input Device Logical input devices are graphical components that are defined by its function, not what it looks like. Each device transmits a particular kind of input primitives: locator: inputs a (X,Y) position pick: identifies a displayed object choice: selects from a set of alternatives valuator: inputs a value string: inputs a string of characters stroke: inputs a sequence of (X,Y) position There are many physical devices (e.g., mouse, keyboard, joystick, tablet) that can map to the same logical input device.

4 Logical Input Device A widget can be considered a logical input device with appearance. Logical Button Device function: generates a pushed event can look like a push button, a keyboard shortcut, a menu item

5 MVC Widget Architecture perceive present View notify Properties logical device essential geometry Model Change Events express change translate Controller

6 MVC Widget Architecture Widget perceive present View notify Properties essential geometry Model Change Events express translate Controller change MVC exists at two distinct levels: application and widget.

7 Categorizing and Characterizing Widgets Three Categories of Widgets: Simple Widgets Container Widgets Abstract Model Widgets Further characterize widgets by: the model which the widget manipulates the events that the widget generates the widget properties which change behaviour and appearance

8 Simple Widgets 1 Labels and Images Model: none Events: Usually none Properties: text (font, size, ), image e.g. label, icon, spacer, Button Model: none Events: push Properties: label, size, color, e.g. button Boolean Model: true/false Events: changed event, e.g. radio button, checkbox, toggle button

9 Radio Button

10 Simple Widgets 2 Number Model: bounded real number Events: changed event, e.g. slider, progress bar, scrollbar Text Model: string Events: changed, selection, insertion Properties: optional formatters (numeric, phone number, ) e.g. text fields, text areas,

11 Special Value Widgets Examples: colour/file/date/time pickers

12 Container Widgets 1 Panel (Pane, Form, Toolbar) arrangement of widgets e.g. JPanel, toolbar Tab choice between arrangements of widgets

13 Container Widgets 2 Menu hierarchical list of (usually) buttons Choice from a List list of boolean widgets e.g. drop-down, combo-box, radio button group, split button

14 Widget toolkits Also called widget libraries or GUI toolkits or GUI APIs Software bundled with a window manager, operating system, development language, hardware platform Defines a set of GUI components for programmers Examples: buttons, drop-down menus, sliders, progress bars, lists, scrollbars, tab panes, file selection dialogs, etc. Programmers access these GUI components via an application programming interface (API)

15 Event-driven programming Widget toolkits use event-driven programming model Reactive systems User action program response Most of the time the program sits around doing nothing Widget toolkit supports a mechanism for mapping user action on widget to appropriate application code to handle that action

16 Widget Toolkit Design Goals Complete GUI designers have everything they need Consistent User: Look and Feel is consistent across components Developer: Consistent usage paradigms Customizable Developer can reasonably extend functionality to meet particular needs of application Meeting these requirements encourages reuse

17 Completeness The Macintosh 7 (Dix, Finlay, Abowd, Beale, 1998) Button Slider Pulldown menu Check box Radio button Text entry / edit fields File open / save Java Swing has many more widgets

18 Consistency Facilitate learning by: Common look and feel Using Widgets appropriately

19 Consistency: Name that Look CS Widgets 5 6

20 Consistency: Using Widgets Appropriately People expect widgets to behave in certain ways. OTR messaging study by Stedman et al. Question: How do you initiate verification? Answer: Right-click on the label at bottom left!

21 Customizable Two common strategies: 1. Properties e.g. change colour, font, orientation, text formatter, 2. Factor out behaviour (Pluggable Behaviour) Responding to an action: ActionListener Swing s UIManager for changing look and feel JTable example

22 Customizable: JTable JTable factors out much of its functionality The actual data (TableModel) Selection of items (ListSelectionModel) Rendering of cells (TableCellRenderer) Editing of cells (TableCellEditor) Developer has lots of flexibility in the data that can be represented, how it can be selected, its method of presentation, and its method of editing

23 Implementation: Heavyweight vs. Lightweight Heavyweight Widgets OS provides widgets and hierarchical windowing system Widget toolkit wraps OS widgets for programming language Base Window System (BWS) can dispatch events to a specific widget Examples: nested X Windows, Java s AWT, OSX Cocoa, standard HTML form widgets, Windows MFC Advantages Events generated by user action is passed by OS directly to components Preserves OS look and feel Disadvantages OS-specific programming Toolkits end up as the lowest-common set of components

24 Implementation: Heavyweight vs. Lightweight Lightweight Widgets OS provides a top level window only Widget toolkit draws its own widgets and is responsible for mapping events to their corresponding widgets Examples: Java Swing, JQuery UI, Windows WPF Advantages Can guarantee identical look-and-feel across platforms. Can guarantee consistent widget set on all platforms. Disadvantages Concerns that they appear non-native. Possible performance implications.

25 Demo Widget simulation using HTML and Javascript Standalone widget

Widgets. Overview. Widget. Widgets Widget toolkits Lightweight vs. heavyweight widgets Swing Widget Demo

Widgets. Overview. Widget. Widgets Widget toolkits Lightweight vs. heavyweight widgets Swing Widget Demo Widgets Overview Widgets Widget toolkits Lightweight vs. heavyweight widgets Swing Widget Demo Widget Widget is a generic name for parts of an interface that have their own behavior: buttons, progress

More information

Widget Toolkits CS MVC

Widget Toolkits CS MVC Widget Toolkits 1 CS349 -- MVC Widget toolkits Also called widget libraries or GUI toolkits or GUI APIs Software bundled with a window manager, operating system, development language, hardware platform

More information

Widgets. Widgets Widget Toolkits. 2.3 Widgets 1

Widgets. Widgets Widget Toolkits. 2.3 Widgets 1 Widgets Widgets Widget Toolkits 2.3 Widgets 1 User Interface Widget Widget is a generic name for parts of an interface that have their own behavior: buttons, drop-down menus, spinners, file dialog boxes,

More information

Widgets. Widgets Widget Toolkits. User Interface Widget

Widgets. Widgets Widget Toolkits. User Interface Widget Widgets Widgets Widget Toolkits 2.3 Widgets 1 User Interface Widget Widget is a generic name for parts of an interface that have their own behavior: buttons, drop-down menus, spinners, file dialog boxes,

More information

Event Dispatch. Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch. 2.4 Event Dispatch 1

Event Dispatch. Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch. 2.4 Event Dispatch 1 Event Dispatch Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch 2.4 Event Dispatch 1 Event Architecture A pipeline: - Capture and Queue low-level hardware events - Dispatch

More information

Event Dispatch. Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch. Event Architecture. A pipeline: Event Capture

Event Dispatch. Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch. Event Architecture. A pipeline: Event Capture Event Dispatch Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch 2.4 Event Dispatch 1 Event Architecture A pipeline: - Capture and Queue low-level hardware events - Dispatch

More information

Event Dispatch. Dispatching events to windows and widgets.

Event Dispatch. Dispatching events to windows and widgets. Event Dispatch Dispatching events to windows and widgets. Review: Event Architecture 2 Event capture, processing and dispatch. Event Capture Hardware events (interrupts) Event Dispatch Software events

More information

CS 4300 Computer Graphics

CS 4300 Computer Graphics CS 4300 Computer Graphics Prof. Harriet Fell Fall 2011 Lecture 8 September 22, 2011 GUIs GUIs in modern operating systems cross-platform GUI frameworks common GUI widgets event-driven programming Model-View-Controller

More information

All the Swing components start with J. The hierarchy diagram is shown below. JComponent is the base class.

All the Swing components start with J. The hierarchy diagram is shown below. JComponent is the base class. Q1. If you add a component to the CENTER of a border layout, which directions will the component stretch? A1. The component will stretch both horizontally and vertically. It will occupy the whole space

More information

where are we? ICS 105: Project in HCI ui toolkits what does the toolkit do? model-view-controller model-view-controller lectures

where are we? ICS 105: Project in HCI ui toolkits what does the toolkit do? model-view-controller model-view-controller lectures where are we? ICS 105: Project in HCI UI Toolkits and Programming Models lectures done with evaluation techniques a couple of lectures on toolkits and programming other topics: graphical design and screen

More information

PROGRAMMING DESIGN USING JAVA (ITT 303) Unit 7

PROGRAMMING DESIGN USING JAVA (ITT 303) Unit 7 PROGRAMMING DESIGN USING JAVA (ITT 303) Graphical User Interface Unit 7 Learning Objectives At the end of this unit students should be able to: Build graphical user interfaces Create and manipulate buttons,

More information

GUI Software Architecture

GUI Software Architecture GUI Software Architecture P2: Requirements Analysis User Analysis Task Analysis Problem Scenarios Usability Criteria Scenario Your engineers just developed a new desktop computer. They give you the following

More information

Windows and Events. created originally by Brian Bailey

Windows and Events. created originally by Brian Bailey Windows and Events created originally by Brian Bailey Announcements Review next time Midterm next Friday UI Architecture Applications UI Builders and Runtimes Frameworks Toolkits Windowing System Operating

More information

Events. Dispatch, event-to-code binding. Review: Events Defined 1/17/2014. occurrence.

Events. Dispatch, event-to-code binding. Review: Events Defined 1/17/2014. occurrence. Events Dispatch, event-to-code binding Review: Events Defined 1. An observable occurrence, phenomenon, or an extraordinary occurrence. 2. A message to notify an application that something happened. Examples:

More information

GUI Implementation Support

GUI Implementation Support GUI Implementation Support Learning Objectives: Why GUIs? What is a GUI? Why is implementation support needed? What kinds of implementation support are available? Basic concepts in OO GUI toolkit & app

More information

GUI Components: Part 1

GUI Components: Part 1 1 2 11 GUI Components: Part 1 Do you think I can listen all day to such stuff? Lewis Carroll Even a minor event in the life of a child is an event of that child s world and thus a world event. Gaston Bachelard

More information

Human-Computer Interaction. Chapter 2. What is HCI?

Human-Computer Interaction. Chapter 2. What is HCI? Human-Computer Interaction Chapter 2 What is HCI? Overview 2.1 The Human 2.2 The Computer 2.3 The Interaction Models of Interaction Interaction Styles Elements of the WIMP Interface HCI 2.3.1 Models of

More information

Graphical User Interfaces (GUIs)

Graphical User Interfaces (GUIs) CMSC 132: Object-Oriented Programming II Graphical User Interfaces (GUIs) Department of Computer Science University of Maryland, College Park Model-View-Controller (MVC) Model for GUI programming (Xerox

More information

MOBILE COMPUTING 1/20/18. How many of you. CSE 40814/60814 Spring have implemented a command-line user interface?

MOBILE COMPUTING 1/20/18. How many of you. CSE 40814/60814 Spring have implemented a command-line user interface? MOBILE COMPUTING CSE 40814/60814 Spring 2018 How many of you have implemented a command-line user interface? How many of you have implemented a graphical user interface? HTML/CSS Java Swing.NET Framework

More information

This page intentionally left blank

This page intentionally left blank This page intentionally left blank arting Out with Java: From Control Structures through Objects International Edition - PDF - PDF - PDF Cover Contents Preface Chapter 1 Introduction to Computers and Java

More information

What is interaction? communication user system. communication between the user and the system

What is interaction? communication user system. communication between the user and the system What is interaction? communication user system communication between the user and the system 2 terms of interaction The purpose of interactive system is to help user in accomplishing goals from some domain.

More information

Fall UI Design and Implementation 1

Fall UI Design and Implementation 1 Fall 2004 6.831 UI Design and Implementation 1 1 Source: UI Hall of Shame Fall 2004 6.831 UI Design and Implementation 2 Our Hall of Shame candidate for the day is this interface for choose how a list

More information

Sri Vidya College of Engineering & Technology

Sri Vidya College of Engineering & Technology UNIT-V TWO MARKS QUESTION & ANSWER 1. What is the difference between the Font and FontMetrics class? Font class is used to set or retrieve the screen fonts.the Font class maps the characters of the language

More information

MODEL UPDATES MANIPULATES USER

MODEL UPDATES MANIPULATES USER 1) What do you mean by MVC architecture? Explain its role in modern applications and list its advantages(may-2013,jan-2013,nov-2011). In addition to dividing the application into three kinds of components,

More information

Superficial the concepts

Superficial the concepts Superficial the concepts Superficial is a fresh approach to the design and coding of interactive applications, in particular those with graphical user interfaces (GUIs). Superficial provides a conceptual

More information

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300 Human-Computer Interaction IS4300 1 Quiz 3 1 I5 due next class Your mission in this exercise is to implement a very simple Java painting applet. The applet must support the following functions: Draw curves,

More information

Mensch-Maschine-Interaktion 1. Chapter 7 (July 15, 2010, 9am-12pm): Implementing Interactive Systems

Mensch-Maschine-Interaktion 1. Chapter 7 (July 15, 2010, 9am-12pm): Implementing Interactive Systems Mensch-Maschine-Interaktion 1 Chapter 7 (July 15, 2010, 9am-12pm): Implementing Interactive Systems 1 Implementing Interactive Systems Designing Look-And-Feel Constraints Mapping Implementation Technologies

More information

Graphical Applications

Graphical Applications Graphical Applications The example programs we've explored thus far have been text-based They are called command-line applications, which interact with the user using simple text prompts Let's examine

More information

Input: Interaction Techniques

Input: Interaction Techniques Input: Interaction Techniques Administration Questions about homework? 2 Interaction techniques A method for carrying out a specific interactive task Example: enter a number in a range could use (simulated)

More information

Event Driven Programming

Event Driven Programming Event Driven Programming Part 1 Introduction Chapter 12 CS 2334 University of Oklahoma Brian F. Veale 1 Graphical User Interfaces So far, we have only dealt with console-based programs Run from the console

More information

Input part 3: Interaction Techniques

Input part 3: Interaction Techniques Input part 3: Interaction Techniques Interaction techniques A method for carrying out a specific interactive task Example: enter a number in a range could use (simulated) slider (simulated) knob type in

More information

BASICS OF GRAPHICAL APPS

BASICS OF GRAPHICAL APPS CSC 2014 Java Bootcamp Lecture 7 GUI Design BASICS OF GRAPHICAL APPS 2 Graphical Applications So far we ve focused on command-line applications, which interact with the user using simple text prompts In

More information

Fall UI Design and Implementation 1

Fall UI Design and Implementation 1 Fall 2005 6.831 UI Design and Implementation 1 1 Source: UI Hall of Shame Fall 2005 6.831 UI Design and Implementation 2 Our Hall of Shame candidate for the day is this dialog box from Adaptec Easy CD

More information

Road Map for Essential Studio 2011 Volume 4

Road Map for Essential Studio 2011 Volume 4 Road Map for Essential Studio 2011 Volume 4 Essential Studio User Interface Edition... 4 ASP.NET...4 Essential Tools for ASP.NET... 4 Essential Chart for ASP.NET... 4 Essential Diagram for ASP.NET... 4

More information

Introduction to the JAVA UI classes Advanced HCI IAT351

Introduction to the JAVA UI classes Advanced HCI IAT351 Introduction to the JAVA UI classes Advanced HCI IAT351 Week 3 Lecture 1 17.09.2012 Lyn Bartram lyn@sfu.ca About JFC and Swing JFC Java TM Foundation Classes Encompass a group of features for constructing

More information

We will talk about Alt-Tab from the usability perspective. Think about: - Is it learnable? - Is it efficient? - What about errors and safety?

We will talk about Alt-Tab from the usability perspective. Think about: - Is it learnable? - Is it efficient? - What about errors and safety? 1 This lecture s candidate for the Hall of Fame & Shame is the Alt-Tab window switching interface in Microsoft Windows. This interface has been copied by a number of desktop systems, including KDE, Gnome,

More information

GUI Event Handlers (Part I)

GUI Event Handlers (Part I) GUI Event Handlers (Part I) 188230 Advanced Computer Programming Asst. Prof. Dr. Kanda Runapongsa Saikaew (krunapon@kku.ac.th) Department of Computer Engineering Khon Kaen University 1 Agenda General event

More information

Programming Graphical

Programming Graphical Programming Graphical User Interfaces in R Michael F. Lawrence John Verzani CRC Press Taylorfii Francis Group Boca Raton London NewYork CRC Press Is an imprint of the Taylor & Francis Group an informs

More information

UI Software Organization

UI Software Organization UI Software Organization The user interface From previous class: Generally want to think of the UI as only one component of the system Deals with the user Separate from the functional core (AKA, the app

More information

The Interaction. notion of interaction interaction frameworks ergonomics interaction styles context of interaction

The Interaction. notion of interaction interaction frameworks ergonomics interaction styles context of interaction The Interaction notion of interaction interaction frameworks ergonomics interaction styles context of interaction Interaction Frameworks Interaction: communication between the user and the system Why have

More information

Model-View-Controller

Model-View-Controller Model-View-Controller rationale implementation benefit Model-View-Controller 1 How can we design a power point application? Model-View-Controller 2 Possible Design: Data and UI in Same Object What if we

More information

7 Implementing Interactive Systems

7 Implementing Interactive Systems 7 Implementing Interactive Systems 7.1 Designing Look-And-Feel 7.2 Constraints 7.3 Mapping 7.4 Implementation Technologies for Interactive Systems 7.5 Standards and Guidelines Ludwig-Maximilians-Universität

More information

The Interaction. Dr. Karim Bouzoubaa

The Interaction. Dr. Karim Bouzoubaa The Interaction Dr. Karim Bouzoubaa UI Hall of Fame or Shame? The buttons are limited to text labels: à pi instead of (scientific mode) à sqrt rather than à * instead of X Why only one line of display?

More information

Thin Client for Web Using Swing

Thin Client for Web Using Swing Thin Client for Web Using Swing Raffaello Giulietti and Sandro Pedrazzini SUPSI, Dipartimento di Informatica ed Elettrotecnica, Galleria 2, CH-6928 Manno, Switzerland TINET SA CH-6928 Manno, Switzerland

More information

Road Map for Essential Studio 2010 Volume 1

Road Map for Essential Studio 2010 Volume 1 Road Map for Essential Studio 2010 Volume 1 Essential Studio User Interface Edition... 4 Essential Grid... 4 Essential Grid ASP.NET... 4 Essential Grid ASP.NET MVC... 4 Essential Grid Windows Forms...

More information

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300 Human-Computer Interaction IS4300 1 I4 Swing! Due Now Implement a Java applet to provide online ordering for your favorite restaurant. The interface need not be functional, but the controls should be laid

More information

Giving instructions, conversing, manipulating and navigating (direct manipulation), exploring and browsing, proactive computing

Giving instructions, conversing, manipulating and navigating (direct manipulation), exploring and browsing, proactive computing Looking Back Interaction styles Giving instructions, conversing, manipulating and navigating (direct manipulation), exploring and browsing, proactive computing Activity-based vs. object-oriented design

More information

Introduction p. 1 JFC Architecture p. 5 Introduction to JFC p. 7 The JFC 1.2 Extension p. 8 Swing p. 9 Drag and Drop p. 16 Accessibility p.

Introduction p. 1 JFC Architecture p. 5 Introduction to JFC p. 7 The JFC 1.2 Extension p. 8 Swing p. 9 Drag and Drop p. 16 Accessibility p. Introduction p. 1 JFC Architecture p. 5 Introduction to JFC p. 7 The JFC 1.2 Extension p. 8 Swing p. 9 Drag and Drop p. 16 Accessibility p. 17 MVC Architecture p. 19 The MVC Architecture p. 20 Combined

More information

WIMP Elements. GUI goo. What is WIMP?

WIMP Elements. GUI goo. What is WIMP? WIMP Elements GUI goo What is WIMP? 1 There are many kinds of WIMPs WIMP The GUI Interface Windows Icons Menus Pointers 2 Windows Icons Pointers Menus Windows Windows are areas of the screen that act like

More information

CS11 Java. Fall Lecture 4

CS11 Java. Fall Lecture 4 CS11 Java Fall 2006-2007 Lecture 4 Today s Topics Interfaces The Swing API Event Handlers Inner Classes Arrays Java Interfaces Classes can only have one parent class No multiple inheritance in Java! By

More information

GUI in C++ PV264 Advanced Programming in C++ Nikola Beneš Jan Mrázek Vladimír Štill. Faculty of Informatics, Masaryk University.

GUI in C++ PV264 Advanced Programming in C++ Nikola Beneš Jan Mrázek Vladimír Štill. Faculty of Informatics, Masaryk University. GUI in C++ PV264 Advanced Programming in C++ Nikola Beneš Jan Mrázek Vladimír Štill Faculty of Informatics, Masaryk University Spring 2017 PV264: GUI in C++ Spring 2017 1 / 23 Organisation Lectures this

More information

Introduction to Graphical User Interfaces (GUIs) Lecture 10 CS2110 Fall 2008

Introduction to Graphical User Interfaces (GUIs) Lecture 10 CS2110 Fall 2008 Introduction to Graphical User Interfaces (GUIs) Lecture 10 CS2110 Fall 2008 Announcements A3 is up, due Friday, Oct 10 Prelim 1 scheduled for Oct 16 if you have a conflict, let us know now 2 Interactive

More information

Organization of User Interface Software

Organization of User Interface Software Organization of User Interface Software Administration Questions about assignments due and assignments assigned 2 What we will talk about Ways to organize UI code Different models of user interfaces as

More information

Outline. Widgets. Categories of Widgets. What is a Widget?

Outline. Widgets. Categories of Widgets. What is a Widget? Outline Widgets More GUI Goo What is a widget? Buttons Combo boxes Tool bars Text components Dialog boxes Sliders Scrollbars What is a Widget? Widgets are interactive objects - the basic building blocks

More information

GUI Programming. Chapter. A Fresh Graduate s Guide to Software Development Tools and Technologies

GUI Programming. Chapter. A Fresh Graduate s Guide to Software Development Tools and Technologies A Fresh Graduate s Guide to Software Development Tools and Technologies Chapter 12 GUI Programming CHAPTER AUTHORS Ang Ming You Ching Sieh Yuan Francis Tam Pua Xuan Zhan Software Development Tools and

More information

chapter 3 the interaction

chapter 3 the interaction chapter 3 the interaction ergonomics physical aspects of interfaces industrial interfaces Ergonomics Study of the physical characteristics of interaction Also known as human factors but this can also be

More information

Insight: Measurement Tool. User Guide

Insight: Measurement Tool. User Guide OMERO Beta v2.2: Measurement Tool User Guide - 1 - October 2007 Insight: Measurement Tool User Guide Open Microscopy Environment: http://www.openmicroscopy.org OMERO Beta v2.2: Measurement Tool User Guide

More information

Eclipse Scout. Release Notes. Scout Team. Version 7.0

Eclipse Scout. Release Notes. Scout Team. Version 7.0 Eclipse Scout Release Notes Scout Team Version 7.0 Table of Contents About This Release.......................................................................... 1 Service Releases..........................................................................

More information

KF5008 Program Design & Development. Lecture 1 Usability GUI Design and Implementation

KF5008 Program Design & Development. Lecture 1 Usability GUI Design and Implementation KF5008 Program Design & Development Lecture 1 Usability GUI Design and Implementation Types of Requirements Functional Requirements What the system does or is expected to do Non-functional Requirements

More information

Model-view-controller View hierarchy Observer

Model-view-controller View hierarchy Observer -view-controller hierarchy Fall 2004 6831 UI Design and Implementation 1 Fall 2004 6831 UI Design and Implementation 2!"# Separation of responsibilities : application state Maintains application state

More information

Introduction to Graphical Interface Programming in Java. Introduction to AWT and Swing

Introduction to Graphical Interface Programming in Java. Introduction to AWT and Swing Introduction to Graphical Interface Programming in Java Introduction to AWT and Swing GUI versus Graphics Programming Graphical User Interface (GUI) Graphics Programming Purpose is to display info and

More information

Programming Training. This Week: Tkinter for GUI Interfaces. Some examples

Programming Training. This Week: Tkinter for GUI Interfaces. Some examples Programming Training This Week: Tkinter for GUI Interfaces Some examples Tkinter Overview Set of widgets designed by John K. Ousterhout, 1987 Tkinter == Tool Kit Interface Mean to be driven by Tcl (Toolkit

More information

Graphics programming. COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson)

Graphics programming. COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson) Graphics programming COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson) Overview Aims To provide an overview of Swing and the AWT To show how to build

More information

Input (part 2: input models)

Input (part 2: input models) Input (part 2: input models) Dealing with diversity Saw lots of diversity in devices actual details of devices (e.g., device drivers) is a real pain how do we deal with the diversity? Need a model (abstraction)

More information

Packages: Putting Classes Together

Packages: Putting Classes Together Packages: Putting Classes Together 1 Introduction 2 The main feature of OOP is its ability to support the reuse of code: Extending the classes (via inheritance) Extending interfaces The features in basic

More information

Designing Interactive Systems II

Designing Interactive Systems II Designing Interactive Systems II Computer Science Graduate Programme SS 2010 Prof. Dr. RWTH Aachen University http://hci.rwth-aachen.de 1 Review 2 Review Web 2.0 in keywords 2 Review Web 2.0 in keywords

More information

Review. Designing Interactive Systems II. Introduction. Web 2.0 in keywords GWT Cappuccino HTML5. Cross platform GUI Toolkit

Review. Designing Interactive Systems II. Introduction. Web 2.0 in keywords GWT Cappuccino HTML5. Cross platform GUI Toolkit Review Designing Interactive Systems II Computer Science Graduate Programme SS 2010 Prof. Dr. RWTH Aachen University Web 2.0 in keywords GWT Cappuccino HTML5 http://hci.rwth-aachen.de 1 2 Introduction

More information

CSE 331 Software Design & Implementation

CSE 331 Software Design & Implementation CSE 331 Software Design & Implementation Hal Perkins Spring 2017 GUI Event-Driven Programming 1 The plan User events and callbacks Event objects Event listeners Registering listeners to handle events Anonymous

More information

Advanced Effects in Java Desktop Applications

Advanced Effects in Java Desktop Applications Advanced Effects in Java Desktop Applications Kirill Grouchnikov, Senior Software Engineer, Amdocs kirillcool@yahoo.com http://www.pushing-pixels.org OSCON 2007 Agenda Swing pipeline Hooking into the pipeline

More information

CS415 Human Computer Interaction

CS415 Human Computer Interaction CS415 Human Computer Interaction Lecture 7 Implementation and Testing Tools for HCIs October 4, 2015 Sam Siewert Coming Up Quiz on Wednesday for Part II Chapters 5,6,7,8,9 Review Next Week on Monday, 10/12

More information

XPToolkit Schedule. Page 1

XPToolkit Schedule. Page 1 1 Dependencies 99d 0% 1/14 6/15 2 GFX working (need fixes to coord system, API, etc.) 0d 0% saari 1/14 1/14 3 UE spec for widget look/feel 0d 0% german 1/14 1/14 4 Core form elements 0d 0% 1/14 1/14 5

More information

Is image everything?

Is image everything? Is image everything? Review Computer Graphics technology enables GUIs and computer gaming. GUI's are a fundamental enabling computer technology. Without a GUI there would not be any, or much less: Computer

More information

Event Driven UIs and Model-View-Controller

Event Driven UIs and Model-View-Controller Event Driven UIs and Model-View-Controller CS160: User Interfaces John Canny Includes slides based on those of James Landay & Jeffrey Heer Reminder Archos 5 hardware available in class this Weds one per

More information

Containers. Atomic Components. Containment Hierarchy. Example Example 3.3 (revisited) Example DemoSwing.java

Containers. Atomic Components. Containment Hierarchy. Example Example 3.3 (revisited) Example DemoSwing.java Atomic Components Containers An atomic component is: a low-level entity an entity that interacts with the user an entity that cannot hold other components Examples: buttons (), text fields (JTextField)

More information

Today: CMPUT 301: Lecture 14 The Interaction

Today: CMPUT 301: Lecture 14 The Interaction Today: CMPUT 301: Lecture 14 The Interaction Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by Ken Wong, Eleni Stroulia Zach Dodds, Martin

More information

Swing. By Iqtidar Ali

Swing. By Iqtidar Ali Swing By Iqtidar Ali Background of Swing We have been looking at AWT (Abstract Window ToolKit) components up till now. Programmers were not comfortable when doing programming with AWT. Bcoz AWT is limited

More information

Java: Graphical User Interfaces (GUI)

Java: Graphical User Interfaces (GUI) Chair of Software Engineering Carlo A. Furia, Marco Piccioni, and Bertrand Meyer Java: Graphical User Interfaces (GUI) With material from Christoph Angerer The essence of the Java Graphics API Application

More information

Educational Fusion. Implementing a Production Quality User Interface With JFC

Educational Fusion. Implementing a Production Quality User Interface With JFC Educational Fusion Implementing a Production Quality User Interface With JFC Kevin Kennedy Prof. Seth Teller 6.199 May 1999 Abstract Educational Fusion is a online algorithmic teaching program implemented

More information

SYNCFUSION ESSENTIAL STUDIO ENTERPRISE EDITION

SYNCFUSION ESSENTIAL STUDIO ENTERPRISE EDITION Move beyond simply coding applications to delivering business innovation with Syncfusion's award-winning.net components and new JavaScript libraries. Syncfusion tools help developers create elegant user

More information

Heavyweight with platform-specific widgets. AWT applications were limited to commonfunctionality that existed on all platforms.

Heavyweight with platform-specific widgets. AWT applications were limited to commonfunctionality that existed on all platforms. Java GUI Windows Events Drawing 1 Java GUI Toolkits Toolkit AWT Description Heavyweight with platform-specific widgets. AWT applications were limited to commonfunctionality that existed on all platforms.

More information

(Incomplete) History of GUIs

(Incomplete) History of GUIs CMSC 433 Programming Language Technologies and Paradigms Spring 2004 Graphical User Interfaces April 20, 2004 (Incomplete) History of GUIs 1973: Xerox Alto 3-button mouse, bit-mapped display, windows 1981:

More information

Overview of the Adobe Dreamweaver CS5 workspace

Overview of the Adobe Dreamweaver CS5 workspace Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one

More information

C30c: Model-View-Controller and Writing Larger JavaFX Apps

C30c: Model-View-Controller and Writing Larger JavaFX Apps CISC 3120 C30c: Model-View-Controller and Writing Larger JavaFX Apps Hui Chen Department of Computer & Information Science CUNY Brooklyn College 12/6/2018 CUNY Brooklyn College 1 Outline Model-View-Controller

More information

DbSchema Forms and Reports Tutorial

DbSchema Forms and Reports Tutorial DbSchema Forms and Reports Tutorial Contents Introduction... 1 What you will learn in this tutorial... 2 Lesson 1: Create First Form Using Wizard... 3 Lesson 2: Design the Second Form... 9 Add Components

More information

Introduction to GUIs. Principles of Software Construction: Objects, Design, and Concurrency. Jonathan Aldrich and Charlie Garrod Fall 2014

Introduction to GUIs. Principles of Software Construction: Objects, Design, and Concurrency. Jonathan Aldrich and Charlie Garrod Fall 2014 Introduction to GUIs Principles of Software Construction: Objects, Design, and Concurrency Jonathan Aldrich and Charlie Garrod Fall 2014 Slides copyright 2014 by Jonathan Aldrich, Charlie Garrod, Christian

More information

Apple Human Interface Guidelines

Apple Human Interface Guidelines Apple Human Interface Guidelines 2005-06-04 Apple Computer, Inc. 1992, 2001-2003, 2005 Apple Computer, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system,

More information

CS 349 / SE 382 Custom Components. Professor Michael Terry February 6, 2009

CS 349 / SE 382 Custom Components. Professor Michael Terry February 6, 2009 CS 349 / SE 382 Custom Components Professor Michael Terry February 6, 2009 Today s Agenda Midterm Notes A2 Scroll XOR demo A3 super special sneak preview Clarifications on Fitt s Law Undo Custom components

More information

Page 1. Human-computer interaction. Lecture 2: Design & Implementation. Building user interfaces. Users and limitations

Page 1. Human-computer interaction. Lecture 2: Design & Implementation. Building user interfaces. Users and limitations Human-computer interaction Lecture 2: Design & Implementation Human-computer interaction is a discipline concerned with the design, implementation, and evaluation of interactive systems for human use and

More information

Enterprise Architect. User Guide Series. Wireframe Models

Enterprise Architect. User Guide Series. Wireframe Models Enterprise Architect User Guide Series Wireframe Models What Wireframe Modeling tool to use? Sparx Systems Enterprise Architect provides patterns and icons to help create Wireframe models of application

More information

Lecture 19 GUI Events

Lecture 19 GUI Events CSE 331 Software Design and Implementation Lecture 19 GUI Events The plan User events and callbacks Event objects Event listeners Registering listeners to handle events Anonymous inner classes Proper interaction

More information

CS 116x Winter 2015 Craig S. Kaplan. Module 03 Graphical User Interfaces. Topics

CS 116x Winter 2015 Craig S. Kaplan. Module 03 Graphical User Interfaces. Topics CS 116x Winter 2015 Craig S. Kaplan Module 03 Graphical User Interfaces Topics The model-view-controller paradigm Direct manipulation User interface toolkits Building interfaces with ControlP5 Readings

More information

HO-12: Using Components in Flash

HO-12: Using Components in Flash HO-12: Using Components in Flash Objectives To learn about using Flash s inbuilt components and explore how these can be used to increased user interactivity. To extend your understanding of programming

More information

TxWindows, a multi platform text mode windowing library

TxWindows, a multi platform text mode windowing library TxWindows, a multi platform text mode windowing library Jan van Wijk The TxWindows library for development of text mode applications using a windowing system including menus, dialogs and more... Presentation

More information

Enterprise Architect. User Guide Series. Wireframe Models. Author: Sparx Systems Date: 15/07/2016 Version: 1.0 CREATED WITH

Enterprise Architect. User Guide Series. Wireframe Models. Author: Sparx Systems Date: 15/07/2016 Version: 1.0 CREATED WITH Enterprise Architect User Guide Series Wireframe Models Author: Sparx Systems Date: 15/07/2016 Version: 1.0 CREATED WITH Table of Contents Wireframe Models 3 Android Wireframe Toolbox 4 Apple iphone/tablet

More information

Introduction to Automation. What is automation testing Advantages of Automation Testing How to learn any automation tool Types of Automation tools

Introduction to Automation. What is automation testing Advantages of Automation Testing How to learn any automation tool Types of Automation tools Introduction to Automation What is automation testing Advantages of Automation Testing How to learn any automation tool Types of Automation tools Introduction to Selenium What is Selenium Use of Selenium

More information

Zoom Windows User s Manual

Zoom  Windows User s Manual Zoom Email Windows User s Manual Welcome... 2 Configuring the Add-in... 3 Configuration Page... 3 Troubleshooting... 4 Zoom Email Windows Copyright 2017 Sperry Software Inc. P a g e 1 Welcome Thank you

More information

VIEWZ 1.3 USER MANUAL

VIEWZ 1.3 USER MANUAL VIEWZ 1.3 USER MANUAL 2007-08 Zeus Numerix ViewZ 1.3.0 User Manual Revision: 200806061429 The latest copy of this PDF may be downloaded from the website. An online (HTML) version is also available. Zeus

More information

MyProgram m i ng Lab. get with the programming. Through the power of practice and immediate personalized

MyProgram m i ng Lab. get with the programming. Through the power of practice and immediate personalized get with the programming Through the power of practice and immediate personalized feedback, MyProgrammingLab improves your performance. MyProgram m i ng Lab Learn more at www.myprogramminglab.com Preface

More information

Event-driven Programming: GUIs

Event-driven Programming: GUIs Dr. Sarah Abraham University of Texas at Austin Computer Science Department Event-driven Programming: GUIs Elements of Graphics CS324e Spring 2018 Event-driven Programming Programming model where code

More information

DbSchema Forms and Reports Tutorial

DbSchema Forms and Reports Tutorial DbSchema Forms and Reports Tutorial Introduction One of the DbSchema modules is the Forms and Reports designer. The designer allows building of master-details reports as well as small applications for

More information