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


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


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 ‹#›


Represented models

Represented models fall betweenimplementation and mental models

ImplementationModel

MentalModel

RepresentedModels


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!!!


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


New technology & mental models

Sometimes, new technology warrantsbreaking old mental models — carefully!

Example: the good ol’ calendar

“Significant change must be significantly better.”

Page ‹#›


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!


Design & implementation tradeoffs

Example: Mac OS X launcher– design issues?– implementation issues?


Design & implementation

Example: Two web-based input interfaces– design issues?– implementation issues?


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 ‹#›


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!!


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...


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?



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 ‹#›



Result: User interface required...– 44.8% of design time– 50.1% of implementation time– 37.0% of maintenance time



Interesting point: although UI = 50% of codeon average, this varied greatly per system...



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!


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 ‹#›


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?


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));

}


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 (?)


Windows

MacOS

Linux

Java program compilation/execution

The typical C program:

C program(*.c)

machinecode

machinecode

compiler

machinecode

Page ‹#›


Java program compilation/execution

The typical Java program:Windows

MacOS

Linux

Javabytecode(*.class)

interpreter

interpreter

interpreter

Javaprogram(*.java)

compiler

interpreter =Java Virtual Machine (VM)


End result of a Java program

Application

Applet


interpreterJava

program(*.java)

compiler

OR

machineexecutable

Javaprogram(*.java)

compiler


browserJava

program(*.java)

compiler Internet


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?


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 ‹#›


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”


Basic operators

Again, you recognize these:– arithmetic: +, –, *, /, %– relational: ==, !=, >, <, >=, <=– logical: &, |, !, &&, ||– and more: ++, --, etc.

what’s the differencebetween & and &&?


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


Arrays

Declaration / creation– int[] a = new int[3];

Accessor– a[1]

Run-time bounds checking!(How can Java do that?!?)

Page ‹#›


Simple example

import java.io.*;

public class Program1{


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.


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.

}...


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); }

...


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 ‹#›


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()


public class Animal{

public String foo (){ return "Animal"; }…

}

public class Platypusextends Animal

{…

}


Platypus x = new Platypus ();System.out.println (x.foo());

}

Classes and inheritance

What is this program’s output?



public String foo (){ return "Animal"; }

}


{public String foo (){ return "Platypus"; }

}


Animal x = new Animal ();System.out.println (x.foo());

}

Function overriding

What is this program’s output?




}



}


Platypus x = new Platypus ();System.out.println (x.foo());

}

Function overriding (2)

How about this program?

Page ‹#›




}



}


Animal x = new Platypus ();System.out.println (x.foo());

}

Function overriding (3)

How about this program?


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) { … } …}


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


Variable declaration

Class vs. instance variables


public int numberOfClaws;public static int numberOfMammals;


…}

}

instance variable

class variable

Page ‹#›


public class Test{

public int instInt = 1;public static int classInt = 2;


int result = instInt + classInt;System.out.println (String.valueOf (result));

}}

Question...

This program won’t work. Why not?


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 (); … }

}


try {<SomeIOMethod> ();

} catch (IOException e) {<handle the error>

}}


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{


Animal a = new Platypus ();a = new Cheetah ();

}}

PS: Why is automatic garbage collection especially important for Java?

Where is the platypus?


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 ‹#›


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


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!

pageumpeysak/classes/gui/lectures/... · 2009-06-12 · page ‹#› cs 338: graphical user...

Documents