Simple UI Toolkits

1. Simple UI Toolkits • Andrew Ko

2. What does “simple” mean? • For most simple UI toolkits, “simple” means • Better initial usability and learnability • Limited scope and expressiveness • A more descriptive term would be “simple gui-glue-scripts” • Most support limited graphical toolkit abilities • Most are aimed at gluing together applications and components with standard widgets

3. Common Characteristics • Programs are often written in simple scripting languages or subsets of general languages • Very little code required to create basic, default, user interface components • Some automatically generate code from user interface builders, but don’t generalize from changes in code to interface

4. Dimensions of Comparison • Object creation (how does a widget get made?) • Object properties (position, appearance, etc.) • Object architecture (how are objects related?) • Connections (how do objects respond to and broadcast messages and events?)

5. Outline • Tcl/Tk • SUIT • Visual Basic • Cocoa • Alice • Summary

6. Tcl/Tk • John Ousterhout, 1988, while on sabattical • Tcl = Tool Command Language • Intended to be an “embeddable command language” • Open source, multi-platform scripting language, much like Perl, Python, and PHP • Pitched as “application glue”, like other popular scripting languages

7. Tk Tk • John Ousterhout, 1990 • Motivation was to test how good Tcl was at integrating components • Used in Tcl originally, then Perl and Python • Originally popular because easiest way to create GUIs on UNIX platforms • Ported to Windows and Mac in 1994

8. Tk Architecture • Widgets are the atomic unit • All widgets created are global • Container hierarchies • The code to the left represents “the text of label 2 of button 5 of container 3 in window 1 of the application .w1.c3.b5.l2 - text

9. Tk Creating Objects • Objects created programmatically in a script, then compiled and executed • There are no interface builders directly associated with Tk (I don’t know of any)

10. Tk Creating Objects frame .f -borderwidth 2 wm title . "My Window" button .f.b -text "Quit" bind .f.b <Button-2-ButtonRelease { quit } pack .f • First line creates a window frame called “My Window” as child of “.”, which represents the shell • Second line sets title of root window to “My Window” • Third line creates a button inside “My Window” with text “Quit”

11. Tk Events frame .f -borderwidth 2 wm title . "My Window" button .f.b -text "Quit" bind .f.b <Button-2-ButtonRelease { quit } pack .f • “bind” sets the callback for pressing the button with the second mouse button • The callback quits the application • “pack” lays out window “My Window”

12. Tk Events • Because Tk objects are all global, sending messages is a matter of directly changing widget state and properties • Same problem of spaghetti code as with other event-based languages

13. Tk Object properties • Widgets have standard properties, and widget specific properties • Properties of widgets are not visible, except through documentation • Properties are set using Tcl or other scripting languages

14. Tk Evaluation • In regard to Tcl, HCII Ph.D. student Jeff Nichols says • Very little overhead for creating simple applications • Unfamiliar syntax for most programmers • Highly portable • No interface builder “it just has the worst syntax I've ever seen...its really restrictive...its unintuitive for C programmers”

15. SUIT • Simple User Interface Toolkit • Randy Pauch at Virginia Tech, 1992 • Design principles • Exploit knowledge and skills of users • Make easy things easy and hard things possible • Perform end-user testing early and often

16. SUIT Architecture • Built on prototype instance model • One object is like another, as opposed to inherits from • Same model as Amulet and Garnet • Objects’ properties stored in external database

17. SUIT Objects Properties • Each object has: • State, contained in property list, including position, size, and other basic properties • C procedure that examines state and renders • C procedure that handles user input and updates state

18. SUIT Creating Objects void Hi(SUIT_object obj) { printf("Hello, world\n"); } SUIT_createButton("hello", Hi); • Small set of widget creation methods • Code above • Defines callback “hi” • Creates button associated with “hi”

19. SUIT Modifying Properties • Used graphical menu to modify object properties • Instead of being set, • Booleans were toggled in property editor • Elements were selected from a list • Properties also set programmatically • Properties deleted by dragging to trash

20. SUIT Modifying Properties • Explicitly avoided “code dumping” model of UI interface builders • Instead, layout done at runtime with direct manipulation • Build mode accessed with SHIFT and CONTROL • Otherwise, application was in run mode

21. SUIT Connections • Connections between on screen components achieved by “exporting” properties • Exported by dragging a property to an export button • System would generate a new object that controlled the “exported” property • Not general component to component communication, but covered most cases

22. SUIT Connections • No general constraint system • Programmer registers “interest” in an object by specifying an “interest procedure” • When property of interest is changed, property, property name, and old and new values sent to “interest procedure” • Allowed for constraining button size to label size

23. SUIT Connections • In general, three types of connections: • Exporting a property to create a widget that affects property • Registering interest in a property • Callbacks

24. SUIT Evaluation • Debugging name space was difficult: misspelling property created new property with 0 value • Common to all prototype instance models • Hard to create custom widgets without additional knowledge of toolkit architecture • Learnable in a few hours by programmers who know C

25. Visual BASIC • BASIC = Beginner’s All-purpose Symbolic Instruction Code • BASIC developed in ‘64 by students at Dartmouth • Eventually sold to Microsoft, and used as a scripting language for Windows OSes • One type of application and component glue for connecting Microsoft apps • VB.Net is a whole different (object-oriented) beast, and will not be discussed here

26. VB Architecture • “forms” contain widgets • Widgets have lots of properties • Widgets can see parent form’s properties

27. VB VB Creating Objects • Common widgets provided • Image, label, text, frame, option, list... • Many useful forms provided • About dialog, web browser, ok/cancel dialog, ODBC login • Can create custom forms using widgets and defining event handlers

28. VB Object Properties • Every object has default properties • Name, index, dimensions, font... • Visible at start and enabled • Most of the details are managed internally • The focus is on modifying and using user-defined properties

29. VB Modifying Properties • All properties managed by system can modified through direct manipulation or property editors • Programmer modifies user-defined properties programatically • Programmatically modifying system properties is difficult because • There are many ways to modify • Each way uses a different notation and/or convention

30. VB Connections Private Sub OK_Click( ) r = Val(radius.Text) h = Val(hght.Text) pi = 22 / 7 v = pi * (r ^ 2) * h volume.Text= Str$(v) End Sub • Callbacks can be defined for each widget • In this example, pressing the okay button executes “OK_Click()” • Pulls the text and height from the text fields • Puts volume in the volume text field

31. VB Connections • Widgets have many predefined events, which take the shape of callbacks • Initialize, load, activate • Key and mouse events also broadcast • Write functions to respond to default set

32. VB Evaluation • Great for creating simple Windows-only applications • Doesn’t scale to large applications because data management is difficult • Has a low ceiling: creating custom widgets is nearly impossible

33. Cocoa • Designed to be a rapid prototyping framework for windowed OS X applications • Roots are in UI toolkit developed for NeXT systems • Highly parameterizable set of standard widgets • No code necessary for standard behaviors

34. Cocoa Architecture • Object-oriented, model-view-controller architecture • NSApplication encapsulates views/controllers • Main event-loop • Windows and menus • Event distribution and message passing • Delegate object manages model (data and logic) • Delegate is only code written by programmer

35. Cocoa Architecture • Small set of highly parameterizable widgets • Buttons, sheets, color picker, menus, etc. • Objects are all containers, able to contain other graphical objects • No programming necessary for drag and drop, spell checking, localization, printing...

36. Cocoa Object Properties • NSView • Holds the visualization of model • e.g., what a button looks like based on properties • NSControl • Maintains control logic of model • e.g., what happens to button’s state when pressed and released

37. Cocoa Creating Objects • Use Interface Builder • WYSIWYG, generates “NIB” rather than code • NIB contains • Menu, windows, widgets, images, localization info, sounds • Message connections between widgets • View and control object hierarchy

38. Cocoa Modifying Properties • Modifying view is done in Interface Builder w/ direct manipulation • Modifying control (creating custom widget logic) is done by changing parameters in Interface Builder • Custom views and controls done programmatically

39. Cocoa Connections • Connections are establish by drawing lines from sending object to receiving object • Connection is stored in NIB and handled automatically • Connections to custom views and models also done in Interface Builder

40. Cocoa Connections • User input events handled automatically • Responding to events (defining the model) is done with Java, C, C++, Objective-C, or... • AppleScript, which is the “simple” way • Scripting language designed for gluing Mac OS applications together • (overly) flexible natural language-like syntax

41. Cocoa Connections on clicked theObject tell window of the object try set theRate to contents of text field "rate" as number set theAmount to contents of text field "amount" as number set contents of text field "total" to 0 • “on” handles event • “tell” sends an event to an application or object • “try” attempts to do something, and allows for handling failures • Events go to any application or application object, as defined by Interface Builder

42. Cocoa Connections • “should” asks whether operation should take place • “on should close” could see if a window should close based on GUI state • “will” is when on operation is about to take place • “on will close” prepares window for closing • “did” is when an operation already took place • “on did close” might play an exit sound and quit app

43. Cocoa Dictionaries • Cocoa objects and applications expose their model via “dictionaries” • AppleScripts use dictionaries to manipulate model data and behavior tellapplication "Safari" setthis_URLtotheURLofdocument 1 endtell tellapplication "Mail" activate setthis_messagetomake new outgoing message with properties {subject:"Cool URL!", content:this_URL} endtell

44. Cocoa Custom Objects • Objects with custom controls (actions and outlets only) created in Interface Builder • Connected in Interface Builder • Events defined for actions and outlets with Applescript • Objects with custom views also follow this process, but drawRect() function must be defined to visualize

45. Cocoa Evaluation • Mac OS X only • AppleScript is more difficult to read and write than VB • UI definition and modification is done completely by direct manipulation • Highly parameterizable widgets reduce need for custom widgets • Only programming necessary is definition of model via response to events

46. Alice • 3D Programming Environment • Currently used for building virtual worlds • Useful for building simple 3D user interfaces

47. Alice Architecture • World object • Contains 3D user objects and camera • 3D objects contained in world • Objects can be vehicles of other objects • Vehicles define coordinate systems • All data is global except for local variables

48. Alice Object Properties • Arbitrary 3D model • “skin” for the model • Visibility, opacity, position, orientation • User-defined data • Methods (side-effects only) • Questions (computation only)

49. Alice Creating Objects • Select from a list of models and add to the world • New objects must be modeled in 3D modeling program • Vehicles can be set programatically or by choosing from a list

50. Alice Modifying Properties • Position and orientation • by direct manipulation • built-in animation methods • Other properties • set in property list • changed programmatically