520 likes | 524 Views
G52GUI Course. Tom Rodden. The Course. The principles of interactive software Architectures Windowing Models Widgets Event Driven Programming Layout and Display Primitive Graphics The practice of interactive software Development of Interactive Applications Knowledge of JAVA Swing.
E N D
G52GUI Course Tom Rodden
The Course • The principles of interactive software • Architectures • Windowing Models • Widgets • Event Driven Programming • Layout and Display • Primitive Graphics • The practice of interactive software • Development of Interactive Applications • Knowledge of JAVA Swing
Supporting Material • Principles of Interactive Systems • Dan Olsen • PDF for full book available on-line • Course website • www.cs.nott.ac.uk/~tar/G52GUI/ • Dan Olsen BYU • http://icie.cs.byu.edu/cs456/CS456.html • Practice of Interactive Systems Development • Java Swing Tutorial • http://java.sun.com/docs/books/tutorial/uiswing/
Assessment • Course is 100% Coursework Assessment • Set of simple examples given out during lectures • Two substantial projects • Working code demonstrating good design of interactive appplication • Support Document • Principles of the deign and construction • User Manual • Strategy for user evaluation of the application • Coursework issues week 3 submission dates will be given in coursework • Labs & Examples • Labs support to course will act as surgeries for the assessed coursework • You will be expected to download , run and extend the code provided in the Swing Tutorial as part of your learning
Input/output devices • Input Output Early days connecting wires lights on display paper tape & punch cards paper keyboard teletype Today keyboard scrolling glass teletype + cursor keys character terminal + mouse bit-mapped screen + microphone audio Soon? data gloves + suits head-mounted displays computer jewelry ubiquitous computing natural language autonomous agents cameras multimedia • The lesson • keyboards & terminals are just artifacts of today’s technologies • new input/output devices will change the way we interact with computers
Input/output devices • Input Output Early days connecting wires lights on display paper tape & punch cards paper keyboard teletype Todaykeyboard scrolling glass teletype + cursor keys character terminal + mouse bit-mapped screen + microphone audio Soon? data gloves + suits head-mounted displays computer jewelry ubiquitous computing natural language autonomous agents cameras multimedia • The lesson • keyboards & terminals are just artifacts of today’s technologies • new input/output devices will change the way we interact with computers
History of Interfaces From ImageShack web site //www.imageshack.us ; original source unknown
Eniac (1943) • A general view of the ENIAC, the world's first all electronic numerical integrator and computer. From IBM Archives.
History of HCIMark I (1944) • The Mark I paper tape readers. From Harvard University Cruft Photo Laboratory.
History of HCIIBM SSEC (1948) • From IBM Archives.
Stretch (1961) A close-up of the Stretch technical control panel. • From IBM Archives.
Vannevar Bush (1945) • “As we may think” article in Atlantic Monthly • Identified the information storage and retrieval problem:new knowledge does not reach the people who could benefit from it • Foundations of Hypertext in the Memex System “publication has been extended far beyond our present ability to make real use of the record”
Ivan Sutherland’s SketchPad-1963 PhD Sophisticated drawing package From http://accad.osu.edu/~waynec/history/images/ivan-sutherland.jpg
Introduced many ideas/concepts core to today’s interfaces • hierarchical structures defined pictures and sub-pictures • object-oriented programming: master picture with instances • constraints: specify details which the system maintains through changes • icons: small pictures that represented more complex items • copying: both pictures and constraints • input techniques: efficient use of light pen • world coordinates: separation of screen from drawing coordinates • recursive operations: applied to children of hierarchical objects From http://accad.osu.edu/~waynec/history/images/ivan-sutherland.jpg
Xerox PARC, mid-’70s • Alto computer, a personal workstation • local processor, bit-mapped display, mouse • modern graphical interfaces • text and drawing editing, electronic mail • windows, menus, scroll bars, mouse selection, etc • local area networks (Ethernet) for personal workstations • could make use of shared resources
History of HCICommercial machines: Xerox Star-1981 • First commercial personal computer designed for “business professionals” • First comprehensive GUI used many ideas developed at Xerox PARC • familiar user’s conceptual model (simulated desktop) • promoted recognizing/pointing rather than remembering/typing • property sheets to specify appearance/behaviour of objects • what you see is what you get (WYSIWYG) • small set of generic commands that could be used throughout the system • high degree of consistency and simplicity • modeless interaction • limited amount of user tailorability
X X X File Icon Folders Printer Xerox Star Birth of the Desktop
Apple Lisa (1983) • based upon many ideas in the Star • predecessor of Macintosh, • commercial failure http://fp3.antelecom.net/gcifu/applemuseum/lisa2.html
Interaction Principles INTERFACE
Interaction Principles Input
Interaction Principles Output
Interaction Principles Feedback Loop Fast feedback gives the impression of direct manipulation
Simple example • How do set the temperature in a heating control • Increase temperature • Decrease temperature • Display the temperature
Speech interface INTERFACE
The window elf • Tangible interface used moving an elf ELF
Programming the Interface • hierarchical structures of components or widgets • object-oriented programming representing each component • Event based input through mouse and keyboard • Focus on the development of a windows based applications.
+ 70 -
+ 70 - + BUTTONPRESSED
+ 70 - + BUTTONPRESSED Temp =Temp+1
+ 70 - + BUTTONPRESSED Temp = Temp+1
+ 70 - 71 + BUTTONPRESSED Temp = Temp+1
+ 70 - 71 71 + BUTTONPRESSED Temp = Temp+1
+ 71 - 71 71 + BUTTONPRESSED Temp = Temp+1
+ 71 - 71 71 -BUTTONPRESSED
+ 71 - 71 71 + BUTTONPRESSED Temp = Temp-1
+ 71 - 71 70 + BUTTONPRESSED Temp = Temp-1
+ 71 - 70 70 + BUTTONPRESSED Temp = Temp+1
+ 71 - 70 70 + BUTTONPRESSED Temp = Temp+1
Implementing the interface • Two main elements need coded in order to build the interface • The hierarchy of components • Made up of swing components • The behaviour for each of the elements making up the interface • Java code associated with each screen element
JPanel 70 - + 70 - + JButton JText JButton Hierarchy of Components Hierarchy of Components SWING The interface components + 70 -