Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

'Easy' GUI Toolkits by Peter Centgraf

755 views

Published on

  • Be the first to comment

  • Be the first to like this

'Easy' GUI Toolkits by Peter Centgraf

  1. 1. “ Easy” GUI Toolkits Peter Centgraf 05-830 Advanced UI Software Fall 2004
  2. 2. Introduction to the Problem(s) <ul><li>How do we define “Easy”? </li></ul><ul><ul><li>Low developer learning curve? </li></ul></ul><ul><ul><li>Maps well to some metaphor? </li></ul></ul><ul><ul><li>Low working memory load? </li></ul></ul><ul><ul><li>Low configuration/setup overhead? </li></ul></ul><ul><ul><li>No code? </li></ul></ul><ul><ul><li>Usable by ... non-developers? ... children? </li></ul></ul>
  3. 3. Types of “Easy” UI Development <ul><li>Visual Prototyping </li></ul><ul><ul><li>Used in early design iteration </li></ul></ul><ul><ul><li>Simulates, rather than implements </li></ul></ul><ul><ul><li>Limited interactivity and computation </li></ul></ul><ul><ul><li>Sometimes bridged into RAD systems </li></ul></ul>
  4. 4. Types of “Easy” UI Development <ul><li>Rapid Application Development </li></ul><ul><ul><li>Buzzword Alert! </li></ul></ul><ul><ul><li>Design priority on high turnaround rather than unique and complex applications. </li></ul></ul><ul><ul><li>&quot;Real&quot; development => complete applications </li></ul></ul><ul><ul><li>Often focused on corporate IT/database apps </li></ul></ul>
  5. 5. Types of “Easy” UI Development <ul><li>End User Programming </li></ul><ul><ul><li>&quot;The document is the program“ </li></ul></ul><ul><ul><li>Simple interactive documents and tools </li></ul></ul><ul><ul><li>Excel spreadsheets are EUP </li></ul></ul><ul><ul><li>... but so are Access forms! </li></ul></ul><ul><ul><li>... and Flash animations! </li></ul></ul><ul><ul><li>... and Alice 3D worlds! </li></ul></ul>
  6. 6. Are these problems distinct? <ul><li>Yes … No … Sometimes </li></ul><ul><ul><li>Different domains, similar issues </li></ul></ul><ul><ul><li>Complexity/power tradeoffs at different scales </li></ul></ul><ul><ul><li>Remember this? < http://www-2.cs.cmu.edu/~NatProg/projectoverview.html > </li></ul></ul>
  7. 7. Everybody Wants to Rule the World <ul><li>Many systems address these problems </li></ul><ul><ul><li>(Developers love to write developer tools!) </li></ul></ul><ul><li>Common design themes are often repeated </li></ul><ul><li>The remainder of this talk will discuss: </li></ul><ul><ul><li>The most common approaches </li></ul></ul><ul><ul><li>(Many) systems that exemplify them </li></ul></ul>
  8. 8. 1…2…3… “Easy” <ul><li>1. Edit Visually </li></ul><ul><li>2. Simplify the Model </li></ul><ul><li>3. Use a High-Level Language </li></ul>
  9. 9. 1. Edit Visually <ul><li>We’ve seen this all before… </li></ul><ul><ul><li>See Lecture 9 for more details </li></ul></ul><ul><li>Editing graphical layouts with a graphical tool </li></ul><ul><ul><li>It just makes sense </li></ul></ul><ul><ul><li>It provides great productivity improvements </li></ul></ul><ul><ul><li>It has been reimplemented ad nauseum </li></ul></ul>
  10. 10. 1. Edit Visually <ul><li>Some are stand-alone tools </li></ul><ul><ul><li>Glade </li></ul></ul><ul><ul><ul><li>UI Builder for GTK+ Toolkit </li></ul></ul></ul><ul><ul><ul><li>Code generators for many languages </li></ul></ul></ul><ul><ul><ul><li>Dynamic interface from XML description </li></ul></ul></ul><ul><ul><ul><li>http://glade.gnome.org/ </li></ul></ul></ul><ul><ul><li>wxGlade </li></ul></ul><ul><ul><ul><li>UI Builder for wxWidgets Toolkit </li></ul></ul></ul><ul><ul><ul><li>Popular among Python developers </li></ul></ul></ul><ul><ul><ul><li>http:// wxglade.sourceforge.net / </li></ul></ul></ul>
  11. 11. 1. Edit Visually: Glade
  12. 12. 1. Edit Visually: wxGlade
  13. 13. 1. Edit Visually <ul><li>Some have additional development features </li></ul><ul><ul><li>Mac OS X Interface Builder </li></ul></ul><ul><ul><ul><li>Apple Cocoa or Carbon Toolkits </li></ul></ul></ul><ul><ul><ul><li>Tied to AppleScript or Objective-C code objects </li></ul></ul></ul><ul><ul><ul><li>Visual elements described in “nib” resource file </li></ul></ul></ul><ul><ul><ul><li>Component interactions via generated code </li></ul></ul></ul><ul><ul><ul><li>Some auto-generation of database access forms </li></ul></ul></ul><ul><ul><ul><li>“Test Mode” preview from user’s perspective </li></ul></ul></ul>
  14. 14. 1. Edit Visually: Interface Builder
  15. 15. 1. Edit Visually <ul><li>Some are part of complete IDEs </li></ul><ul><ul><li>Eclipse Visual Editor Project </li></ul></ul><ul><ul><ul><li>Sponsored by IBM </li></ul></ul></ul><ul><ul><ul><li>Supports Swing and SWT </li></ul></ul></ul><ul><ul><ul><li>Bi-directional code and visual editing </li></ul></ul></ul><ul><ul><ul><li>http://www.eclipse.org/vep/ </li></ul></ul></ul><ul><ul><li>NetBeans IDE </li></ul></ul><ul><ul><ul><li>Sponsored by Sun </li></ul></ul></ul><ul><ul><ul><li>Supports Swing, JSP, mobile Java </li></ul></ul></ul><ul><ul><ul><li>http:// www.netbeans.org </li></ul></ul></ul>
  16. 16. 1. Edit Visually: Eclipse Visual Editor
  17. 17. 1. Edit Visually: NetBeans IDE
  18. 18. 1. Edit Visually <ul><li>And many more… </li></ul><ul><ul><li>Visual Basic </li></ul></ul><ul><ul><li>Visual Studio .NET </li></ul></ul><ul><ul><li>Java Studio Creator </li></ul></ul><ul><ul><li>Borland Delphi, Kylix, JBuilder </li></ul></ul><ul><ul><li>IntelliJ IDEA </li></ul></ul><ul><ul><li>Need I go on? </li></ul></ul>
  19. 19. 2. Simplify the Model <ul><li>“Model” here refers to the program structure </li></ul><ul><li>A broad class of solutions </li></ul><ul><li>Move toward lower complexity and power </li></ul>
  20. 20. 2. Simplify the Model <ul><li>Work with primarily static forms </li></ul><ul><ul><li>Match program to capabilities of visual designer </li></ul></ul><ul><ul><li>Dynamic elements limited to widget contents </li></ul></ul><ul><ul><li>Visual Basic is most prominent example </li></ul></ul><ul><ul><li>Sufficient for a wide variety of business apps </li></ul></ul><ul><ul><li>Most successful implementations allow extension via languages with more dynamic capabilities </li></ul></ul>
  21. 21. 2. Simplify the Model: Visual Basic <ul><li>Visual Basic <= 6 </li></ul><ul><ul><li>Second-highest google hit rate of all languages according to http://www.dedasys.com/articles/language_popularity.html </li></ul></ul><ul><ul><li>Visual “forms” and pure-code “modules” </li></ul></ul><ul><ul><li>Uses event-based language to script widgets </li></ul></ul><ul><ul><li>Extensive library of COM/ActiveX components </li></ul></ul><ul><ul><ul><li>Common dialog types (OK-Cancel, Yes-No, etc.) </li></ul></ul></ul><ul><ul><ul><li>Web browser </li></ul></ul></ul><ul><ul><ul><li>Database-backed table and tree controls </li></ul></ul></ul>
  22. 22. 2. Simplify the Model <ul><li>Layout containers </li></ul><ul><ul><li>Adds automatic continuous resizing to forms </li></ul></ul><ul><ul><li>A simple but important upgrade </li></ul></ul><ul><ul><li>More gracefully supports dynamic components </li></ul></ul><ul><ul><li>Also used in more complex toolkits, e.g. Swing </li></ul></ul>
  23. 23. 2. Simplify the Model: Tk <ul><li>Tk </li></ul><ul><ul><li>Created by John Ousterhout, 1988 </li></ul></ul><ul><ul><li>Intended to be paired with his TCL script </li></ul></ul><ul><ul><li>Three simple layout managers </li></ul></ul><ul><ul><ul><li>Pack – places widgets in a vertical or horizontal group </li></ul></ul></ul><ul><ul><ul><li>Grid – aligns widgets in columns and rows </li></ul></ul></ul><ul><ul><ul><li>Place – manual absolute positioning </li></ul></ul></ul><ul><ul><li>Nested “frames” with different layout managers </li></ul></ul><ul><ul><li>Complex layouts possible with simple combination </li></ul></ul>
  24. 24. 2. Simplify the Model: Tk
  25. 25. 2. Simplify the Model: WindowsForms <ul><li>.NET Windows.Forms </li></ul><ul><ul><li>Used with Visual Basic.NET, C#, etc. </li></ul></ul><ul><ul><li>Adds dynamic layout via “dock” and “anchor” </li></ul></ul><ul><ul><li>“ Docked” widgets snap to edge of frame </li></ul></ul><ul><ul><ul><li>When edge moves, widget resizes </li></ul></ul></ul><ul><ul><li>“ Anchored” widgets are fixed relative to edge </li></ul></ul><ul><ul><ul><li>When edge moves, widget moved an equal distance </li></ul></ul></ul>
  26. 26. 2. Simplify the Model: WindowsForms
  27. 27. 2. Simplify the Model: WindowsForms
  28. 28. 2. Simplify the Model <ul><li>Stack of Cards Metaphor </li></ul><ul><ul><li>Pioneered by Apple HyperCard </li></ul></ul><ul><ul><ul><li>… SuperCard, MetaCard, PythonCard, Dreamcard </li></ul></ul></ul><ul><ul><li>Emphasis on data navigation and persistence </li></ul></ul><ul><ul><li>“ Stack” can take different forms </li></ul></ul><ul><ul><ul><li>Each card has a different layout, different functionality </li></ul></ul></ul><ul><ul><ul><li>Each card has the same layout, different data </li></ul></ul></ul><ul><ul><li>Easily navigate forward/back or follow links </li></ul></ul><ul><ul><li>Persist all data in widgets with a single command </li></ul></ul>
  29. 29. 2. Simplify the Model: Revolution <ul><li>Runtime Revolution </li></ul><ul><ul><li>Cross-platform development environment </li></ul></ul><ul><ul><li>“ Professional” version of Dreamcard </li></ul></ul><ul><ul><li>Combines stack metaphor with dynamic OO scripting </li></ul></ul>
  30. 30. 2. Simplify the Model <ul><li>Use High-Level Components </li></ul><ul><ul><li>Provide complex functionality in discrete units </li></ul></ul><ul><ul><li>Isolate intensely graphical or interactive code </li></ul></ul><ul><ul><li>Embed major portions of other applications </li></ul></ul><ul><ul><li>Best used in combination with: </li></ul></ul><ul><ul><ul><li>Visual Layout </li></ul></ul></ul><ul><ul><ul><li>Event-based Languages </li></ul></ul></ul><ul><ul><ul><li>Object-Oriented Languages </li></ul></ul></ul>
  31. 31. 2. Simplify the Model: Mozilla Control <ul><li>Provides a full web rendering component </li></ul><ul><li>Similar to MS Internet Explorer control </li></ul><ul><li>Exposes events and methods </li></ul><ul><ul><li>Respond to user action </li></ul></ul><ul><ul><li>Manipulate HTML DOM </li></ul></ul>
  32. 32. 2. Simplify the Model: PDFKit <ul><li>Provides a full PDF rendering view </li></ul><ul><li>Exposes document structure via methods </li></ul><ul><ul><li>Table of Contents </li></ul></ul><ul><ul><li>Bookmarks </li></ul></ul><ul><li>PDFView no-code viewer w/ printing, etc. </li></ul><ul><li>Separate projects for: </li></ul><ul><ul><li>Mac OS X 10.4 </li></ul></ul><ul><ul><li>GNUstep </li></ul></ul>
  33. 33. 2. Simplify the Model <ul><li>Address a highly-specific domain </li></ul><ul><ul><li>Limit the scope of the toolkit </li></ul></ul><ul><ul><li>Support a particular niche </li></ul></ul><ul><ul><ul><li>Database editing forms </li></ul></ul></ul><ul><ul><ul><li>2D animations for children </li></ul></ul></ul>
  34. 34. 2. Simplify the Model: Access Forms <ul><li>MS Access </li></ul><ul><ul><li>Visual form builder tool </li></ul></ul><ul><ul><li>Similar to VB layout tool </li></ul></ul><ul><ul><li>No scripting required </li></ul></ul><ul><ul><li>Widgets populated from a database or query </li></ul></ul>
  35. 35. 2. Simplify the Model: HANDS <ul><li>HANDS </li></ul><ul><ul><li>Programming for children </li></ul></ul><ul><ul><li>Cards represent data </li></ul></ul><ul><ul><li>Scripts animate objects </li></ul></ul><ul><ul><li>Language innovations </li></ul></ul><ul><ul><ul><li>Aggregate operators </li></ul></ul></ul><ul><ul><ul><li>Tabular queries </li></ul></ul></ul>
  36. 36. Quick Break – 5 Minutes
  37. 37. 3. Use a High-Level Language <ul><li>Simplified languages for simplified toolkits </li></ul><ul><ul><li>Reduce complexity </li></ul></ul><ul><ul><li>Increase code readability </li></ul></ul><ul><ul><li>Code in terms of user mental model </li></ul></ul><ul><ul><li>Encourage “fast and loose” development </li></ul></ul><ul><ul><li>Provide a structured, graphical code editor </li></ul></ul>
  38. 38. 3. Use a High-Level Language <ul><li>Wrapper libraries </li></ul><ul><ul><li>Expose a friendlier API to an existing toolkit </li></ul></ul><ul><ul><li>Hide some features, automate others </li></ul></ul><ul><ul><li>EasyGTK </li></ul></ul><ul><ul><ul><li>Dramatically reduces initialization code </li></ul></ul></ul><ul><ul><ul><li>Provides sane defaults for complex components </li></ul></ul></ul><ul><ul><ul><li>Simple “Hello World” from 30 lines to < 10 </li></ul></ul></ul>
  39. 39. 3. Use a High-Level Language: EasyGTK <ul><li>#include &quot;easygtk.h&quot; </li></ul><ul><li>GtkWidget *win, *box, *text, *button; </li></ul><ul><li>void main(int argc, char *argv[]) </li></ul><ul><li>{ </li></ul><ul><li>gtk_init(&argc, &argv); </li></ul><ul><li>win e_window_create(&quot;Hello World&quot;, 400, 200, 100, 100, exit); </li></ul><ul><li>box e_box_create(win, E_VERTICAL, 2); </li></ul><ul><li>text e_text_create(box, FALSE, &quot;Hello World!&quot;, E_NO_FUNC); </li></ul><ul><li>button e_button_create(box, &quot;Close&quot;, exit); </li></ul><ul><li>gtk_main(); </li></ul><ul><li>} </li></ul>
  40. 40. 3. Use a High-Level Language <ul><li>“English-like” syntax </li></ul><ul><ul><li>Intends to emulate natural language </li></ul></ul><ul><ul><ul><li>No special symbols </li></ul></ul></ul><ul><ul><ul><li>Optional articles, prepositions – “a”, “the”, “of”, “to” </li></ul></ul></ul><ul><ul><li>Enhances readability </li></ul></ul><ul><ul><ul><li>Statements are imperative verb clauses </li></ul></ul></ul><ul><ul><ul><li>Most code has direct spoken equivalent </li></ul></ul></ul>
  41. 41. 3. Use a High-Level Language:AppleScript <ul><li>AppleScript </li></ul><ul><ul><li>Designed by Apple as end user scripting language </li></ul></ul><ul><ul><li>Send messages via “tell” block </li></ul></ul><ul><ul><li>Respond to events via “on” block </li></ul></ul><ul><ul><li>Handle errors with “try … on error” blocks </li></ul></ul><ul><li>on clicked theObject </li></ul><ul><li>tell window of the object </li></ul><ul><li>try </li></ul><ul><li>set theRate to the contents of text field &quot;rate&quot; as number </li></ul><ul><li>set theAmount to contents of text field &quot;amount&quot; as a number </li></ul><ul><li>set the contents of text field &quot;total&quot; to 0 </li></ul>
  42. 42. 3. Use a High-Level Language: Transcript <ul><li>Native language of Runtime Revolution </li></ul><ul><li>Provides high-level facilities </li></ul><ul><ul><li>Events </li></ul></ul><ul><ul><li>Aggregate operators </li></ul></ul><ul><ul><li>Regular expression matching </li></ul></ul><ul><li>if workQueue is not empty then </li></ul><ul><li>send &quot;doWork&quot; to me in .0001 seconds </li></ul><ul><li>put the result into gWorkMessage </li></ul><ul><li>else </li></ul><ul><li>close file gLogFile </li></ul><ul><li>enable group &quot;optionalControlGroup&quot; </li></ul><ul><li>end if </li></ul>
  43. 43. 3. Use a High-Level Language <ul><li>Event-based languages </li></ul><ul><ul><li>Almost all languages support this style </li></ul></ul><ul><ul><li>Some make events and handlers first-class </li></ul></ul><ul><ul><ul><li>VB – Event handlers are primary code entry points </li></ul></ul></ul><ul><ul><ul><li>AppleScript – “on” and “tell” blocks </li></ul></ul></ul><ul><ul><ul><li>Transcript – “send” command </li></ul></ul></ul><ul><ul><ul><li>EasyGTK – callback functions </li></ul></ul></ul><ul><ul><ul><li>SUIT – “Interest procedures” </li></ul></ul></ul><ul><ul><li>Maps to stimulus-response mental model </li></ul></ul>
  44. 44. 3. Use a High-Level Language <ul><li>Dynamic typing and conversion </li></ul><ul><ul><li>Common among scripting languages </li></ul></ul><ul><ul><li>Automatically converts data types when needed </li></ul></ul><ul><ul><li>Encourages focus on action rather than data </li></ul></ul><ul><ul><li>Examples: </li></ul></ul><ul><ul><ul><li>VB “Variant” type </li></ul></ul></ul><ul><ul><ul><li>All AppleScript variables </li></ul></ul></ul><ul><li>Global variables </li></ul><ul><ul><li>All AppleScript variables </li></ul></ul><ul><ul><li>Tk components in TCL container heirarchy </li></ul></ul><ul><ul><ul><li>.window.frame.button.label = “Click Me!” </li></ul></ul></ul>
  45. 45. 3. Use a High-Level Language <ul><li>Structured, graphical code editors </li></ul><ul><ul><li>Replace code with graphical blocks and menus </li></ul></ul><ul><ul><li>Syntax errors are impossible! </li></ul></ul><ul><ul><li>Can reduce semantic errors via static analysis </li></ul></ul><ul><ul><li>Visibility of options is extremely high </li></ul></ul><ul><ul><li>Slows down fast typists </li></ul></ul>
  46. 46. 3. Use a High-Level Language: Alice <ul><li>Alice </li></ul><ul><ul><li>Interactive 3D programming </li></ul></ul><ul><ul><li>Targeted to beginning programmers (early teens) </li></ul></ul><ul><ul><li>Supports: </li></ul></ul><ul><ul><ul><li>Events </li></ul></ul></ul><ul><ul><ul><li>Concurrency </li></ul></ul></ul><ul><ul><ul><li>Functional abstraction </li></ul></ul></ul><ul><ul><ul><li>Visual, guided debugging </li></ul></ul></ul>
  47. 47. 3. Use a High-Level Language: Alice
  48. 48. 3. Use a High-Level Language: AgentSheets <ul><li>AgentSheets </li></ul><ul><ul><li>Sets of dynamic, interacting agents </li></ul></ul><ul><ul><li>Combines spreadsheet metaphor and productions </li></ul></ul><ul><ul><li>Spreadsheet organizes agents </li></ul></ul><ul><ul><li>Productions provide behavior </li></ul></ul><ul><ul><ul><li>Similar to events, provides explicit stimulus-response </li></ul></ul></ul><ul><ul><li>Block editor for productions </li></ul></ul><ul><ul><ul><li>Less rigid than Alice </li></ul></ul></ul><ul><ul><ul><li>Allows typing of expressions and values </li></ul></ul></ul>
  49. 49. 3. Use a High-Level Language: AgentSheets
  50. 50. Conclusions <ul><li>“Easy” is not a simple thing </li></ul><ul><ul><li>Tradeoffs between power and simplicity </li></ul></ul><ul><ul><li>Different target audiences with different skills </li></ul></ul><ul><ul><li>Common issues and related solutions </li></ul></ul><ul><li>Multiple Approaches </li></ul><ul><ul><li>Simplify the framework’s capabilities </li></ul></ul><ul><ul><li>Simplify the development language </li></ul></ul><ul><ul><li>Many ways to do both </li></ul></ul>

×