1 / 41

CS 160: Lecture 11

CS 160: Lecture 11. Professor John Canny Fall 2001 Oct 9, 2001 Based on notes by Jason Hong and James Landay. Outline. Window events Event dispatching Widget communication & layout. GUI Toolkits. Main Concepts: Event-driven programming Widgets Interactor Tree

talice
Download Presentation

CS 160: Lecture 11

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related