Event-Driven Programming and GUI's: Understanding Interactor Trees

1. CS 160: Lecture 11 Professor John Canny Fall 2001 Oct 9, 2001 Based on notes by Jason Hong and James Landay

2. Outline • Window events • Event dispatching • Widget communication & layout

3. GUI Toolkits • Main Concepts: • Event-driven programming • Widgets • Interactor Tree • Describes how most GUIs work • Closest to Java • But similar to Windows, Mac, Palm Pilot

4. Event-Driven Programming • All generated events go to a single event queue • provided by operating system • ensures that events are handled in the order they occurred • hides specifics of input from apps Mouse Software Event Queue Keyboard Software

5. Button Widgets • Reusable interactive objects • Handle certain events • widgets say what events they are interested in • event queue/interactor tree sends events to the “right” widget • Update appearance • e.g. button up / button down ComboBox

6. Widgets (cont.) • Generate some new events • “button pressed” • “window closing” • “text changed” • But these events are sent to interested listeners instead • custom code goes there ComboBox

7. Main Event Loop while (app is running) { get next event send event to right widget} Mouse Software Events Source Code Keyboard Software

8. Interactor Tree • Decompose interactive objects into a tree • interactive objects also known as “widgets” • based on screen geometry of objects • nested rectangles • Used for dispatching events • events are dispatched (sent) to code in widget • the code then handles the event • Variety of methods for dispatching events • return to this later

9. Interactor Tree 1 Display Screen “F:\cs160\Public” window Inner Window title bar horizontal scroll bar contents area “CDJukebox” folder “Home Ent…” folder … size control … “Web Newspaper” window …

10. Display Screen 93.54 Outer Win [black] ????? 3 6 - 9 7 1 4 0 + 2 8 5 = ENT Interactor Tree 2

11. 93.54 3 - 6 9 1 0 4 7 + 5 8 2 = ENT Interactor Tree 2 Display Screen Outer Win [black] Inner Win [green] Result Win [tan] Result String Keypad [Teal] = button - button + button 0 button

12. 93.54 3 - 6 9 1 0 4 7 + 5 8 2 = ENT Interactor Tree (Java) Display Screen Frame [black] Panel [green] Text Entry [tan] Result String Keypad Panel [Teal] Button(“=”) Button(“-”) Button(“+”) Button(“0”)

13. 93.54 9 6 - 3 4 1 0 7 8 5 + 2 = ENT Who gets the events? • To catch events, a widget registers a “listener” for that event • Mouse click • typed input • drag… • Events go to a widgetcontaining the pointer

14. 93.54 9 6 - 3 4 1 0 7 8 5 + 2 = ENT Who gets the events? • But there are often several widgets containing the pointer • Events go down the “stack” of visible widgets at the pointer until there is a widget that has registered a listener for that event

15. 93.54 3 9 6 - 1 7 4 0 + 5 2 8 = ENT Interactor Tree (Java) Display Screen Frame [black] Panel [green] Mouse click listener Text Entry [tan] Result String Keypad Panel [Teal] Button(“=”) Mouse click listener Button(“-”) Mouse click listener Button(“+”) Mouse click listener Button(“0”) Mouse click listener

16. 93.54 3 9 6 - 1 4 0 7 + 5 2 8 = ENT Interactor Tree (Java) • If a widget isnt visible at the mouse, you may have to “redispatch” events to it. See http://sun.java.com/javaone/track1.html#awt.tut

17. Screen Resolution • Different resolutions out there • 640 x 480 • 800 x 600 • 1024 x 768 • 1280 x 1024 • Web pages look different depending on resolution • Affects what people can see

18. 640 x 480

19. 800 x 600

20. 1024 x 768

21. 1280 x 1024

22. Above the Fold

23. 640x480 800x600 1024x768 1280x1024

24. Network Download Speeds

25. Network Download Speeds • Lots of different speeds out there • Modems (28.8 kbps, 33.6 kbps, 56 kbps) • DSL (384 kbps, 1.5 mbps, 8mbps) • Cable Modems (1 to 27 mbps) • Note #1 – Few people have fast connections • About 3 million have DSL in US (1Q01) • About 6 million have cable modems in US (1Q01) • About 167 million have home Internet access in US • Keep in mind fuzziness of statistics + Internet access at work and school + laptop modems

26. Network Download Speeds • Note #2 – Faster instead of features • Multimedia-rich kilobyte-heavy websites may not be best use of your users' connection in many cases • "We already have lots of users in the workplace where they have 10-megabit connections. They don't want a lot of whiz-bang features. They just want the same site to work even faster.“ (Yahoo) In Search for Online Success, 'Easy Does It' Is Good Theme http://www.nytimes.com/2000/12/11/technology/11SIMP.html

27. Network Download Speeds • Note #3 - These only measure bandwidth • Bandwidth is the amount of data that can be sent per unit time • Latency is the inherent delay in sending data • Getting from NYC to London • Concorde • Cruising speed ~1330 mph (3.5 hours) • Seats about 100 passengers • Boeing 747 • Cruising speed ~500 mph (7.5 hours) • Seats about 500 passengers

28. What does this mean for design? • Still need to design for speed • 1 sec download times rarely possible • Can’t do much about latency • Can address low-bandwidth • Images make up the majority of bytes • Making images faster makes site faster

29. Use ALT tags for images Fast Downloading Web Pages

30. Fast Downloading Web Pages • Know the differences between the various image formats • GIF • 256 colors, best for line art (Illustrator etc) • Supports transparency • Some compression, keeps all the data • JPG • Millions of colors, good for photos (or Photoshop) • But no transparency • Lots of compression, throws data away

31. Fast Downloading Web Pages • Use progressive / interlaced images Progressive JPG Interlaced GIF

32. Fast Downloading Web Pages • Use cropping and shrinking • Usually no advantage to natural imagesin jpeg > 100kb

33. nonsensical nonsensical This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works Dog | Quickly | A Loaf of Bread | Cute girls | Sweet wine Loaf of Bread | Cute girls | Sweet wine This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works Dog | Quickly | A Loaf of Bread | Cute girls | Sweet wine Loaf of Bread | Cute girls | Sweet wine Fast Downloading Web Pages • Can use thumbnail pages

34. Fast Downloading Web Pages

35. Summary • Overview of GUI systems • Event-driven programming, widgets, interactor trees • Web design and technology • Screen resolutions affect what people see • Network speeds influence web pages • Technology is a part of design • Can't be considered as an afterthought • But shouldn't be primary driver of design

36. Further ReadingBooks and Links on Building UIs • Introduction to User Interface Software. Dan Olsen Jr. Morgan Kaufmann Publishers, 1998. • Courses with notes online: • Carnegie Mellon University http://www.cc.gatech.edu/classes/AY2001/cs4470_fall/ • Georgia Institute of Technology http://www.cs.cmu.edu/~hudson/teaching/05-631/

37. Further ReadingResearch Papers on Building UIs • Brad A. Myers. User Interface Software Tools. Carnegie Mellon University School of Computer Science Technical Report, no. CMU-CS-94-182 and Human Computer Interaction Institute Technical Report CMU-HCII-94-107. August 1994. http://reports-archive.adm.cs.cmu.edu/anon/1994/CMU-CS-94-182.ps • Brad A. Myers. A Brief History of Human Computer Interaction Technology.http://www.cs.cmu.edu/~amulet/papers/uihistory.tr.html • Brad Myers, Scott E. Hudson, and Randy Pausch, Past, Present and Future of User Interface Software Tools. ACM Transactions on Computer Human Interaction. In the Special Millennium Issue. http://www.cs.cmu.edu/~amulet/papers/futureofhci.pdf

38. Further ReadingBooks on Web Design • Designing Visual Interfaces. Kevin Mullet and Darrell Sano. • Web Design in a Nutshell. Jennifer Niederst. O'Reilly , 1999. • Design of Sites. Doug Van Duyne, James Landay, Jason Hong. Addison-Wesley. 2001. • Information Architecture for the World Wide Web. Louis Rosenfeld and Peter Morville. O'Reilly, 1998. • Don’t Make Me Think! Steven Krug. Que, 2000.

39. Further ReadingBooks on Web Design • Community Building on the Web. Amy Jo Kim. Peachpit Press, 2000. • Designing Visual Interfaces: Communication Oriented Techniques. Kevin Mullet and Darrell Sano. Prentice Hall / SunSoft Press. 1994. • Understanding Comics. Scott McCloud. Kitchen Sink Press, 1994. • Designing Web Usability. Jakob Nielsen. New Riders Publishing, 1999.

40. Further ReadingWebsites on Web Design • UsableWeb.com, links to other usability sites • Usability.gov, for building accessible websites • Web pages that suck, at http://www.webpagesthatsuck.com/ • Net tips for designers, at http://www.dsiegel.com/tips/ • User Interface Engineering, at http://www.uie.com • ZDNet Ecommerce Best Practices, at http://www.zdnet.com/ecommerce.

41. Further ReadingWebsites on Web Design • New York Times Ecommerce Times, at • http://www.nytimes.com/pages-technology/cybertimes/commerce/ • Webword.com usability log • CNet Builder.com, info on building sites • ACM’s CHI-Web Mailing List • http://www.acm.org/sigchi/web/chi-web.html • Goodexperience.com web log • Jakob Nielsen useit.com