Pageumpeysak/Classes/GUI/lectures/... · 2009-06-12 · Page ‹#› CS 338: Graphical User...
Transcript of Pageumpeysak/Classes/GUI/lectures/... · 2009-06-12 · Page ‹#› CS 338: Graphical User...
Page ‹#›
1CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.
Lecture 2:Design & Implementation
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 2
Human-computer interaction is a disciplineconcerned with the design, implementation, andevaluation of interactive systems for human useand with the study of the major phenomenasurrounding them.
The HCI lifecycle is aniterative cycle thatinvolves designing andevaluating with “users”as much as possible.
DesignPrototype
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 implementationof the GUI parts
BUT... We always keep in mind the otheraspects of the process, particularly design
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 4
Mental & implementation models
Implementation models describe how we, asprogrammers, 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 userthinks 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
Page ‹#›
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 5
Represented models
Represented models fall betweenimplementation and mental models
ImplementationModel
MentalModel
RepresentedModels
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 conformto 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 warrantsbreaking old mental models — carefully!
Example: the good ol’ calendar
“Significant change must be significantly better.”
Page ‹#›
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 9
Design & implementation: Summary
Good, clean implementations facilitategood, clean user interfaces.– efficient code leads to faster response– well structured code leads to simple interfaces
(and simple is good! -- easy to learn, remember)– robust code doesn’t crash
Good implementation doesn’t make up forbad design, and good design doesn’t help abad implementation.
Implementation & design go hand-in-hand!
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 10
Design & implementation tradeoffs
Example: Mac OS X launcher– design issues?– implementation issues?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 11
Design & implementation
Example: Two web-based input interfaces– design issues?– implementation issues?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 12
When GUIs work well...
Shorter training time lower costs Fewer errors less hassle, lower costs Less maintenance less hassle, lower costs High transfer lower future costs
In other words:Good design saves time.Good design saves money.
Page ‹#›
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 13
Why are good GUIs hard to build?
Multiprocessing: UIs are inherentlyconcurrent!– 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 theuser interface part of an application.
What’s the big deal? How important is thiswhen implementing an application?
Specifically, how much programming in atypical 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 inComputing Systems: Proceedings of SIGCHI’92 (pp. 195-202). New York: ACM Press.
Page ‹#›
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 codeon 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 ofdesign and implementation!
argsfiles
stdout,filesprogramuser user
user
input(mouse, keys, etc.)
programoutput
(text, images, etc.)
Page ‹#›
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 21
Implementation basics
Our task for this course:Learn how to build great GUIs!… with a user-centered design.
How we’ll do this:Implement GUIs in Java & Swing
What is Java?What is Swing?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 22
Java overview
Who here knows Java? What is this program’s output?
public static void main (String[] args){
int sum=0;for (int i=0 ; i<=10 ; i++)
sum += i;System.out.println (“Result: ” + String.valueOf (sum));
}
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 23
History of Java
Has its beginnings as a way to createinteraction / animation on the Web
Its big selling point: Portability– “works everywhere” (citing Sun)– interpreted
Other selling points (citing Sun again)– simple (?)– object-oriented– robust– high performance (?)
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 24
Windows
MacOS
Linux
Java program compilation/execution
The typical C program:
C program(*.c)
machinecode
machinecode
compiler
machinecode
Page ‹#›
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 25
Java program compilation/execution
The typical Java program:Windows
MacOS
Linux
Javabytecode(*.class)
interpreter
interpreter
interpreter
Javaprogram(*.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
Javabytecode(*.class)
interpreterJava
program(*.java)
compiler
OR
machineexecutable
Javaprogram(*.java)
compiler
Javabytecode(*.class)
browserJava
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++
Page ‹#›
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 differencebetween & and &&?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 31
Strings
Concatenation operator: +– “hi”+s , s+=s2
Comparison methods– equals(), startsWith(), …
Utility functions– replace(), trim(), toUpperCase(), toLowerCase()
Good to know:– String.valueOf (<<basic type>>) 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?!?)
Page ‹#›
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 33
Simple example
import java.io.*;
public class Program1{
public static void main (String[] args){
int sum=0;for (int i=0 ; i<=10 ; i++)
sum += i;System.out.println (“Result: ” +
String.valueOf (sum));}
}
class declaration
main() declaration
main() body
import packages
PS: File must be named after the class – “Program1.java” in this case.
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 34
Example: ClickMe
import javax.swing.*;import java.awt.*;import java.awt.event.*;
public class ClickMe{ // Add any class or instance variables here. public static void initialize () { // Add any initialization code here. // This code will be called only once at the start of the program.
}...
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 35
Example: ClickMe
public static void buttonAction () { // Add code to handle a button click here. // This code will be called every time the user clicks the button. // Call the "windowPrint" function to display text to the window.
windowPrint ("click"); } public static void windowPrint (String s) { label.setText (s); }
...
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 36
Example: ClickMe
public static void main (String[] args) { initialize (); JButton button = new JButton ("Click Me!"); button.addActionListener (new ActionListener () { public void actionPerformed (ActionEvent e) { buttonAction(); } }); label.setText ("-----------------------------------------"); JPanel panel = new JPanel (); ... frame.pack (); frame.setVisible(true); }}
Page ‹#›
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 Platypusextends 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 Platypusextends 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 Platypusextends 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?
Page ‹#›
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 41
public class Animal{
public String foo (){ return "Animal"; }
}
public class Platypusextends 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 andimplement 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
Page ‹#›
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 45
public class Test{
public int instInt = 1;public static int classInt = 2;
public static void main (String[] args){
int result = instInt + classInt;System.out.println (String.valueOf (result));
}}
Question...
This program won’t work. Why not?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 46
Exceptions
If a called method throws an exception,the caller needs to catch the exception
public class <SomeIOClass>{
public void <SomeIOMethod>{ … <if error> throw new IOException (); … }
}
public static void main (String[] args){
try {<SomeIOMethod> ();
} catch (IOException e) {<handle the error>
}}
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 47
Garbage collection
Time to take out the trash!(unused objects, that is)
public class Animal {…}public class Platypus extends Animal {…}public class Cheetah extends Animal {…}
public class Program1{
public static void main (String[] args){
Animal a = new Platypus ();a = new Cheetah ();
}}
PS: Why is automatic garbage collection especially important for Java?
Where is the platypus?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 48
Java and GUIs
Platform independence for GUI applicationshas been notoriously hard
Java’s first foray:AWT (Abstract Window Toolkit)– provided common code for widgets —
components such as windows, buttons, menus, …– good first start, but platform independence
wasn’t quite there• AWT relied on windowing code on native machine
– so in practice, somewhat flaky
Page ‹#›
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!