Download CS 338: Graphical User Interfaces Lecture 2 - Design & Implementation - Prof. David E. Bre and more Study notes Computer Science in PDF only on Docsity!
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 1
Lecture 2:
Design & Implementation
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 2
Human-computer interaction is a discipline
concerned with the design, implementation, and
evaluation of interactive systems for human use
and with the study of the major phenomena
surrounding them.
The HCI lifecycle is an
iterative cycle that
involves designing and
evaluating with “users”
as much as possible.
Design
Prototype
Evaluate
Human-computer interaction
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 3
Building user interfaces
Much of this process is smart, good ol’
software engineering
– applicable to the GUI parts of the system
– applicable to non-GUI parts of the system
This course focuses on the implementation
of the GUI parts
BUT... We always keep in mind the other
aspects of the process, particularly design
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 4
Mental & implementation models
Implementation models describe how we , as
programmers, think about the system
– there are many levels to these models
– e.g., when you write “x++”, we increment x
– but what happens in the processor? cache? ...
Mental models describe how the user
thinks about the system
– not the same as the implementation model!
– e.g., saving changes (Word file vs. file system)
– e.g., TV and movie projection
– e.g., household electricity
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 5
Represented models
Represented models fall between
implementation and mental models
Implementation Model Mental Model Represented Models CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 6
Designing for the mental model
Computer Science people build systems.
Not surprisingly, then, most systems conform
to implementation models.
Book example: Windows file system
– drag file within drive (e.g., CC drive)
file moves to new location
– drag file to another drive (e.g., CD drive)
file is copied to new location
– why? implementation of file system
– this puts the burden of understanding low-level
file system details on the user!!!
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 7
Another example: Word references
– link number to other part of the document
– mental model: this stays linked
– implementation model: link gets broken, but
software doesn’t correct — makes you do it!
Designing for the mental model
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 8
New technology & mental models
Sometimes, new technology warrants
breaking old mental models — carefully!
Example: the good ol’ calendar
“Significant change must be significantly better.”
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 13
Why are good GUIs hard to build?
Multiprocessing: UIs are inherently
concurrent!
– multiple inputs, redraws
– synchronization, deadlock prevention
Must deal with abort, undo, redo anytime
(this requires lots of state info to be kept)
Real-time requirements
Must be robust (users do lots of odd things!)
Thanks to Scott MacKenzie @ York U for the next few slides!! CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 14
Why are good GUIs hard to build?
API & UI logic complexity
Reactive instead of proactive: the user
dictates what the system should do
Hard to modularize (OOP interface design)
Exhaustive testing of UIs is hard – how to
ensure robustness?
Evaluation with users is time consuming
And more...
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 15
Research Question of the Day
We’ll spend lots of time worrying about the
user interface part of an application.
What’s the big deal? How important is this
when implementing an application?
Specifically, how much programming in a
typical system is devoted to the interface?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 16
Research Question of the Day
Myers & Rosson (1992) conducted this survey
They analyzed 74 systems of various flavors
Myers, B.A., & Rosson, M. B. (1992). Survey on user interface programming. In Human Factors in Computing Systems: Proceedings of SIGCHI’92 (pp. 195-202). New York: ACM Press.
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 17
Research Question of the Day
Result: User interface required...
– 44.8% of design time
– 50.1% of implementation time
– 37.0% of maintenance time
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 18
Research Question of the Day
Interesting point: although UI = 50% of code
on average, this varied greatly per system...
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 19
Research Question of the Day
Other interesting points
– prototypes & evaluation
- 46% built running prototypes
- 17% used paper-based designs
– use of graphics
- 70% 2D graphics, 14% 3D graphics
– use of programming languages
- 69% used C
- others used many (>10) other languages
- 58% used multiple languages in the same system! CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 20
How do we implement GUIs?
For many programs in CS coursework…
For typical GUI applications…
This leads to a very different style of
design and implementation!
args files stdout, user program files user user input (mouse, keys, etc.) program output (text, images, etc.)
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 25
Java program compilation/execution
The typical Java program:
Windows MacOS Linux Java bytecode (.class) interpreter interpreter interpreter Java program (.java) compiler interpreter = Java Virtual Machine (VM) CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 26
End result of a Java program
Application
Applet
Java bytecode (.class) interpreter Java program (.java) compiler OR machine executable Java program (.java) compiler Java bytecode (.class) browser Java program (*.java) compiler Internet CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 27
Question
Why do we compile *.java program files to
*.class bytecode files and interpret the
*.class files?
Why not just interpret *.java files directly?
They’re platform-independent, aren’t they?
Same question, different context:
Why do web servers transmit *.class files,
not *.java files?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 28
Java overview
Many things resemble C++
– basic types
(e.g., int, double, char)
– variables, declarations
– control structures
(e.g., if-then, for, while, switch, …)
– classes and inheritance
(well, the basics anyway)
We’ll very quickly review the essentials,
emphasizing the differences from C++
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 29
Basic data types & literals
Many types you already recognize (mostly)
– char
– int, long, short
– float, double
– boolean
Literals are straightforward too
– null, true, false, ‘A’, “Hi”
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 30
Basic operators
Again, you recognize these:
– arithmetic: +, –, *, /, %
– relational: ==, !=, >, <, >=, <=
– logical: &, |, !, &&, ||
– and more: ++, --, etc.
what’s the difference between & and &&? CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 31
Strings
Concatenation operator: +
– “hi”+s , s+=s
Comparison methods
– equals(), startsWith(), …
Utility functions
– replace(), trim(), toUpperCase(), toLowerCase()
Good to know:
– String.valueOf (<>) converts
argument to string
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 32
Arrays
Declaration / creation
– int[] a = new int[3];
Accessor
– a[1]
Run-time bounds checking!
(How can Java do that?!?)
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 37
Exercise: “Primes”
Start with the “ClickMe” program
Write a program “Primes”
– initialization: create array with primes
- use “Sieve of Eratosthenes” — cross out all multiples
– button click: display primes in order
– don’t do anything to change the “ClickMe” GUI...
just use initialize() and buttonAction()
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 38 public class Animal { public String foo () { return "Animal"; } … } public class Platypus extends Animal { … } public static void main (String[] args) { Platypus x = new Platypus (); System.out.println (x.foo()); }
Classes and inheritance
What is this program’s output?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 39 public class Animal { public String foo () { return "Animal"; } } public class Platypus extends Animal { public String foo () { return "Platypus"; } } public static void main (String[] args) { Animal x = new Animal (); System.out.println (x.foo()); }
Function overriding
What is this program’s output?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 40 public class Animal { public String foo () { return "Animal"; } } public class Platypus extends Animal { public String foo () { return "Platypus"; } } public static void main (String[] args) { Platypus x = new Platypus (); System.out.println (x.foo()); }
Function overriding (2)
How about this program?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 41 public class Animal { public String foo () { return "Animal"; } } public class Platypus extends Animal { public String foo () { return "Platypus"; } } public static void main (String[] args) { Animal x = new Platypus (); System.out.println (x.foo()); }
Function overriding (3)
How about this program?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 42
Interfaces
An interface with a single method:
We implement the interface as follows:
Q: How is an interface different from a class?
public interface ActionListener { void actionPerformed (ActionEvent e); } public class MyClassThatListens … implements ActionListener { … public void actionPerformed (ActionEvent e) { … } … } CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 43
Exercise: “Animals”
Write classes/interfaces as follows:
– Classes
- Animal : boolean isAlive()
- Fish
- Giraffe
- Dog
- Collie
– Interfaces
- Swimmer: String swimMethod()
- Runner: String runMethod()
Make sure to extend appropriate classes and
implement appropriate interfaces
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 44
Variable declaration
Class vs. instance variables
public class Animal { public int numberOfClaws; public static int numberOfMammals; public static void main (String[] args) { … } } instance variable class variable
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 49
Java and GUIs
Current Java 2: integrated JFC & Swing
Swing
– GUI component toolkit, including all widgets
– no native windowing code, to improve on AWT
JFC (Java Foundation Classes)
– includes Swing components
– includes other software such as…
- “pluggable look and feel”
- accessibility support for disabled
AWT still there, but we can mostly ignore it
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 50
Advantages of Java for our course
Short(er) learning time
Portability across platforms (with caveats)
Breadth of built-in components
Extensibility to Web applications
And yes, it’s just plain cool!
